➜ TEST : Quel style de logo faire pour attirer les bons clients ?

Comment faire un mockup

✅ Apprenez vous aussi à intégrer des images dans un mockup gratuitement et facilement grâce à mes trois tutos !
tuto mockup

Un mockup, c’est une représentation visuelle d’un produit ou d’un design. Comme par exemple un logo, le visuel d’un t-shirt, la couverture d’un livre… Généralement utilisée à des fins de démonstration, de test ou de présentation.
Il s’agit d’un prototype simplifié qui donne une idée concrète de l’apparence du produit final.

Lorsqu’on crée un livre en format PDF par exemple, il est essentiel de susciter l’envie chez les clients. En présentant la couverture du livre sur un vrai exemplaire de livre, cela permet aux clients de se projeter et de donner davantage leur intérêt.

mockup sweat
Le mockup est un sweat, mais ça aurait pu être un livre.

Dans cet article, je vais vous donner trois exemples de produits et trois méthodes différentes pour faire un mockup.
Comme d’habitude, je tiens à faire des tutos pour toutes les bourses et toutes les compétences, d’où ce chiffre trois.
Avant de commencer, vous devez déjà avoir votre visuel. Si vous souhaitez créer un logo, vous pouvez lire cet article. Si vous souhaitez créer une mise en page, vous pouvez lire cet article également.

Regardez la vidéo sur YouTube si elle n’apparaît pas : https://www.youtube.com/watch?v=dE9EfeeLWok

Faire un mockup gratuitement avec Canva :

👍L’avantage de cette technique : gratuite et automatisée
👎L’inconvénient de cette technique : votre visuel ne sera pas unique

1- Allez sur le site Canva et créez-vous un compte gratuit, si ça n’est pas déjà fait.

2- Ensuite, allez sur les app et cherchez « mockup »

3- Sélectionnez le mockup qu’il vous faut.

4- Importez avec le menu de gauche « importer », l’image que vous souhaitez intégrer.

mockup de site web

5- Glissez-déposez votre image dans le mockup.

6- Lorsque vous êtes satisfait, allez en haut à droite et téléchargez votre mockup.

Apprendre à faire un mockup sur Canva, comment faire un mockup ?

Créer plusieurs mockups en même temps facilement :

👍L’avantage de cette technique : vous aurez directement des mockups sur différents supports en même temps. Vous pourrez mettre plusieurs visuels et modifier un peu les images. Une possibilité d’en faire gratuitement.
👎L’inconvénient de cette technique : votre visuel ne sera pas unique et cela pourra être payant dans certains cas.

mockup de livre

Il existe de nombreux sites pour faire cela. Aujourd’hui je vais vous en présenter un : Smartmockups.

1- Allez sur le site de Smartmockup et inscrivez-vous gratuitement.

2- Importez l’images que vous souhaitez mettre, pour ma part j’ai mis celui-ci :

visuel mockup

3- Vous sélectionnez ensuite le support que vous souhaitez. De mon côté j’ai choisi des magasines. Si vous souhaitez avoir plusieurs supports d’un seul coup, il faudra passer au compte pro.

mockup magasine

4- Téléchargez-le ensuite gratuitement, vous aurez une taille largement raisonnable pour le web. Si vous voulez avoir une plus grosse résolution, il faudra payer.

Comment créer un mockup sous photoshop :

👍L’avantage de cette technique : Le rendu sera unique et professionnel.
👎L’inconvénient de cette technique : Photoshop est payant et c’est techniquement le plus complexe.

1- Il vous faudra une image de base. Pour cela, je vous invite à vous rendre sur freepik ou un autre site où vous trouverez des mockups. Vous pouvez également récupérer l’une de vos photographies personnelles pour être certain d’avoir une image unique.

2- Sur Photoshop, faites « fichier » > « importer et incorporer » et sélectionnez l’image de base de votre mockup (un livre, un t-shirt, une enseigne…).

3- Une fois que votre image du mockup est sur votre plan de travail, vous allez refaire « Fichier » > « Importer et Incorporer » pour l’image que vous souhaitez intégrer dans votre mockup, comme la couverture de votre livre par exemple.

mockup d'une affiche dans la rue

4- Vous la placez à la taille de l’affiche intégrée à l’image dans els angles les plus grands.

5- Allez ensuite dans « Edition » > « Déformation de la perspective ».

faire un mockup sous photoshop

6- Placez les 4 points dans els angles de votre visuel (1)

comment faire un mockup sous photoshop

7- (2) Cliquez sur « Déformation » et placez les angles comme voulu sur l’image pour que cela s’intègre à la perspective.

8- Appuyez sur la touche « Entrée » ou le bouton validé lorsque vous êtes satisfait.

9- Faites les derniers ajustements si nécessaires. Vous pouvez ajouter des effets de flou ou de bruit en faisant « Effet » > « Flou » > « Flou Gaussien » par exemple. Vous pouvez également modifier le mode de fusion si besoin, en cliquant dans la fenêtre des calques sur « normal » et le faire défiler jusqu’à ce que l’effet vous convienne.

mode de fusion de photoshop pour un mockup

Ou même changer la colorimétrie dans les réglages (menu de droite). Veillez à chaque fois à bien faire un masque de fusion avant.
10- Pour enregistrer, il vous suffit de faire « Fichier » > « Enregistrer sous » ou « Exporter ».

Nouveauté Illustrator :

Illustrator permet maintenant de faire des mockups regardez :

Ces méthodes vous ont été utiles, vous en avez d’autres ? Dites-le moi en commentaire.

Partagez sur les réseaux cet article
Rechercher
Communication visuelle
Flore

Calendriers Seaspine

J’ai la chance de travailler avec Seaspine, une entreprise de produits chirurgicaux pour la colonne vertébrale. Le domaine de la santé m’a toujours suivi depuis

Partagez sur les réseaux cet article
Lire la suite »
Communication visuelle
Flore

Dépliant de l’Arbre à Palabres

Comme dit précédemment, voir ici l’article, j’ai travaillé sur la communication visuelle de l’Arbre à Palabres qui est une association qui aide les personnes en

Partagez sur les réseaux cet article
Lire la suite »
Flore Michelot alias FloreDuWeb
Flore Michelot alias FloreDuWeb

Auteure de cet article et de ce site.
Graphiste webdesigner depuis 2009 ayant fait 4 ans d’études dans ces domaines,
j'accompagne les entrepreneurs à créer leur communication visuelle pour tous supports.

10 réponses

  1. Génial 🤩
    Je ne savais même pas ce qu’était un mockup et encore moins à quoi ça servait.
    Grâce à ton article, je sais ce que c’est à quoi ça sert et surtout comment le faire.
    En plus ton article est très bien illustré clair et concis. Un régal. Merci

    1. Avec plaisir Marc, merci à toi pour ton commentaire 🙂
      Je me dis que j’aurais peut être dû appeler mon article autrement. Mais comment ? J’ai du mal à savoir ce que les personnes peuvent chercher pour trouver des mots techniques et précis qu’ils ne connaissent pas encore 🙁

      1. hello, je viens de parcourir ton article. est que je peux traduire mockup par réaliser un prototype ou une démo d’un futur produit avant le lacement du produit fini? Avant de découvrir ton article, je n’avais mais aucune idée de ce que c’est un mockup. Comme quoi, on en apprend tous les jours. Petite parenthèse ton site est magnifique.

        1. Tout à fait, c’est ça, mais difficile de l’expliquer simplement que par son nom anglais 😉 Et un grand merci pour le compliment. Je suis entrain de fignoler certaines choses mais je viens en effet de mettre en ligne le nouveau design de mon site donc je suis ravie qu’il te plaise <3

  2. Bonjour Flore,
    Merci pour cet article. J’avais appris à réaliser les mock-ups sur Photoshop mais effectivement le logiciel CANVA fait très bien le job et d’ailleurs il s’est bien amélioré cette année en agrandissant sa banques d’images à ce sujet 😊

  3. Bonjour Flore, merci pour cet article. Je n’ai pas de projet sur ce sujet pour l’instant mais j’ai compris désormais l’intérêt d’un mockup

Laisser un commentaire