Design

Comment créer un mockup ?

By 22/02/2017 mai 1st, 2018 One Comment
[sgmb id= »1″]

Aujourd’hui je fais un tuto Photoshop qui vous permettra de savoir utiliser et surtout savoir créer un mockup afin d’aboutir à un résultat semblable à la miniature de l’article. 🙂

SITE LUKA

Tout d’abord qu’est ce qu’un mockup ?

D’après Google : « Un mockup est un terme informatique, et même un terme de design, qui désigne une maquette d’une interface utilisateur. Cette maquette se veut volontairement simpliste pour se fier principalement sur les fonctionnalités que sur l’aspect esthétique final. »

Très bien chef, qu’est ce qu’il me faut ?

Pour ce tuto vous aurez besoin d’une version de photoshop, au moins CS2 et d’une photo/image libre de droit. (vous pouvez en trouver sur Freepik ou vous contenter de ce que je donne)

Dans ma grande bonté je mets à disposition le fichier .psd contenant cette image -> ici <-

Screenshot_22

Screenshot_23

Elle nous permettra de travailler les perspectives, les reflets et d’arriver à quelque chose de sobre et efficace.

Let’s go !

Etape 1 : Avoir une création/image à mettre en valeur, pour le tuto je vais utiliser la page d’accueil du blog sur pc et sur iPhone 6. Pour avoir l’aperçu d’une page web sur un téléphone particulier appuyez juste sur F12 quand vous êtes sur la bonne page et choisissez le modèle du téléphone, il ne vous restera plus qu’à faire un screenshot. (dim : 1920 x 1080 et  375 x 667)

Screenshot_26

Aperçu sur téléphone.
Screenshot_25

Screenshot sur PC.
Screenshot_24

Etape 2 : On ouvre Photoshop et on utilise l’outil rectangle, on trace un rectangle puis on renseigne les dimensions voulues dans la boite de dialogue (les dimensions vont être celles de votre image à incruster).

Screenshot_27

Etape 3 : On transforme le rectangle en objet dynamique en faisant un clic droit sur le bon calque et en choisissant l’option appropriée.

Screenshot_28

Etape 4 : On vient ensuite placer le rectangle maintenant transformé un objet dynamique là où on veut qu’il soit, appuyez sur Ctrl + T, gardez le bouton Ctrl enfoncé et déplacez les coins du rectangle sur les bords de l’écran du pc.

Screenshot_29

Screenshot_30

Etape 5 : Double cliquez sur la vignette d’objet dynamique de façon à avoir notre objet dynamique ouvert dans une autre fenêtre.

Screenshot_31

Etape 6 : On copie notre image à incruster sur l’objet dynamique maintenant ouvert.

Screenshot_32

Etape 7 : On ajuste notre image par rapport au cadre, on enregistre (Ctrl + S) puis on revient sur l’onglet de l’image de fond. La magie opère, vous pouvez avoir une idée du rendu final.

Screenshot_33

Etape 8 : On ajoute des ombres.

Screenshot_34

Etape 9 : On s’occupe du téléphone, on va commencer par découper l’écran avec un outil de sélection (faites attention à vous trouver sur le bon calque) afin de récupérer les reflets, une fois la sélection effectuée faites Ctrl + C puis Ctrl + V, ça créera un nouveau calque.

Screenshot_35

Etape 10 : On prend les mêmes et on recommence, refaites un rectangle de la bonne dimension, passez le en objet dynamique puis déplacez les coins.

Screenshot_36

Etape 11 : On ajoute l’image à incruster.

Screenshot_37

Etape 12 : On ajoute des ombres et on passe le calque du reflet au dessus du calque de l’objet dynamique, on passe l’opacité du reflet à 20% dans notre cas et on admire le super boulot qu’on vient de réaliser.

Screenshot_38

Fini ! 🙂

Processed with VSCOcam with a8 preset

[sgmb id= »1″]

One Comment

Leave a Reply