Utilise un mockup PSD gratuitement sans Photoshop [Tuto]
Jean
/
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.
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é.
Sommaire
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.
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 :
Tu intègres uniquement la couverture et la tranche à plat.
La couverture est mise en perspective et au format.
La tranche est également ombrée.
Le graphiste a ajouté les pages.
Une ombre complète le rendu.
Voici une version plus élaborée :
Le graphiste est parti d’une photo de casque qu’il a isolé de son environnement (détouré).
Il ajoute un fond de couleur.
Un dégradé de couleurs est appliquée sur toute la forme du casque.
Le motif personnalisé est intégré.
Les détails du casque comme les vis, sangle et intérieur du casque sont dessinés.
Les jeux de lumières et les reflets donnent l’illusion du volume.
Voici le résultat finalisé sur fond clair.
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.
Si tu souhaites t’entrainer en parallèle, voici le lien de téléchargement. Le bouton télécharger est en bas.
Chaque modèle sera différent. Cependant, le principe général restera identique.
Cliquer sur la croix en haut à droite pour supprimer le message d’accueil
Cliquer sur FR pour passer à la version française
Sélectionner Ouvrir depuis l’ordinateur
Tu retrouves les calques sur la droite.
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
Glisser-déposer ton 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)
Cocher Contrôles de transformation dans la barre du haut si ce n’est pas réalisé
Ajuster le visuel à la bonne taille avec les poignées
Fichier > Sauvegarder (Smart Object)
Fermer cet onglet
Fichier > Exporter à > JPG
Choisir la qualité maximale (100%)
Bouton Sauvegarder
Voici le résultat :
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.
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.
Nous utilisons des cookies pour optimiser le site web et le service.
Fonctionnel
Toujours activé
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Préférences
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiques
The technical storage or access that is used exclusively for statistical purposes.The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
The technical storage or access is required to create user profiles to send advertising, or to track the user on a website or across several websites for similar marketing purposes.
