Comment faire un 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.

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.

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.

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

6- Lorsque vous êtes satisfait, allez en haut à droite et téléchargez votre 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.

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 :

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.

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.

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 ».

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

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.

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.