Le guide du concepteur sur les pixels
Les icônes et la typographie parfaites se distinguent parmi les internautes. Évidemment, nous voulons tous viser un travail aussi raffiné, mais parfois même après avoir essayé, nous finissons toujours par avoir quelque chose de moins… moins. Pixel Hinting est l'une des compétences qui prend une fonction automatique et améliore ses résultats. En dépit de la très haute résolution des écrans d’affichage d’aujourd’hui, à l’instar des écrans de rétine d’Apple, nous avons encore besoin de «simuler» des courbes douces pour ne pas nous retrouver avec un désordre pixelisé.
De nombreux concepteurs et développeurs se tournent désormais davantage vers les approches SVG et vectorielles. avec le support ne fait que s'améliorer de jour en jour. Cependant, les solutions basées sur les vecteurs ont encore beaucoup de chemin à parcourir avant d’être suffisamment matures pour être utilisées dans la production. SVG est idéal pour afficher des formes vectorielles, mais pas trop pour redimensionner ces formes. Donc, comme pour tout le reste, il y a un temps et un lieu pour chaque solution.
Quels sont les vecteurs?
Les vecteurs sont essentiellement des résultats rendus de la représentation mathématique d'une forme. Lorsque vous voyez quelque chose sur votre écran, c’est parce que votre ordinateur a rendu ces objets et les a liés aux pixels de votre écran. Ce faisant, votre ordinateur a également pris des décisions sur ce qui devrait et ne devrait pas être affiché en pixels entiers. Par exemple, la lettre majuscule "D" a à la fois une ligne parfaitement droite et une courbe.
Comme vous pouvez le voir, sans anti-aliasing, la ligne courbe sur le "D" est assez pixellisée. Donc, pour compenser, lorsque les formes vectorielles sont rendues, elles sont généralement anti-aliasées pour donner une apparence plus robuste. Au lieu d'afficher uniquement les pixels qui se trouvent entièrement dans le contour vectoriel, les pixels sont progressivement masqués. Cela incite votre cerveau à voir une ligne plus lisse sur les formes courbes qui ne s’alignent pas parfaitement sur la grille de pixels.
Ci-dessus, vous pouvez voir comment le rendu "D" reçoit ce qu'on appelle des demi-pixels pour aider à éliminer la pixellisation irrégulière. Cependant, cette même fonctionnalité pose également un problème: les ordinateurs sont terribles pour déterminer ce qui est attrayant. Donc, même si l'ajout de ces demi-pixels rend les coins arrondis superbes, cela rend également la ligne interne du haut / bas plus floue. L'anti-aliasing automatique qui se produit lorsqu'une forme vectorielle est rendue finit par rendre la plupart des formes et de la typographie superbes, mais laisse les autres à une qualité encore plus mauvaise qu'au départ.
Bonjour, pixel
Maintenant que vous avez un bref aperçu des formes vectorielles et de leur fonctionnement, passons directement au travail. La notion de pixel implique de déplacer les points d'ancrage du vecteur pour qu'ils reposent sur des bordures de pixels d'une manière plus esthétique. Rendre ces lignes plus parfaites, tout en laissant les demi-pixels aux courbes. Le plus souvent, les conseils sur les pixels sont utilisés pour la typographie et les formes des images raster (logos, icônes, image de marque, etc.). Plus important encore, pour ajuster correctement votre vecteur, il doit avoir la taille et la forme que vous souhaitez. Une fois que vous avez marqué votre travail, le faire pivoter ou le redimensionner pourrait-et probablement annulera tout ce travail en le rediffusant automatiquement. Avant de commencer, assurez-vous que les paramètres suivants sont ajustés (j'utiliserai Photoshop pour cette tâche):
- Activez votre grille de pixels (Affichage> Afficher> Grille, assurez-vous également que l'option Extras est cochée au-dessus du menu Afficher)
- Assurez-vous que votre grille a un quadrillage tous les 10 pixels, avec 10 subdivisions. Ou quelque chose de similaire pour qu'il y ait une ligne entre chaque pixel.
- Désactiver la capture (Affichage> désélectionnez la capture). Nous ne voulons pas que les points d’ancrage s’inclinent par incréments de 1px, nous voulons déplacer les points en pixels.
Typographie de repère de pixel
Le processus de création de formes par rapport à la typographie est légèrement différent, alors je vous guiderai à travers les deux. Idéalement, avec la typographie, vous souhaitez utiliser votre type avant ou pendant votre processus d’indication. Quoi qu’il en soit, l’indication des pixels devrait être l’une des dernières choses que vous faites.
Tout d'abord, sélectionnez la typographie que vous souhaitez pixeliser et faites une copie du calque, puis transformez ce calque en une forme.
Vous pouvez voir que le texte tombe maladroitement sur la grille, aussi bien sur l'axe horizontal que sur l'axe vertical. Pour résoudre ce problème, nous allons déloger doucement les points d'ancrage de chaque lettre jusqu'à ce qu'ils s'alignent plus étroitement avec la grille de pixels présentée. Le but est d'obtenir que les lignes de forme ferment, sinon directement sur les lignes de la grille. Zoomez pour décaler plus précisément les points d'ancrage. Pendant ce temps, effectuez fréquemment un zoom arrière pour vous assurer que vos ajustements sont corrects.
Vous ne voulez pas vous conformer précisément à la grille, car cela élimine les avantages de l'anti-aliasing en premier lieu. Au lieu de cela, essayez simplement de garder les choses cohérentes uniquement pour autoriser des demi-pixels d'un côté de chaque axe. Par exemple, j'autorise toujours des demi-pixels à droite et en haut des lettres, tout en forçant les bords gauche et inférieur à affleurer la grille.
Comme vous pouvez le voir, le "get in" a été grossièrement ajusté, tandis que le "touch" reste tel quel. Tout comme le crénage, le conseil sur les pixels est beaucoup plus un métier qu'une science. Il faut être attentif pour voir si le travail a l'air meilleur ou pire après ajustement. Ne vous découragez pas si vous trouvez des indications typographiques de pixels approximatives, répétez et continuez à travailler avec. Si votre résultat est toujours sous-égal, vous pouvez toujours supprimer le calque et le copier à nouveau depuis l'original. Il faut un certain temps pour que la typographie en particulier soit parfaite, continuez et tôt ou tard, votre travail acharné sera payant.
Formes vectorielles faisant allusion aux pixels
Généralement, les formes de repère de pixel sont réservées aux icônes ou aux logos. Encore une fois, vous voulez vous assurer que votre forme est à la taille et à la rotation que vous souhaitez avant de commencer, car l'ajuster ultérieurement pourrait vous faire perdre tout votre travail. L'ajustement des formes est beaucoup plus facile et nécessite moins de précision pour les détails intrinsèques. Cela dit, des formes plus complexes prennent plus de temps et sont plus difficiles à ajuster, il est donc préférable de commencer par quelque chose de simple.
Ci-dessus, vous pouvez voir que notre flèche et notre cercle sont juste légèrement en retrait où nous les aimerions. Les demi-pixels créés par l'anti-crénelage font en sorte que toute la forme est floue. Alors, poussons tout pour tomber un peu mieux sur la grille.
Nous y allons! En ajustant les points d'ancrage pour les aligner avec la grille, nous nous retrouvons avec une icône beaucoup plus nette. Il est important de mentionner que, puisque cette icône est un cercle, tout ajustement de la largeur doit également être reflété à la hauteur. N'oubliez pas non plus de vous assurer que l' intérieur de la forme semble bien et cohérent. Si vous regardez l'image précédente, vous remarquerez que les côtés intérieurs du cercle ne sont pas anti-aliasés.
En conclusion
Avec le travail ci-dessus, le résultat est une image plus nette et plus professionnelle. Bien sûr, vous pouvez appliquer ces techniques à des choses beaucoup plus importantes qu’un bouton.
Bien que l'anti-aliasing automatique effectué par votre ordinateur semble acceptable, il pourrait être préférable. Ainsi, pour ce qui est de votre logo ou de vos icônes / typographies importantes sous forme raster, l’indication des pixels est plus qu’une simple compétence de niche; jusqu'au jour où nous utilisons tous des affichages à haute densité de pixels, c'est essentiel.