L Les mockups sont des visuels photoréalistes de mise en scène de produits ou de sites.

Tu vas les utiliser pour illustrer ton site, tes articles et tes publications sur les réseaux sociaux.

Voici trois exemples de ce que tu vas réaliser en 3 minutes :

Je trouve le résultat attractif et toi ?

Les outils en ligne que je te présente sont entièrement gratuits ou possèdent de nombreux modèles offerts. De plus, ce sont des services en ligne qui ne nécessitent aucune installation de logiciel.

J’ai réalisé pour toi une sélection des générateurs les plus performants et te présente les modèles les plus souvent utilisés ou ceux qui sortent du lot.

Les tutoriels détaillent toutes les étapes pour produire tes visuels.

Sommaire

Cet article prend environ 6 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

La vidéo avec la réalisation de deux visuels

Tu peux commencer par la réalisations des captures d’écrans à intégrer dans les écrans de tes mockups avec 2 outils gratuits.

Crée en 3 clics tes visuels avec les générateurs de mockups en ligne

Les sites sont classés par ordre de préférence.

Mockuper

Nombre de visuels gratuits : 227
Modèles : Principalement des ordinateurs et des smartphones + cadre, panneau d’affichage
Avantages :
- pas besoin de s’enregistrer
- les mises en scènes sont réussies
- le recadrage simplifié
Inconvénients :
- peu de références en dehors de l’informatique
- pas de livre ou magazine

Quelques exemples

iMac

Portable

Tablette

Smartphone

Cadres

Comment l’utiliser

Se rendre sur le site
Choisir la catégorie dans les icônes

Sélectionner le modèle dans le menu gauche

Les tailles optimales des visuels sont indiquées directement dans les écrans.

Cliquer directement sur l’emplacement du visuel à intégrer
Déposer le visuel ou le charger

Recadrer en déplaçant la zone de sélection

Tu as des options pour gérer les reflets sur l’écran.

Activer

Opacité

Orientation

Bouton Done pour finaliser

Bouton flèche vers le bas pour télécharger

Choisir la taille de l’export (XL de préférence)

Cliquer droit sur l’image
Cliquer sur Enregistrer l’image sous

Smartmockups

Nombre de visuels gratuits : 200
Modèles : écrans, livres, affiches, carte de visite, cadre, vêtements,
Avantages :
- un excellent résultat final
- des fichiers en haute résolution
- un choix important
- le recadrage
Inconvénients :
- doit s’enregistrer avec un e-mail
- seul un fond blanc est disponible en gratuit
- pas de chargement par URL en gratuit
- certains modèles avec plusieurs images ne fonctionnent pas

Quelques exemples

Tablette et Smartphone

Écrans de smartphones seuls

Comment l’utiliser

Se rendre sur le site
Bouton Get start for free

S’enregistrer (nom, e-mail et mot de passe)
Bouton Start 7 days free trial

Tu as 7 jours d’accès complet au site sans aucun engagement après le choix est restreint à 200 modèles sur 700.

Choisir sa catégorie dans la barre latérale ou centrale (écrans, imprimés et textile)
Sélectionner un design

Bouton Upload pour charger l’image (deux dans cet exemple)

Placer son visuel dans la zone visible en déplaçant l’image et si besoin en la zommant
Bouton Crop and Continue

Bouton Download

Choisir la qualité (a moins d’une utilisation très précise prendre super high)

Placeit

Nombre de visuels gratuits : 35
Modèles : uniquement des ordinateurs et des smartphones en gratuit
Avantages :
- La qualité des visuels
- Le recadrage
- Des modèles sur fond transparent
Inconvénients :
- Doit s’enregistrer
- Très peu de modèles gratuits
- Les images envoyées par e-mail

Quelques exemples

Tablette et smarphones

Galaxy s3

Samsung galaxy note

Autres visuels gratuits (pour te faire gagner du temps)

Étudiant de dos devant un iMac
iPad sur fond bleu
iPad avec clavier
Smartphone vue par dessus l’épaule d’une femme
iPad avec stylet sur fond transparent
iPhone et iPad avec clavier
iPhone et iPad fond bois
iPhone 4 à l’horizontale fond transparent
Galaxy note à l’horizontale sur fond verre et eau

Comment l’utiliser

Cliquer sur l’adresse d’un des exemples retenus dans le paragraphe au dessus pour ne pas perdre de temps inutilement
Bouton Upload image en haut à gauche

Placer ton visuel en zoomant et en le déplaçant
Bouton Crop

Bouton Free Download

Bouton Free Download

S’enregistrer avec un e-mail et un mot de passe
Bouton Sign up

Bouton Free Download

Cliquer sur le lien download your image here dans l’e-mail

Applaunchpad

Nombre de visuels gratuits : 1 000
Modèles : ordinateurs et smartphones
Avantages :
- La multitude des modèles proposés
- La qualité des visuels HD
Inconvénients :
- Enregistrement obligatoire
- Le processus d’enregistrement prend 3 minutes
- Le temps de chargement des modèles

Quelques exemples

Comment l’utiliser

Se rendre sur le générateur de mockups
Bouton Get Start

Sélectionner le premier modèle trouvé (cela n’a aucune importance)

Cliquer sur le lien Create an account (en bas)

S’enregistrer (nom/e-mail/mot de passe avec nombre et majuscule ou par les réseaux sociaux)
Bouton Create Account

Valider le lien Click here to confirm dans l’e-mail reçu
Compléter ses identifiants
Bouton Sign in
Bouton Go to dashboard

Sélectionner un modèle (il faut souvent patienter 30 secondes pour le chargement)
Cliquer sur Upload dans le menu de gauche

Bouton Upload image puis image 1 immédiatement en dessous

Positionner le visuel avec le zoom et en déplaçant
Bouton Get cropped canva

Bouton Download en haut à droite

Sélectionner Super High
Bouton Download

Une multitude de ressources supplémentaires

Multi Device Website Mockup Generator

techsini 4 écrans apple personnalisables

4 écrans Apple que tu déplaces avec une intégration directe par l’URL de ton site. Tu navigues dans chaque écran exactement comme sur ton site. L’export est réalisable uniquement par capture d’écran.

Browserframe

Pour réaliser des intégrations dans les principaux navigateurs. Malheureusement seule la version ordinateur est disponible.

Dimmy.club

L’outil est agréable. Tu peux personnaliser les couleurs des écrans et du fond mais pour l’instant seuls 11 sont disponibles.

Magic Mockup

26 mises en situation réussies : ordinateur, smartphone et cadre.
La possibilité de charger directement l’url de ton site compense l’impossibilité de recadrer.

MockUPhone

Tu retrouves tous types d’écrans avec une prédominance des smartphones. L’impossibilité de recadrer freine l’utilisation. L’obligation de passer par un envoi par e-mail me gène franchement. Gros point positif : les visuels sont en PNG sans fond : pas besoin de les détourer.

ShirtMockup

Seulement 2 T-shirts à manches courtes sont disponibles mais tu peux varier les couleurs à l’infini et placer exactement ton visuel où tu le souhaites. L’image est marquée.

mockDrop

L’impossibilité de recadrer handicape cet outil qui dispose d’une centaine de mises en scènes d’écrans.

MockupPhotos

Les 148 visuels gratuits proposés sont attractifs mais l’absence de recadrage pose problème pour réaliser rapidement un visuel. Le générateur ne fonctionne pas sous Firefox. L’enregistrement est obligatoire.

MockupsJar

Plus de 350 modèles sont proposés : ordinateurs, smartphones, packagings et textiles. L’incrustation n’est pas toujours parfaite en fonction des modèles et tu ne peux pas dezoomer lors du recadrage. Tu dois t’enregistrer pour télécharger les versions les plus grandes.

Conclusion

Les générateurs de mockups sont une solution facile d’accès qui te permettent de réaliser un visuel en trois minutes.

Tu es désormais assuré de trouver une illustration pour ton site et tes articles ainsi que tes publications sur les réseaux sociaux.

[tweetshare tweet= »Connais-tu ces 4 meilleurs générateurs de mockups pour des visuels au top ? » username= »pourpasunrond »]

Si tu souhaites aller plus loin, tu peux utiliser des mockups réalisés sous Photoshop. Je te montre comment les personnaliser gratuitement sans Photoshop.

Connaissais-tu ces outils ?