Nouvel article aujourd’hui pour toi, toi et rien que toi ! Ce qui va suivre va te permettre d’améliorer considérablement tes futures présentations de type site web ou autre interface, grâce à notre joujou préféré : Photoshop ! On commence ? C’est parti !

Qu’est-ce qu’un mockup ?

prawnipro_design

D’abord, pourquoi faire de belles présentations ? Tu t’en doutes, présenter un design de site web à un client, simplement en lui envoyant la maquette au format JPG, ne sera peut-être pas très convaincant. Le but est quand même de lui en mettre plein la vue, tu ne crois pas ? Et pour ça, des designers ont eu la brillante idée de recréer au format PSD ou AI des terminaux mobiles ou tablettes, du style iPhone, Surface, ou carrément des ordis, genre la méga classe avec ton dernier webdesign dans un iMac (cf. image ci-contre).

Tu vois donc que c’est assez pratique, joli, swag, et que ça permet de réaliser des présentations très propres et très « vendeuses ».

Okay, et ton mockup là, comment on s’en sert ?

On est parti pour un petit tuto vraiment rapide (merci à un ancien prof de DUT pour nous avoir appris cette technique) ! Pour ce tutoriel, on va utiliser un mockup gratuit téléchargeable via ce lien. Donc tu me download ça, tu ouvres le fichier PSD et si ton ordi est un peu long, tu as le temps d’aller boire un café.

handiphone_PSD_dribbble

Quand tu as fini ton café, tu peux voir que le template s’est bien ouvert. Tu peux naviguer dans les calques et voir comment le designer a bien retravaillé le mockup (puisque il s’agit à la fois d’une photo pour la main, et d’une pure création pour l’iPhone). En revanche, fais attention de n’en déplacer ou supprimer aucun si tu veux pas que ton iPhone se transforme en Nokia 3110 !

On est okay ? Maintenant, pour modifier le contenu de l’écran, tu vas faire un double clic sur la petite vignette du calque « screen ». La plupart du temps, sur d’autres mockups tu trouveras ce même type de calque avec pour nom « REPLACE ME » ou encore « PUT YOUR SCREEN HERE« .

double_clic_calque

Le double clic va t’ouvrir une première fenêtre en te spécifiant qu’après modification de ce claque, il faudra enregistrer pour appliquer correctement les modifs : no soucy, on y pensera !

Et là, bizarre bizarre, une deuxième fenêtre s’ouvre dans Photoshop, avec une extension PSB, what the fuck ? C’est tout simplement un format du fichier volumineux pour Photoshop, qui te permet de rajouter tout type de modifications sur le calque en question (si tu veux en savoir plus sur le sujet, voici ce que te dit Adobe là-dessus). Donc, maintenant que nous sommes sur notre PSB, on va importer notre dernière application mobile ou n’importe quelle autre image sur ce calque comme ci-dessous :

import_psb

Ensuite, on enregistre, et on peut fermer pour voir la magie de Photoshop nous faire rêver : notre design d’appli c’est parfaitement positionné dans l’écran de l’iPhone, en gardant l’inclinaison et le reflet !

screen_end

 

Wooow mais c’est trop top! Je veux plein de mockups !!

Tu as vu ça ? Tu vas pouvoir faire des présentations de fifous maintenant ! Mais d’abord il faut que tu t’entraines un peu, pour éviter des trucs du genre « mettre un screen d’iPad dans un iPhone » … Tu dois donc vérifier les dimensions de tes terminaux, par exemple en les cherchant sur Google ou bien sur des sites dédiés comme iosres.com ou spirelightmedia.com.

EDIT : sur le Blog du MMI, on a pensé à tout avec cette collection de mockups d’iPhone 6 !

Le petit conseil #jesuisdéjàpasséparlà pour t’éviter une boulette : quand tu réalises des designs pour des terminaux avec écran Retina, vérifie bien la résolution de l’écran, afin que ton design ressorte à la perfection sur le terminal, et que la résolution soit exactement la même.

Après tu peux lire mon article sur comment organiser sa veille graphique, je t’y explique comment trouver plein de mockups et de templates gratuits, avec quelques listes de sites spécialisés dans les ressources gratuites.

Note aussi qu’il n’existe pas seulement des mockups de terminaux mobiles, tablettes ou PC … Tu trouveras énormément de templates pour le print comme des mockups de cartes de visite, des dépliants A4, des flyers A5 et j’en passe !

Un dernier point important : la plupart de ces mockups sont sous licence, c’est-à-dire que même s’ils sont gratuits, tu ne peux t’en servir que sous certaines conditions, donc quand un fichier licence.pdf ou readme.txt se trouve avec le mockup, pense à le lire.

 

Maintenant, si tu sais utiliser à la perfection un mockup, tu peux partager avec tes potes MMI ce tutoriel, mais si tu veux passer pour le winner de ta classe et être le seul à savoir faire ça, tu peux quand même partager l’article sur Twitter ou ailleurs, ça serait méga cool

Allez, à un prochain tutos, et vive les gnocchis !

Comment utiliser des mockups Photoshop ?
4.8 (96.84%) 19 votes

9 réflexions sur “ Comment utiliser des mockups Photoshop ? ”

    1. Salut Kamilya
      C’est vrai que j’ai pas préciser, mais à la base tu ouvres un fichier Photoshop, donc une fois le travail terminé, si tu veux pouvoir le modifier plus tard il te faut enregistrer le fichier .psd !
      Ensuite, tu pourras enregistrer à nouveau ton image en .jpg ou .png (si tu souhaites garder la transparence).
      J’ai répondu à ta question ?

  1. Bonsoir,
    Question bête mais existe t-il des mockups modifiable sous d’autres logiciels à part photoshop? Je dispose d’inkscape et corel paintshop pro, merci d’avance.

  2. Bonjour,

    J’ai téléchargé un mockup pour une carte de visite.
    Ayant réalisé la mienne sur Indd, j’aimerais l’importer dans ce mockup, seulement quand j’exporte mon fichier Indd en Jpg ou Png, la qualité est horrible ( même en ayant sélectionné le  » meilleur qualité »),
    Comment pourrais je procéder pour conserver la qualité?
    Merci

    1. Bonjour Marion
      Il faut que tu regardes du côté des dimensions utilisées dans InDesign, car le format standard d’une carte de visite est 9 x 5,5 cm. Il est possible que ton plan de travail soit plus petit que ça, et donc lorsque tu places ton JPG dans le mockup, l’agrandissement pour arriver jusqu’aux bords « abime » l’image …

  3. Bonsoir David !
    Merci pour cet article. J’aurais une petite question concernant l’utilisation du fichier Mockup, j’ai pas mal recherché et souvent, sur les mockups ce qui m’intéresse ce sont les présentations « dans » le mockup en question ! j’aimerai savoir s’il était possible de les extraire et de bosser dessus à part, avec le design du fichier, puis après de les ré-intégrer dedans.

    Cordialement,
    Lysiah

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir