Des maquettes Photoshop, j’en fait tous les jours… Régulièrement, on me demande d’y retoucher.
Au début je devais activer « la sélection automatique » et cliquer sur le calque que je devais modifier…
Parfois, les calques sont tellement proches que cette méthode n’était vraiment pas idéale. Ce pourquoi je mets au point quelques astuces pour bien structurer vos maquettes Photoshop.
Prendre en compte la résolution de l’écran
Une maquette de Smartphone n’aura pas la même résolution qu’une maquette d’écran de PC 24 pouces.
Il peut paraître insensé de le préciser, mais il faut prendre en compte au pixel prêt la résolution pour vos réalisations !
- Prévoir la largeur et la hauteur de l’écran
- Ne pas oublier les bords : la barre de menu, les boutons d’actions, la barre de scroll… Il m’arrive encore de me faire avoir et de manquer de place dans mon PSD…
Exemple de maquette pour le Nexus 5 (écran 5 pouces à résolution Full HD de 1920x1080px) :
Ici, j’ai représenté en rouge la zone réellement utilisable. Elle mesure 1700px de haut… Soit 220 pixels de moins ! Et oui, c’est énorme…
Utiliser les repères
Adobe Photoshop permet d’utiliser des repères… Comme leur nom l’indique, il permettent de créer un repère (horizontal et vertical).
Le gros intérêt est de pouvoir créer une grille, grille qui sera réutilisée par le développeur (ou plutôt l’intégrateur) pour la création de l’interface.
Vous serez ainsi plus précis, plus symétrique et vous gagnerez du temps quand il faudra placer de nouveaux éléments !
Exemple de maquette sans, puis avec repères :
Si vous ne voyez pas la différence…
Sans les repères les blocs ne sont pas placés précisément, du pifométrique quoi ! Aucune harmonie, rien de s’adapte.
Avec les repères tout change, c’est propre, tout simplement ! En plus, si vous devez placer d’autres blocs, le magnétisme des repères vous aidera ! Bien non ?
Un excellent plugin dont je me sers est GuideGuide, développé par Cameron McEfee (gratuit). Il permet d’automatiser la création des repères en choisissant le nombre de colonnes (ou lignes) ou leur largeur (ou hauteur), de placer le milieu vertical et horizontal… Vraiment sympa.
Créer une palette de couleurs
Et oui, votre client vous a fourni sa palette de couleurs (12 au total) en format Word… Forcément, dur de l’utiliser sans devoir taper le bon code à chaque fois, sous condition de ne pas faire d’erreur !
Je vous conseille sincèrement de créer une palette .act qui sera utilisable, que vous pourrez envoyer et appliquer directement sur vos maquettes !
Pour ce faire, il faut créer un document contenant des carrés des couleurs que vous devrez utiliser, cliquer sur « Fichier » puis « Enregistrer pour le web ». Ensuite, choisir le format GIF et le nombre de couleurs (en général 8 ou 16)….
Sur la droite du panneau, la palette colorimétrique s’affiche :
Il faut ensuite cliquer sur la toute petite flèche, et sur « Enregistrer la table des couleurs » en bas de liste.
Voilà, c’est fait 
Vous n’avez plus qu’à l’ouvrir comme tout autre fichier, et elle s’ouvrira dans votre Photoshop !
Pratique hein
Les polices de texte
Pour les polices de texte c’est relativement simple. Si vous devez télécharger la police sur internet, l’installer et enfin l’utiliser, votre client devra faire la même chose (si vous lui transmettez les PSD).
N’oubliez pas de lui transmettre les bons fichiers, et la procédure à suivre si c’est un néophyte …
Un très bon site au passage, sur lequel vous trouverez votre bonheur : Dafont.
Le nommage des calques
Combien de fois ça m’est arrivé… (assez souvent) Ouvrir un PSD avec une multitudes de calques sans nom, pas classés…
C’est comme si vous copiez tous les fichiers de votre ordinateur dans un seul dossier, que vous supprimiez tous les noms, et que je vous demandais le fichier « anniversaire_maman.mp4″…
Pas facile hein
Un exemple vaut mieux qu’un paragraphe :
Sans nommage :
Avec nommage :
Un peu plus lisible ! Et surtout beaucoup plus clair… Nommer les calques prend 1 minute. Si c’est fait en temps réel, c’est encore plus rapide !
Je compléterais cet article au fur et à mesure, avec vos remarques peut-être ?