Vous l’avez peut-être remarqué sur iletaitunepub, nous partageons souvent des fichiers appelés mockup servant à illustrer des créations, des design de sites web ou des packaging sur des maquettes relativement jolies.

Le but des mockup est de mettre en valeur une création et d’en mettre plein la vue à votre client ou dans vos présentations. Afin d’éviter aux créatifs de devoir réaliser leurs propres mockup en photographiant et mettant en scène leur iPhone, Macbook, tote-bag…des designers ont conçus des fichiers au format .AI (Illustrator) ou .PSD (Photoshop) qui sont très simples à utiliser.

En suivant ce tuto, vous pourrez en quelques clics ajouter un design de site web dans n’importe quel fond.

Vous pouvez vous entrainer en prenant au hasard l’un des mockup que nous vous proposons en téléchargement gratuit sur ce lien.

  1. Ouvrez le fichier .PSD que vous venez de télécharger avec Photoshop.mockup

  2. Une fois le fichier ouvert, double-cliquez sur la petite vignette du calque afin d’ouvrir une nouvelle fenêtre. Le calque porte souvent un nom tel que REPLACE ME ou encore PUT YOUR SCREEN HEREcomment utiliser un mockup_2

  3. Dans cette nouvelle fenêtre, ajoutez l’image que vous souhaitez. L’écran d’un iPhone, un visuel…vous pouvez importer n’importe quelle image. Il faudra seulement prendre le soin de l’adapter aux dimensions du calque.comment utiliser un mockup_3

  4. Une fois que votre image est bien importée et aux bonnes tailles, il vous suffit d’enregistrer le fichier. Vous pouvez ensuite le fermer pour revenir sur votre fenêtre principale.comment utiliser un mockup_4

  5. MAGIE ! Votre image est parfaitement intégrée au design de l’iPhone !comment utiliser un mockup_5

  6. Si vous avez plusieurs choses à customiser, il vous suffit de répéter l’opération pour obtenir le même résultat sur l’écran du Macbook ou encore du iMac. Il ne vous reste plus qu’à sauvegarder votre fichier en .psd afin de pouvoir le rééditer, et en .jpg ou .png pour l’utiliser sur le web ou dans vos présentations.

    comment utiliser un mockup_6