Réalise ton mockup gratuitement en 3 minutes

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 :

placeit iphone8

mockuper imac

panneau affichage

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.

picto articles débutants

Débutant

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 ou passer directement à la réalisation de tes visuels.

Réaliser les captures d’écrans pour tes visuels

J’utilise l’extension Fireshot en version gratuite pour mes captures d’écrans. Elle est disponible pour Chrome, Firefox, Internet Explorer et Opera.

Elle est très simple d’utilisation en permet de réaliser des captures d’écrans complètes.

Installation de Fireshot

Tu recherches et installes l’extension directement depuis le répertoire du navigateur.

Voici la démarche pour Firefox :

  • Ouvrir Firefox et se rendre sur la page de Fireshot
  • Cliquer sur + Ajouter Fireshot

fireshot installer

  • Bouton Ajouter

fireshot ajouter

Tu visualises désormais cette page qui t’indique que tout est en ordre.

fireshot réussite installation

Utilisation de Fireshot + une astuce pour la version mobile

Je te présente les deux utilisations les plus communes.

Note : les images sont régulièrement enregistrées sans extension. Il faut ajouter .png à la fin du nom.

La capture d’une partie de l’écran

  • Cliquer sur l’icône Fireshot (le s)

icône fireshot

  • Cliquer sur Capturer la zone sélectionnée

fireshot zone de capture

  • Définir la zone à capturer à la souris

fireshot sélection de la zone

  • Bouton En tant qu’image dans la partie basse sous la capture pour enregistrer

fireshot enregistrer

La Capture de la page entière

  • Cliquer sur Capture de la page entière
    Note : toute ta page va défiler ce qui peut être long sur certains sites

fireshot capture de la page entière

  • Bouton En tant qu’image situé en toute fin de de page pour sauvegarder

fireshot enregistrer

Il y peu y avoir des imperfections avec certains menus et les effets parallaxe.

Capturer la version mobile

Pour réaliser une capture de la version mobile, il te suffit de diminuer la largeur de la fenêtre de ton navigateur.

Si ton site est responsive, tu constateras qu’en dessous d’une certaine largeur l’affichage va s’adapter et passer automatiquement en affichage pour la version mobile. Cela va t’éviter de devoir utiliser les captures d’écrans de ton téléphone.

affichage de la version mobile du site

Les utilisations les plus courantes :

  • La page d’accueil de ton site
  • Ta newsletter
  • Tes profils sur les réseaux sociaux

Il est temps de se lancer dans la réalisation des visuels.

Créer 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

mockuper ordinateur et tablette

imac et ipad

mockuper imac

mockuper imac visuel 2

Portable

mockuper portable

mockuper portable 2

portable et smartphone

portable 3

Tablette

ipad

ipad mini

Smartphone

smartphone

smartphone 2

smartphone 3

Cadres

cadre

galerie

cadre 2

Comment l’utiliser

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

mockuper acceuil

  • Sélectionner le modèle dans le menu gauche

mockuper menu des modèles

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

mockuper insérer un visuel

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

mockuper recadrer

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

Activer

mockuper activer les reflets

Opacité

mockuper opacité des reflets

Orientation

mockuper orientation des reflets

  • Bouton Done pour finaliser

mockuper valider

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

mockuper télécharger

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

mockuper télécharger choix de la taille

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

mockuper enregistrer 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

tablette et smartphone

Écrans de smartphones seuls

écrans smartphone seuls

iMac

imac sur un bureau

Portable

ordinateur portable

Livre

livre

Panneau affichage

panneau affichage

T-shirt

t-shirt

Écran géant

écran géant

Carte de visite

carte visite dans main

Smartphone

smartphone

Comment l’utiliser

  • Se rendre sur le site
  • Bouton Get start for free

smartmockup page d'accueil

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

smartmockup enregistrement

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

smartmockups sélectionner un design

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

smartmockup image

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

smartmockup couper image

  • Bouton Download

smartmockup télécharger

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

smartmockup qualité du fichier

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

Smartphone

placeit smartphone

Portable

placeit portable

iPad

placeit ipad

iPhone

placeit iphone

iPad 2

placeit ipad2

Tablette

placeit tablette

Tablette 2

placeit tablette 2

Samsung

placeit samsung

iPhone 8

placeit iphone8

Galaxy s9

placeit galaxy s9

iPhone 5C

placeit iphone 5c

Mac Book Air

placeit mac book air

Tablette et smarphones

placeit tablette et smartphones

Galaxy s3

placeit galaxy s3

Samsung galaxy note

placeit 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

modèle

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

recadrer

  • Bouton Free Download

télécharger

  • Bouton Free Download

télécharger 2

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

inscription à place it

  • Bouton Free Download

télécharger 2

  • 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

iPad blanc

ipad blanc

Mac Book pro

mac book pro

Portable

portable

Mac Book Air

mac book air

Android

android

Smartphone

smartphone

Comment l’utiliser

applaunchpad accueil

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

applaunchpad modèle

  • Cliquer sur le lien Create an account (en bas)

applaunchpad création de compte

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

applaunchpad enregistrement

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

applaunchpad tableau

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

applaunchpad charger image

  • Bouton Upload image puis image 1 immédiatement en dessous

applaunchpad charger image 2

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

applaunchpad recadrer

  • Bouton Download en haut à droite

applaunchpad téléchargement

  • Sélectionner Super High
  • Bouton Download

applaunchpad qualité

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

browserframe

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

Dimmy.club

dimmyclub

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

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

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.

MockupEverything

mockupeverything

L’outil est plaisant avec la personnalisation des couleurs mais seulement 11 modèles sont disponibles en gratuit avec une résolution en basse définition. L’image est marquée.

ShirtMockup

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

mockdrop

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

Dunnnk

dunnnk

Une cinquantaine de visuels d’écrans en situation. L’impossibilité de recadrer sans aucune indication de taille rendent des résultats pas toujours attractifs (le visuel de l’exemple est écrasé en hauteur).

MockupPhotos

iMac mockup

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

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.

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.

Connais-tu ces 4 meilleurs générateurs de mockups pour des visuels au top ?

 

Connaissais-tu ces outils ?

Les articles qui peuvent t’intéresser

Retrouve tous les articles pour Créer seul ton site

bannière de la newsletter de pour pas un rond version bleu-vert

Ressources

6 générateurs de mockups en ligne pour améliorer la présentation de vos créations de Template.pro

4 Sites gratuits de Mock Up de Yes we blog

mockup pinterest

Résumé
Article
4 meilleurs générateurs gratuits de mockups pour tes visuels
Description
Tu vas créer gratuitement en 3 minutes les visuels personnalisés de ton site et de tes réseaux sociaux. 4 générateurs présentés en détail.
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

You have to agree to the comment policy.