• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Ce cours est diplômant et vous permet d'obtenir des crédits universitaires européens (ECTS).

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 17/07/2017

Adaptez vos éléments graphiques

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Il y a plusieurs méthodes pour adapter les éléments d'une maquette aperçu mobile vers une version aperçu desktop. Je vais vous montrer dans ce chapitre quelques petits trucs maison pour gagner du temps. ;)

Dupliquer des calques d'un fichier psd à l'autre

Vous êtes sûrement très courageux et refaire les choses plusieurs fois ne vous fait pas peur. Mais si vous avez besoin de rapidement recréer un élément issu de la version mobile pour la version desktop, autant "dupliquer" tout le groupe de calques d'un coup

Vous ne serez plus obligé de tout refaire à chaque fois...

Pour dupliquer mon logo vers le document qui sera l'aperçu desktop de mon site, il suffit dans mon document d'aperçu mobile de :

  • Sélectionner le groupe de calques contenant mon logo.

  • Faire un clique droit et choisir " Dupliquer le groupe...".

  • Choisir ensuite mon document psd d'aperçu desktop dans le cadre "Destination / Document".

Vous pouvez copier un ensemble de calques dans un autre document avec la fonction
Vous pouvez copier un ensemble de calques dans un autre document avec la fonction "dupliquer"

Redimensionner des calques

Bien souvent, l'élément dupliqué n'aura pas une taille adaptée au nouveau document. C'est le cas ici de mon logo : je vais donc ensuite le redimensionner. Il suffit pour cela d'appliquer une transformation manuelle : "Edition" > "Transformation manuelle".

En sélectionnant l'un des coins , je vais pouvoir changer et adapter sa taille à mon nouveau document.

Vous pouvez très facilement sur Photoshop redimensionner les éléments
Vous pouvez très facilement redimensionner les éléments sur Photoshop 

Modifier des formes vectorielles

Rappelez-vous de l'astuce que je vous ai déjà montrée dans la partie précédente : il est très facile de modifier les formes vectorielles à l'aide de la flèche blanche. Elle est très utile pour agrandir et modifier à loisir mes éléments comme les icônes, boutons, etc. Essayez !

Sélectionnez la flèche blanche dans le menu des outils
Sélectionnez la flèche blanche dans le menu des outils

Par exemple pour le bouton "Envoyez" de la partie contact je vais, avec la flèche blanche, sélectionner les points d'ancrage de ma forme rectangulaire pour modifier sa taille.

Modifier les tracés et points d'ancrage à l'aide la flèche blanche pour modifier vos éléments
Modifier les tracés et points d'ancrage à l'aide la flèche blanche pour adapter vos éléments

Voilà pour les astuces rapides mais indispensables.

Avec tout cela, vous devriez être capable de réaliser une maquette version desktop à partir de la version mobile rapidement !

Téléchargez la maquette

Je vous conseille d'essayer d'adapter tout seul la maquette mobile que je vous ai fournie dans la partie précédente, en appliquant les quelques notions que nous venons de voir.

Mais si vous avez besoin d'aide pour vous lancer, vous pouvez aussi télécharger le début de mon projet et explorer les différents éléments pour comprendre mes choix d'adaptation.

>> Télécharger la maquette version desktop

Pour finir d'enrichir notre maquette, nous pourrions également ajouter des fonctionnalités à la version desktop (c'est le moment de passer chez ikea :D). Je vous propose justement quelques idées d'investissement dans le dernier chapitre de cette partie !

Exemple de certificat de réussite
Exemple de certificat de réussite