✅ Apprenez vous aussi à intégrer des images dans un mockup gratuitement et facilement grâce à mes trois tutos !
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.
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.
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 :
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
Newsletter
Recevez chaque semaine des actualités pour améliorer votre identité visuelle grâce à des
astuces simples et efficaces.
Soyez au courant de toutes les nouveautés et plus encore...
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.
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
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 🙁
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.
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
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 😊
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
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
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 🙁
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.
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
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 😊
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 😅
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
Oui, je doute que dans ton secteur ce soir utile pour le moment 😀
Super astuces, je ne connaissais pas smartmockup. Merci !
Oui c'est bien pratique. Il en existe plein d'autres dans le même genre.