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 :

https://www.instagram.com/p/CvIhcgvoWjC/

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

Partagez sur les réseaux cet article

Recherche

Articles
Similaires

Graphisme

Les miniatures YouTube : L'Art de captiver l'attention

Comment attirer le clic sur vos vidéos YouTube ? Avec vos miniatures ! Je vous donnes des astuces pour faire de bonnes miniatures :
Lire la suite »
8 commentaires
Communication visuelle

Psychologie des couleurs pour entrepreneur : Le guide

Psychologie des couleurs pour entrepreneur : Apprends à choisir des couleurs qui influencent la perception de ta marque :
Lire la suite »
13 commentaires
Wordpress

Résultats de l'évènement interblogueur !

✅ Découvrez comment le visuel enrichit vos expériences en ligne à travers diverses activités professionnelles.
Lire la suite »
2 commentaires
← Article PrécédentArticle Suivant →
portrait Flore Michelot graphiste webdesigner freelance

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 Commentaires

  • Marc dit :
    10 juillet 2023 à 20 h 23 min

    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

    • Flore dit :
      10 juillet 2023 à 20 h 41 min

      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 🙁

      • 12 juillet 2023 à 17 h 47 min

        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.

        • Flore dit :
          12 juillet 2023 à 18 h 49 min

          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

  • Emeline dit :
    11 juillet 2023 à 15 h 16 min

    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 😊

    • Flore dit :
      11 juillet 2023 à 22 h 56 min

      En effet, c'est très bien fichu ! Même si je trouve que ça manque encore de diversité. On risque d'avoir tous les mêmes mockups 😅

  • Diane revillard dit :
    13 juillet 2023 à 15 h 37 min

    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

    • Flore dit :
      13 juillet 2023 à 15 h 46 min

      Oui, je doute que dans ton secteur ce soir utile pour le moment 😀

  • Isabelle dit :
    15 juillet 2023 à 21 h 50 min

    Super astuces, je ne connaissais pas smartmockup. Merci !

    • Flore dit :
      18 juillet 2023 à 10 h 26 min

      Oui c'est bien pratique. Il en existe plein d'autres dans le même genre.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.