Préparer un fichier Photoshop idéal pour l’intégration CSS ?
Mis à jour en Octobre 2016
Un débat sans fin s’est ouvert entre webdesigners et intégrateurs CSS. Ça tweet, ça clash, ça buzz !
Est-ce l’intégrateur qui doit maîtriser Photoshop ou le webdesigner qui doit connaître le CSS — et voire découper les éléments de sa charte ?
En tant que graphiste j’estime qu’un webdesigner doit connaitre les principes du CSS pour livrer des chartes nickelles.
Pour pallier certaines lacunes, des outils pour webdesigners ont émergés : Sketch3, Macaw ou Google Web.
Ok, ils sont funs et tendances !
Mais dès que l’on sort de l’ambiance flat, on est limité. Photoshop reste le maître en la matière.
Je vous propose donc ma méthode pour livrer des PSD propres. Votre intégrateur vous remerciera.
Cette méthode est bien sûr à compléter.
1/ Partir d’une bonne structure
La première question à se poser est Quel sera le format final de ma charte ?
Je vous entends d’ici : “Bah en responsive” !
Très bien ! Mais sauf si vous avez vendu 5 déclinaisons responsives (et j’en doute) cette charte doit être lisible sur les grands écrans 27 pouces comme les 13 pouces pour sa version “Desktop”
Pour commencer je crée un nouveau document de 2000 pixels de large avec une zone utile de 1000 pixels au centre.
Mon webdesign n’ira pas au-delà de cette zone, mais je prévois un débord graphique pour que les grands écrans ne se retrouvent pas avec du blanc de chaque côté.
C’est souvent une contrainte pour trouver des photos panoramiques sur les banques d’images.
Votre intégrateur utilisera probablement un Framework CSS basé sur un principe de grilles (type Bootstrap). Pour faciliter son travail et structurer votre maquette je vous conseille d’utiliser la nouvelle option de Photoshop Affichage > Nouvelle disposition des repères
12 colonnes seront créées pour vous aider à aligner, au pixel près, vos éléments les uns par rapport aux autres.
J'ai été un peu réticente au début. Je pensais que mon design serait cantonné à du “colonnage”. Aujourd’hui je m’aperçois que mes chartes sont plus équilibrées. Vous n’êtes bien sûr pas obligés de toujours les respecter, mais elles doivent être des lignes directives.
2/ Oui mais le Responsive Design ?
Croire que votre intégrateur saura décliner tout seul votre maquette pour tablettes et mobiles c’est comme faire confiance à singe face à des mots croisés Force 8. Chacun son métier ! Le votre est de livrer un PSD sur lequel il n’aura rien à redire.
Vous devrez travailler sur la base d’une grille comme pour la maquette Desktop.
Voici les formats que j’utilise :
• Tablette : Maquette PSD de 768 pixels avec une configuration grille comme suit :
12 Colonnes |
Colonnes de 43 px |
Gouttières de 20 px
• Mobile : Maquette PSD de 320 pixels avec une configuration grille comme suit :
6 Colonnes |
Colonnes de 35 px |
Gouttières de 20 px
3/ 10 conseils à suivre
Pêle-mêle, quelques conseils à appliquer si vous voulez que votre intégrateur respecte votre travail :
1 • Travaillez en RVB et en 72 DPI : Cela peut paraître évident comme premier conseil, mais vous n’êtes pas en print, ne l’oubliez pas.
2 • Evitez les polices non Web Font : Votre intégrateur préfèrera vous faire modifier votre maquette que de convertir manuellement chaque police.
De plus Google ne lit pas aussi bien les polices transformées et elles peuvent parfois être mal affichées par les navigateurs
Astuce : Google propose gratuitement une large bibliothèque de Webfont
3 • Utilisez des logos et des icônes vectoriels : Avec les différentes résolutions d'écrans (Rétina, HDPI…) les utilisateurs ne voient pas les images de la même manière. En utilisant des icones et des logos réalisés avec Illustrator (et importés dans Photoshop) votre intégrateur pourra ajouter un maximum d’éléments vectoriels (.svg)
4 • N’aplatissez pas vos calques : Il n’y a rien de plus énervant ! Sachez que certains effets (ombres, lueurs…) sont réalisables en CSS3. Votre intégrateur pourra les re-produire pour alléger le poids de sa page HTML.
Astuce : Avoir 15 claques de réglages est souvent compliqué à manipuler dans Photoshop, convertissez l’ensemble en Objet Dynamique.
5 • Prévoyez les versions Hover : L'utilisateur s’attend à ce que le bouton change d'aspect au survol. Prévoyez cette alternative dans vos maquettes.
Dites moi : Le hover n’existe pas sur tablettes et mobiles. Juste un mode on/off ;)
6 • Ne maltraitez pas vos objets : N’étirez et ne coupez pas vos photos pour les déformer, préférez les Masques d’écrétage.
7 • Evitez les claques imbriqués (pour la livraison) : Vous utilisez sûrement des calques de Réglages couleurs ou des Masques d’écrétage. C’est un confort lors de la phase de création.
Pour la livraison réunissez tout dans un Objet dynamique.
8 • Privilégiez un PSD par page : Tous les webdesigners ne sont pas d’accord. En effet dans les anciennes versions de PhotoShop, il n'était pas possible d'utiliser des éléments liés. On réunissait la totalité du site sur un seul PSD et on jouait avec les Compositions de claques. Et que se passait-il quand notre PSD était corrompu ? Nous perdions tout notre travail ! Malin !
L'intégrateur maltraite vos maquettes, masque, affiche et supprime des calques. En privilégiant un PSD par page, vous lui éviterez de passer à côté de subtilités graphiques
Edit : Octobre 2016
Depuis la mise à jour de photoshop il est possible de travailler avec des plans de travail. Et donc d’avoir différentes interfaces sur un même PSD. Si cela vous aide à travailler faite le, mais au moment de la livraison pensez à bien séparer les éléments.
9 • Evitez les fantaisies de typographie : Si une typographie n’a pas d’existence en Gras ou en Italic, ne la forcez pas. N’étirez pas manuellement vos polices pour la déformer et ne tapez jamais votre texte en majuscules. Préférez lui l’option « Majuscules » dans la palette caractères
10 • Anticipez le comportement de vos maquettes : Prévoyez qu’une fois en ligne, chaque zone sera extensible en hauteur.
Si vous ajoutez des textures en arrière plan, faites en sorte qu’elles soient duplicables en largeur et en hauteur.
4/ Allez plus loin, soyez un pro du PSD Web !
• Utilisez les éléments liés : Même pour vous c’est un confort. Si vous réalisez 5 maquettes et que le header est commun à toutes les pages, faites un PSD à part que vous pourrez modifier à un seul endroit.
• Faites un assemblage : Les éléments liés ont un second avantage : ils se rassemblent automatiquement. Grâce à l’option Ficher > Assemblage, Photoshop rassemblera dans un dossier unique votre maquette et les PSD associés.
• Livrez les typographies : Ce n'est pas compliqué d'aller sur Google Fonts pour récupérer les polices, mais vous ferez plaisir à votre intégrateur en les associant à vos sources.
• Rangez-vos calques : C'est long et fastidieux, c'est pourquoi je vous conseille de le faire au fur et à mesure et d’abuser des groupes de calques, des objets dynamiques...
Pour ma part je les range du plus haut au plus bas dans la page et utilise Renamy pour les renommer en masse.
• Supprimez les calques inutilisés
• Renommez vos psd : Je les nomme toujours ainsi
“NOM DU CLIENT — 01 Accueil.psd”
• Livrez l’intégralité des sources : Vous ne connaissez pas exactement la méthode de votre intégrateur pour découper votre PSD. Livrez lui la totalité des sources. Cela lui évitera de vous demander telle ou telle photo en HD ensuite.
Edit : Octobre 2016
Depuis les dernières mises à jour de la Créative Cloud il est possible de travailler à partir d’une bibliothèque en ligne. Vous pouvez y déposer toutes vos polices, couleurs, éléments de design… N’hésitez pas à en user et abuser pour gagner du temps; et voir les éléments se mettre à jour automatiquement sur tous vos PSD liés.
Au moment de la livraison n’oubliez pas d’ajouter en collaborateur votre intégrateur.
• Utilisez un style de police par calques : Il est tentant de faire une grande zone de paragraphe avec différents styles de police à l'intérieur. Je vous accorde que c'est beaucoup plus facile à manipuler. Cependant, votre intégrateur se verra obligé de sélectionner chaque ligne pour en connaître la propriété CSS, très fastidieux.
• Ne jurez que par le pixel perfect : Même le meilleur intégrateur du monde ne pourra faire de demi-pixel. N’utilisez pas de police de 12,5 px ou des photos de 143,5 px de large. Ca n’existe pas !
• Renommez vos calques pour un “Export express” : C’est un véritable cadeau que vous ferez à votre intégrateur. Renommez les images de votre maquette avec l’extension associée : logo.png / icone-facebook.jpg…
Grâce à la fonction Ficher > Extraction des fichiers, votre intégrateur pourra exporter l’intégralité des images de votre charte en un seul clic.
Astuce : En savoir plus sur l’Extraction de fichiers
• Déposez vos PSD en ligne : Vos maquettes feront parfois plusieurs centaines de Mo. Autant vous dire qu’il faut oublier l’envoie par mail. Privilégiez le dépôt sur les cloud : Dropbox, Google Drive, Creative Cloud…
L’inconvénient majeur de WeTransfer, pourtant plebiscité par les webdesigner, est que les fichiers sont supprimés du serveur après 7 jours. Votre intégrateur n’aura pas toujours le temps de les récupérer.
• Anticipez le multilangue : Si le site est prévu en multi-langues, prévoyez que certaines langues prendront plus d’espace (l’allemand) où ont des mises en forme différentes (chinois).
