Mockup : Mettre en scène une création graphique

Publié le

Vous avez récemment créer un graphisme, un logo ou des cartes de visite ? Le mockup vous facilitera la réalisation de vos maquettes afin de les visualiser. En effet, avant d’envoyer des fichiers vectoriels à un imprimeur, il est important de vérifier si le visuel nous convient bien. Le mockup vous aide à visualiser le rendu sur un support publicitaire, avant son impression. Il s’agit simplement d’une maquette fournie par une photo de base, ainsi que votre réalisation graphique par dessus. Vous pouvez également vous servir du mockup pour simuler la conception d’un site web, en créant un aperçu des pages sur un écran d’ordinateur, de tablette ou de téléphone.

RSS
Facebook
Facebook
fb-share-icon
Twitter
Tweet
Pinterest
Pinterest
fb-share-icon
LinkedIn
LinkedIn
Share
mockup

Télécharger un mockup

Mettez en scène vos créations graphiques avec ces mockups :

mockup responsive
Responsive
Mockup iphone 11
Mockup iphone 11
enseigne-lumineuse
Enseigne Lumineuse

Plateformes de mockups

Vous ne trouvez pas votre bonheur parmi ces propositions ?

Voici quelques sites internet sur lesquelles vous trouverez une véritable galerie de mockups avec des outils plus ou moins différents :

Freepik : Connu majoritairement par beaucoup de graphiste, cette plateforme comprends énormément de design d'élément ou de personnages. Si vous ne le connaissiez pas, vous pouvez télécharger vos mockups directement dessus. Cependant, peu de mockups gratuit y figurent, mais ceux présents vous conviendront peut-être!

Mockupworld: Sur MockupWorld, vous trouverez forcément votre bonheur ! Il y a beaucoup de choix et vous pouvez trier les mockups en fonction de catégories ( tels que les packagings, les iPhones ou la mode ). Une grande partie des mockups est gratuite sur le site, d'autres payantes.

Envato Market : Télécharger des mockups de qualités sur Envato Market et vous bénéficierez d'un rendu visuel professionnel. Un abonnement est nécessaire pour accéder au service et son prix est très abordable !

Comment utiliser un mockup ?

Créer une simulation de votre support d'impression imprimée n'est pas toujours simple.

Pour utiliser ou créer un mockup, il est recommandée d'installer le logiciel Adobe Photoshop. En effet, c'est l'un des logiciels de graphisme les plus réputées, et la majorité des mockups sont au format PSD.

Sur Photoshop, vous pouvez

Panneau des calques sur Photoshop
Panneau des calques sur Photoshop

Sur cette image, la partie entourée en rouge représente les calques disponibles sur votre fichier PSD.
Dans cet exemple, je choisirais le mockup d'une carte de visite simple à prendre en main.

Afin de remplacer le visuel de vos cartes de visite, vous devez analyser chaque calque pour mieux comprendre leur fonctionnement.

Comprendre les calques disponibles sur le mockup vous permettra de

  1. Faciliter votre intégration d'image
  2. Améliorer l'apparence et le design que produit les calques ( comme par exemple, les effets d'ombres )

Le calque de fond

Fond sur le mockup
Calque de fond

Sur la fenêtre des calques, le dernier s'apparente au fond du mockup. Ce qu’il y a autour des éléments de votre conception se trouve ici.

Attention, ce n’est pas toujours conçu de la même façon ! Ici, c’est bien le cas, et donc, nous pouvons passer aux calques du dessus.

Le calque des couleurs

Calque pour changer les couleurs sur le mockup
Calque pour changer les couleurs sur le mockup

Ce mockup a été conçu de sorte à pouvoir modifier certaines couleurs et certains aspects de la carte de visite ( ou ce qui l'entoure ).
Pour prendre un exemple, je vais changer manuellement les couleurs et vous montrer le résultat :

Changement des couleurs
Rendu avec les nouvelles couleurs sur un mockup PSD
Rendu avec les nouvelles couleurs

Le calque d’effet

En plus de la présence des calques de couleurs, certains fichiers PSD intègrent d’autres types de calques. Par exemple, le mockup utilisé sur cet exemple intègre directement un effet de lumière, qui a pour but de mettre en avant la carte de visite.

Effet de lumière sur calque mockup
Calque effet de lumière sur le mockup

Le calque avec votre création

Calque pour changer le contenu du mockup
Calque pour changer le contenu du mockup

Dans la plupart des cas, mais pas toujours, le calque modifiable se trouve tout en haut. Pour modifier le contenu de la carte de visite, il vous suffit de suivre les instructions écrites sur le titre du calque. En double cliquant sur la première icône du calque, on retrouve le visuel des cartes à plat.

Rendu à plat du visuel

Vous pouvez ici importer le visuel de votre carte, et enregistrer le fichier avec CTRL+S. Cela modifiera en fait le calque de notre précédent fichier.

Remplacement du graphisme sur le visuel à plat
Remplacement du graphisme sur le visuel à plat
Rendu final du mockup
Rendu final du mockup
Auteur
Benabdelhak Kevin
Graphiste Freelance disponible 7j/7

En tant que passionné du webdesign, du graphisme et du référencement naturel, je partage des informations et vous propose des solutions pertinentes pour votre communication.

Icône de Facebook Icône de Pinterest Icône de Behance Icône de Dribble Icône de LinkedIn
K-Graphiste

GRATUIT
VOIR