Maintenant que nous avons décomposé la maquette au niveau des éléments et des dimensions, il est temps de nous intéresser aux couleurs et aux polices de caractères ! Nous verrons également comment retrouver des filtres ou des effets spéciaux qui peuvent être recréés en CSS puis nous finirons par l’export d’un logo en SVG.
Palette de couleurs
La palette de couleurs est l’élément fondateur de tout design, qu’il soit destiné à l’impression ou au Web. Afin de mieux comprendre l’importance des couleurs, prenez le temps (prévoyez une bonne heure) de lire et d’assimiler cette série de trois articles publiés dans Smashing Magazine.
Color Theory For Designers, Part 2: Understanding Concepts And Terminology
Color Theory for Designer, Part 3: Creating Your Own Color Palettes
Afin de retrouver les couleurs utilisées dans votre document, tirez parti de l’outil Pipette. Sélectionnez la pipette et cliquez sur la couleur dont vous désirez connaître le code. Puis cliquez sur le carré de couleur principale situé tout en base de la barre latérale de gauche.
Une nouvelle fenêtre s’ouvre contenant tous les codes de couleurs.
Quelles sont ces lettres ? Je ne comprends pas à quoi elles font référence.
TSL est l’acronyme de Teinte (exprimée en degrés par rapport à une position donnée sur la roue Chromatique), Saturation (en pourcentage) et Luminosité (en pourcentage). Ces valeurs sont plutôt utilisées en imprimerie et vous n’en aurez pas besoin.
Lab fait référence au modèle CIE L*a*b, utilisé par Photoshop pour se rapprocher au plus près de la perception humaine des couleurs : Luminosité, position a sur l’axe de couleurs vert-rouge et position b sur l’axe de couleurs bleu-jaune. Il est surtout utilisé en imprimerie.
RVB signifie Rouge Vert Bleu. Vous verrez plus souvent l’acronyme RGB lors de vos recherches. Il s’agit de la même notion exprimée en anglais : Red Green Blue. Cette notation fait directement référence aux pixels de votre écran et à la synthèse additive de couleurs. En étant extrêmement synthétique, les valeurs RVB définissent l’intensité des couleurs Rouge, Vert et Bleu contenues dans un pixel entre 0 (noir absolu) et 255 (blanc absolu). Notez cette valeur car vous en aurez besoin.
CMJN est pour Cyan Magenta Jaune Noir. Il fait référence à la synthèse soustractive des couleurs, utilisée en imprimerie pour rendre les couleurs.
Triplet Hexadécimal (aussi appelé hex) : une suite de chiffres et de lettres qui suit un croisillon (hashtag). Nombre hexadécimal à 6 chiffres qui représente une couleur en RVB. Notez cette valeur, elle est très importante.
Notez les valeurs RVB et le triplet hexadécimal des couleurs qui sont importantes.
Comment faire pour réaliser un dégradé ?
Double-cliquez sur le calque, à l’endroit où se trouvent les couleurs du dégradé et dans le petit carré. Puis cliquez dans le dégradé. En cliquant sur les carrés de couleur vous obtiendrez les valeurs des couleurs.
Comment retrouver la couleur d’un texte ?
Double-cliquez sur le texte puis cliquez sur le rectangle de couleur dans la barre supérieure.
Polices de caractère
Les polices jouent également un rôle primordial dans le design d’un site web. Qu’elles apportent de la force, du caractère ou de la froideur, elles sont toujours à chouchouter !
Il en existe de multiples sortes mais ce qui nous intéresse le plus, pour le moment, est leur format. Le plus souvent, votre designer vous enverra une version print de la police, c’est-à-dire un format qui sera lisible sur votre ordinateur uniquement.
Or il existe un second format, adapté au Web, qui vous permettra de changer la police utilisée dans le navigateur de votre utilisateur.
Je ne peux pas tout simplement dire au navigateur : “Utilise telle police de l’ordinateur de mon internaute” ? On a tous les mêmes polices sur nos ordis, non ?
Quand vous utilisez une police sur votre ordinateur, vous l’installez au préalable. Vous ne vous en rendez pas forcément compte car de nombreuses polices sont installées par défaut (Arial, Comic Sans – beurk –, Times… ). Mais, si vous voulez utiliser d’autres polices (souvenez-vous de la période bénie des Word Art !), vous devez les installer.
Il en va de même sur votre navigateur. Ce dernier ne connait que les polices de caractère installées sur votre ordinateur. Par conséquent, si un site utilise une police qui n’est pas installée sur votre ordinateur, il cherchera la police de substitution la plus proche (ou pas…).
La ruse du développeur est d’installer les polices sur le serveur qu’il souhaite utiliser dans un format adapté pour le Web. De cette manière, le site web commence par charger les polices dont il a besoin à partir du serveur puis il peut les interpréter comme il le souhaite. Plus besoin de passer par les polices installées sur l’ordinateur ! Et, surtout, plus besoin de trouver une police de remplacement.
Souvenez-vous de ceci : une police est unique et non substituable. Votre graphiste l’a choisie pour une raison qui lui est propre et votre grande tâche est de lui redonner vie sur le Web.
Commencez par trouver le nom de la police utilisée. Pour faire cela, double cliquez sur le texte dont vous souhaitez connaître la police et regardez dans la barre supérieure (ou dans la boite de dialogue qui s’ouvre si cette police n’est pas installée sur votre ordinateur).
Notez cette police directement sur vos esquisses puis cherchez la version pour le Web directement sur votre moteur de recherche préféré. Je vous conseille d’indiquer le nom de la police et d’y ajouter ‘web’, tout simplement. Par exemple : “OpenSans web” nous renvoie à une police Google, utilisable gratuitement.
Notez le lien vers cette police.
S’il ne s’agit pas d’une Google Font, téléchargez les fichiers.
Parfois, vous ne trouverez pas d’équivalent web. Faut-il laisser tomber ? Que nenni ! Vous pouvez convertir la version print en version web grâce au générateur de FontSquirrel. Pensez à sauvegarder les fichiers dans le dossier de votre site web (vous pouvez créer un sous-dossier “fonts” pour que votre rangement reste clair).
Effets spéciaux
CSS3 vous donne accès à de nombreux filtres hérités de la photographie dont nous parlerons dans la seconde partie. Pour le moment, il est essentiel de les noter pour les retrouver ultérieurement.
Photoshop offre de multiples façons de modifier les visuels en ajoutant des effets. Néanmoins, les deux manières les plus communes sont en modifiant les propriétés d'un calque ou en ajoutant un calque d’effets.
Modification des propriétés d’un calque
Quand les propriétés d’un calque ont été modifiées, un petit sigle fx apparaît à droite de son titre dans la liste des calques.
Double-cliquer dessus vous montrera les propriétés qui ont été modifiées. Dans notre exemple, une ombre portée a été ajoutée. Nous pourrons recréer cet effet en CSS ultérieurement.
Calques de réglages
Un calque de réglage est un calque dont l’unique fonction est de modifier les réglages des éléments qu’il recouvre. Par exemple, si j’ajoute un calque de réglage “Luminosité / Contraste” dans ma section 2, tous les éléments se trouvant de la section 3 à la section 7 verront leur luminosité modifiée.
Vous pouvez aisément recréer cet effet en CSS. Pour retrouver les réglages qui ont été modifiés, double-cliquez sur l’icône du calque et notez les valeurs qui vous semblent anormales.
Dans notre cas, la luminosité a été augmentée de 88% et le contraste de 100%.
Éléments graphiques : SVG, PNG, rapidité de chargement
Nous avons mentionné tout à l’heure l’importance de travailler avec les éléments les plus légers et les plus adaptables possibles.
Le meilleur format pour gérer des formes avec des transparences, comme des logos, est le format SVG. Vous pouvez très facilement exporter des éléments au format SVG grâce à Photoshop.
Tout d'abord, isolez l'élément que vous souhaitez exporter en masquant toutes les couches qui ne sont pas nécessaires à l'export. Ensuite, cliquez que l'image > Sélectionnez "Pixels transparents". En cliquant sur "OK", le canvas est découpé pour inclure uniquement les éléments visibles. Cliquez ensuite sur Fichier > Exporter > Exporter en et sélectionnez SVG.
Cliquez sur Exporter et le tour est joué.
Répétez l'opération pour chaque élément que vous souhaitez exporter.
