Utilise un mockup PSD gratuitement sans Photoshop [Tuto]

Les mockups sous photoshop apporteraient une touche pro à ton site ou tes réseaux sociaux.

Cependant, quand tu as découvert le tarif de 36 € par mois pour utiliser Photoshop, tu as trouvé (à juste titre) que cela revenait très cher le visuel.

Les visuels réalisés sont impressionnants.

livre face dos

Je suis toujours admiratif de la qualité du travail effectué par les graphistes pour te simplifier la vie.

Il en existe pour de nombreuses utilisations : ordinateurs, livres, objets, affiches…

Avec Photopea, tu vas modifier gratuitement les mockups photoshop en toute légalité.

Je te communique également des visuels testés et des sites qui fournissent des mockups gratuits de qualité.

Limite : Photopea gère parfaitement les fichiers Photoshop comme tu vas le constater avec cependant une contrainte sur la taille du fichier.

Je te recommande de n’utiliser que les fichiers de moins de 80 mo. Au delà, tu risques de te retrouver avec un navigateur figé.

Note : si tu recherches une solution ultra-simple pour disposer de ton visuel en 3 minutes, je te recommande cet article consacré aux générateurs de mockups en ligne.

picto articles intermediaires

Intermédiaire

Voici une vidéo où je te montre concrètement la marche à suivre :

Débutons furtivement par la visualisation des éléments d’un mockup.

Le fonctionnement d’un mockup

Un mockup incorpore tes visuels dans une scène pour produire un résultat photoréaliste. Pour moi, le résultat est parfait quand tu es persuadé que la photo finale est prise sans retouches.

Le graphiste intègre des effet graphiques qui s’appliquent automatiquement. A minima, il déforme le visuel pour l’ajuster au format et reproduire la perspective.

Les meilleurs vont bien au delà et ajoutent des effets d’éclairage, des reflets, des ajustements de couleurs

Je vais prendre un exemple d’une couverture de livre pour détailler concrètement les éléments.

C’est uniquement à vocation d’illustration. Tout le travail est réalisé pour toi sans que tu es à intervenir en dehors de positionner tes visuels.

Débutons avec un exemple simple :

étapes d'un mockup. la version complète

Tu intègres uniquement la couverture et la tranche à plat.

couverture

tranche

La couverture est mise en perspective et au format.

couverture déformée

La tranche est également ombrée.

couverture en relief

Le graphiste a ajouté les pages.

visuel en volume

Une ombre complète le rendu.

ajout de l'ombre

Voici une version plus élaborée :

Le graphiste est parti d’une photo de casque qu’il a isolé de son environnement (détouré).

photo de base

Il ajoute un fond de couleur.

fond de couleur

Un dégradé de couleurs est appliquée sur toute la forme du casque.

la couleur du casque

Le motif personnalisé est intégré.

ajout motif

Les détails du casque comme les vis, sangle et intérieur du casque sont dessinés.

les détails

Les jeux de lumières et les reflets donnent l’illusion du volume.

lumières et reflets

Voici le résultat finalisé sur fond clair.

mockup de casque complet

Certains mockups sont extrêmement complexes avec plusieurs visuels et de nombreux objets personnalisables. Malheureusement leurs tailles les rendent généralement ingérables avec Photopea.

Passons immédiatement à la pratique.

Intègre ton visuel avec Photopea

J’utilise ce modèle d’affiche extérieure proposé par GraphicsFuel.

visuel finalisé

Si tu souhaites t’entrainer en parallèle, voici le lien de téléchargement.
Le bouton télécharger est en bas.

télécharger le modèle psd

Chaque modèle sera différent. Cependant, le principe général restera identique.

  • Se rendre sur Photopea
  • Cliquer sur la croix en haut à droite pour supprimer le message d’accueil

photopea message d'accueil

  • Cliquer sur FR pour passer à la version française

passer à la version française

  • Sélectionner Ouvrir depuis l’ordinateur

ouvrir depuis ordinateur

Tu retrouves les calques sur la droite.

calques

Tu recherches systématiquement dans les mockups le calque qui accueillera tes visuels. En général, il est clairement indiqué comme ici Add poster design here.

  • Double-cliquer sur le calque Add poster design

calque du visuel

  • Glisser-déposer ton visuel

déposer visuel

  • Clic droit sur le nouveau calque avec ton visuel

Note : si tu souhaites savoir comment effectuer une capture d’écran, je détaille la démarche dans l’article sur les générateurs de mockups en ligne.

  • Cliquer sur Convertir (Pixeliser)

pixeliser

  • Cocher Contrôles de transformation dans la barre du haut si ce n’est pas réalisé

contrôles de transformation

  • Ajuster le visuel à la bonne taille avec les poignées

poignées de transformation

Fichier > Sauvegarder (Smart Object)

sauvegarder smart object

  • Fermer cet onglet

Fichier > Exporter à > JPG

export en jpg

  • Choisir la qualité maximale (100%)
  • Bouton Sauvegarder

sauvegarder

Voici le résultat :

visuel finalisé

20 mockups testés et approuvés

Je te livre le résultat de quelques heures de recherche. Je les ai tous testés avec Photopea.

Si tu en trouves d’autres, n’hésite pas à me les indiquer.

Livre avec tranche

ajout de l'ombre

Un lien est demandé vers graphicsfuel.com.

Livre pris en main

mockup psd livre en main

Un lien est demandé vers graphicsfuel.com.

Magazine

visuel de magazine ouvert
Livre et dos

livre face dos

Cartes de visites

cartes de visites prises en main

Un lien est demandé vers graphicsfuel.com.

Mise en scène avec 3 écrans

espace de travail avec 3 écrans

Un lien est demandé vers graphicsfuel.com.

3 écrans de face

3 écrans bruts

Un lien est demandé vers graphicsfuel.com.

3 écrans mobiles sans support

3 applications mobile

Ce visuel est limite en taille. Il met 2 minutes à s’ouvrir.
Un lien est demandé vers graphicsfuel.com.

zoom sur un écran d’ordinateur

zoom sur l'url d'un ordinateur

iPhone 6 et Samsung Galaxy S6 en main

iphone en main

Tu peux basculer de l’iPhone au Samsung en masquant le calque (cliquer sur l’oeil à gauche).

Un lien est demandé vers graphicsfuel.com.

iMac

iMac

Macbook

macbook

Affiche

poster

Affiche

affiche

Poster encadré

poster encadré

Poster dans un loft

poster dans un loft

Canette

canette
Un lien est demandé vers graphicsfuel.com.

Casquette brodée

casquette
Un lien est demandé vers graphicsfuel.com.

Étiquette

étiquette
Inscription à la newsletter demandée pour recevoir le lien.

Tampon

tampon

Le fichier est un peu lourd mais utilisable avec un peu de patience au chargement et à la sauvegarde.

Où trouver des mockups de qualité gratuits

Voici quelques ressources pour trouver de bons visuels gratuits. J’ai omis les sites qui offrent des visuels fantastiques mais dont la taille n’est pas exploitable sur Photopea.

Graphic Burger

graphic burger section mockups

  • Des visuels variés
  • Le site est régulièrement enrichit
  • La taille des fichiers est indiquée clairement
  • Lien direct vers le téléchargement
  • De nombreux fichiers de tailles raisonnables

GraphicsFuel

graphicfuel

  • De nombreux objets
  • Le téléchargement est direct
  • La taille des fichiers est indiquée directement
  • De nombreux fichiers exploitables
  • Quelques modèles sont payants
  • Un lien vers le site est demandé à l’utilisation

Graphictwister

graphictwister

  • Des visuels de haute qualité
  • Les liens dirigent vers des sources externes
  • Lire attentivement les conditions d’utilisations de chaque mockup pour connaître les conditions d’utilisation

Pixeden

pixeden

  • Les visuels sont très travaillés
  • Mélange de gratuit, gratuit en échange de l’inscription à la newsletter et payant
  • Fichiers souvent très lourds

Mockupworld

mockupworld

  • Un choix vaste
  • Redirige vers des sites externes
  • Fichiers souvent très lourds

Si tu n’as pas trouvé ton bonheur, j’utilise la recherche suivante :
mot-clé mockup CC0

Conclusion

Les mockups décuplent l’imagination visuelle et permettent de mettre en scène ta marque et tes produits.

Je te recommande de te créer ta propre bibliothèque de modèles dans laquelle tu pourras piocher quand tu manques d’inspiration.

Comment utiliser des mockups PSD sans Photoshop. #logo

Partage tes découvertes testées sous Photopea en commentaire.
J’enrichirais l’article au fil des retours.

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

Personnalise gratuitement un mockup PSD sans Photoshop + de nombreuses ressoures. #mockup

Résumé
Utilise un mockup PSD gratuitement sans Photoshop [Tuto]
Article
Utilise un mockup PSD gratuitement sans Photoshop [Tuto]
Description
Personnalise un mockup PSD gratuitement sans Photoshop. Je te présente 20 visuels pour t'inspirer et te communique mes ressources.
Auteur
Publié par
pour pas un rond
Logo

Laisser un commentaire

You have to agree to the comment policy.