Design

Conseils pour créer une maquette graphique sur Photoshop

Par Tomy, le 8 juin 2021
Conseils pour créer une maquette graphique sur Photoshop

Si vous souhaitez créer une maquette sur Photoshop, que vous soyez débutant ou professionnel, étudiant ou designer, il y a certains critères à respecter afin de bien commencer la réalisation de vos travaux.

Logo-photoshop
Logo Photoshop

1- Comment créer votre maquette Photoshop

Avant de commencer, il faut bien paramétrer le logiciel pour correspondre aux recommandations web ou print. Certaines étapes sont déterminantes et définiront la crédibilité de votre document.

Lorsqu’on ouvre le logiciel Photoshop, « créer nouveau document » apparait :

interface-création-document-photoshop
interface création document Photoshop

Celle-ci permet de définir la dimension, le mode de couleur, la résolution ainsi que le format choisi de votre document Photoshop. Nous ne rentrerons pas dans les détails mais nous allons vous expliquer globalement à quoi ils servent dans la création de votre document.
Note : A savoir que Photoshop propose des formats déjà existants afin de créer sa maquette.

a- Créer la dimension de votre maquette

Bien choisir la dimension est importante. Par exemple, si vous souhaitez réaliser une maquette de site web, le format utilisé sera moins large et plus long que si vous créez une maquette graphique pour du print.
Voici un article précisant les différents formats pour vous aider à choisir en fonction de vos besoins : https://www.anthedesign.fr/developpement-web/format-d-image-web-print/

b- Le mode de couleur de votre maquette

Lorsque l’on créé sa maquette Photoshop, 2 profils colorimétriques sont disponibles : CMJN (Cyan, Magenta, Jaune et Noir) et RGB (RVB en français : Rouge, Vert et Bleu. Le CMJN s’adapte au format print, tandis que le RGB est utilisé pour le web. Vous pouvez retrouver plus de détails sur : https://www.printshot.fr/content/22-le-mode-cmjn-en-imprimerie-difference-entre-cmjn-et-rvb

c- La résolution de votre maquette

La résolution de votre document Photoshop définira la qualité de votre document. Plus la résolution est élevé (300PPI ou plus) plus le nombre de pixels sur l’image sera conséquent. En revanche cela alourdira grandement le poids de votre document à la sortie, pouvant dépasser plusieurs go.

Pour faire simple, il existe des standards à utiliser, mais il est tout à fait possible de les modifier à votre guise. Pour le format print, créez un document en 300 PPI. Le format web s’adapte plutôt au 72PPI.

2- Réaliser sa maquette Photoshop

Il ne faut pas commencer directement à intégrer des images ou du texte sur votre document. L’objectif est de procéder de manière structurée. en créant des blocs vierges sur le document.

Exemple de maquette pour un site e-commerce
Exemple de maquette pour un site e-commerce

Une fois que votre structure est solide et bien définie (dimension des images, place pour le texte…), . on peut ensuite passer à la réalisation graphique. Bien prendre en considération ces éléments permet de gagner beaucoup de temps par la suite.

En fonction du type de public que l’on vise (Réseaux sociaux, grand publics, Linkedin, etc ) il faudra bien adapter son document. Les dimensions, la taille des images et la charte graphique doivent être différentes en fonction de qui est visé. Il faut bien comprendre cela avant de procéder.

Tout le document doit être cohérent et adapté. Du profil colorimétrique, à la dimension des blocs jusqu’à l’intégration de la charte graphique. Bien comprendre cela vous permettra de créer une maquette graphique facilement sur Photoshop. Le tout est de procéder par étape.

3- Enregistrer votre maquette Photoshop

Une fois que vous avez finit la création de votre maquette, il faut ensuite l’enregistrer. Il existe beaucoup de formats différents directement intégré au logiciel Photoshop. Voici un bref descriptif de ces derniers (source : https://helpx.adobe.com/fr/photoshop-elements/mac-app-store/help/saving-exporting-images.html)

a- BMP

BMP est un format d’image Windows standard. Vous pouvez spécifier un format Windows ou OS/2, ainsi qu’un nombre de bits pour l’image. Pour les images 4 bits et 8 bits au format Windows, vous pouvez également opter pour la compression RLE.

b-  GIF

Le format GIF est utilisé pour afficher les graphiques et les petites animations sur les pages web. GIF est un format compressé conçu pour réduire la taille des fichiers et la durée de transfert. Ce format prend uniquement en charge les images couleur 8 bits (256 couleurs maximum). Vous pouvez également enregistrer une image en tant que fichier GIF à l’aide de la commande Enregistrer pour le web et les périphériques.

c- JPEG

Utilisé pour l’enregistrement des photos, le format JPEG conserve toutes les informations chromatiques de l’image mais compresse la taille des fichiers par élimination sélective des données. Vous pouvez choisir le niveau de compression. Un niveau élevé diminue la qualité d’image et la taille de fichier, tandis qu’un niveau faible produit l’effet inverse. JPEG est un format standard pour l’affichage des images sur le web.

d- Photoshop (PSD)

Il s’agit du format d’image standard de Photoshop Elements. L’utilisation de ce format est recommandée pour enregistrer vos images retouchées tout en conservant toutes leurs données graphiques et leurs calques dans un fichier d’une seule page.

e- Format Création photo (PSE)

Il s’agit du format standard de Photoshop Elements pour les créations contenant plusieurs pages. L’utilisation de ce format est recommandée pour enregistrer vos créations photo tout en conservant toutes leurs données graphiques et leurs calques dans un fichier de plusieurs pages.

f- Photoshop PDF

Photoshop PDF est un format de fichier reconnu par toutes les plateformes et applications. Les fichiers PDF affichent et conservent avec précision leurs polices, mises en page, graphiques vectoriels et bitmap.

g- Pixar

Les stations de travail Pixar sont conçues pour les applications graphiques haut de gamme, notamment les logiciels d’animation et d’illustration 3D. Le format Pixar prend en charge les images en niveaux de gris et RVB

h- PNG

Le format PNG prend en charge la compression sans perte et affiche les images sur le Web. Contrairement au format GIF, le format PNG prend en charge les images 24 bits et génère une transparence d’arrière-plan sans contours irréguliers. Cependant, certains navigateurs Web ne prennent pas en charge ce format. Le format PNG préserve la transparence des images en niveaux de gris et RVB.

i- TIFF

 Le format TIFF est utilisé pour échanger des fichiers entre les applications et les plates-formes. TIFF est un format d’image bitmap flexible qui est pris en charge par la plupart des applications de dessin, d’édition d’images et de mise en page.

Vous avez maintenant toutes les informations de bases pour créer une maquette graphique sur Photoshop. Bon courage.

Tomy

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.