Utilise un mockup PSD gratuitement sans Photoshop [Tuto]

/

visuel de l'article sur photopea

L 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é.

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

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

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.

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
fermer smart object

Fichier > Exporter à > JPG

export en jpg
  • Choisir la qualité maximale (100%)
  • Bouton Sauvegarder
sauvegarder

Voici le résultat :

visuel finalisé

17 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

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.

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

Affiche

affiche

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.

[tweetshare tweet= »Comment utiliser des mockups PSD sans Photoshop. #logo » username= »pourpasunrond »]

Pour réaliser des captures d’écrans, je te présente 2 outils gratuits dans cet article.

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

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean

Je partage mes apprentissages et mes expériences depuis 2017 avec + de 100 tutoriels et ressources.

Tu devrais trouver ton bonheur pour créer ta marque, construire ton site puis le faire grandir et développer ton entreprise sur pour pas un rond.

Jean


2 réponses à “Utilise un mockup PSD gratuitement sans Photoshop [Tuto]”

    • Bonjour Greg,

      Je te remercie de ton retour.
      Je trouve également que Photopea rend de fiers services et dépanne bien.

      Excellente journée,
      Jean

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *