(Anti) aliasing des polices dans Photoshop

J'utilise Photoshop pour concevoir des sites Web et chaque fois que je compare un design photoshop avec l'aperçu du navigateur en direct, les polices semblent être rendues différemment.

Fondamentalement, toute méthode d'anticrénelage que je choisis dans Photoshop, le texte donne toujours l'impression d' un texte en gras . Je suis donc toujours obligé de désactiver l'anticrénelage (pour le texte normal 12px / 14px).

Existe-t-il une méthode permettant d'obtenir le même type de rendu de police dans Photoshop que celui que Windows utilise avec cleartype?

Sinon, y a-t-il des polices qui semblent mieux que Arial lorsque l'anticrénelage est désactivé?

Il y a deux raisons pour lesquelles le texte ClearType est si net.

1. il utilise un rendu sous-pixel . Je ne pense pas que Photoshop supporte cela.
2. il utilise un indice agressif pour ajuster les lignes dans la grille de pixels

Vous pouvez taper votre texte dans le bloc-notes, le capturer avec un outil pratique et le coller dans Photoshop avec le mode de fusion Multiplier (car c'est du texte noir sur fond blanc). Mais ce n'est pas pratique. Modifier: il peut également être presque impossible de faire avec une couleur de premier plan autre que le noir.

Ce type a décrit une méthode pour effectuer un rendu manuel des sous-pixels, et à mes yeux, cela améliore la netteté de la police, ce qui la rend plus proche de ClearType. Mais il utilise toujours l'indication de Photoshop, il n'est donc pas aussi net que ClearType.

Avez-vous vraiment besoin d'un rendu de style ClearType dans Photoshop? Si vous exportez des graphiques contenant du texte à utiliser dans votre conception Web, ils ne doivent pas contenir de rendu de sous-pixels car ils ne conviennent pas à certains affichages (CRT, téléphone pivoté). Et si vous n'exportez pas de texte mais que vous le regardez, le rendu de Photoshop semble OK.

Photoshop n'est pas un programme de conception Web. Pour obtenir du texte qui a la même apparence dans un navigateur que dans un graphique (jpg, gif, etc.), vous devez utiliser la même police dans les deux programmes. Certaines polices ne sont pas utilisées par tous les navigateurs.

Selon la taille de votre texte, une bonne police de taille moyenne peut être Tahoma, Helvetica, Trebuchet ou Georgia. Consultez ce site Web pour quelques bonnes idées: http://www.snaphow.com/10-most-popular-web-fonts-used-in-web-safe-design/

Les polices plus grandes sont l'endroit où il commence à avoir de l'importance pour l'anti-aliasing.

Si vous essayez de fusionner du texte avec du texte sur une page, je vous suggère d'utiliser le positionnement CSS pour atteindre vos objectifs. CSS vous permet de placer le texte de votre page Web sur des images et utilise un positionnement relatif et absolu pour rendre la page exactement comme vous le souhaitez. Voici un exemple et un tutoriel: http://css-tricks.com/text-blocks-over-image/

Malheureusement, Photoshop ne prend en charge aucun type de rendu sous-pixel. Aucun autre logiciel Adobe non plus - à l'exception de Dreamweaver . (Eh bien, ce n'est pas exactement la technologie de Dreamweaver, car elle rend simplement le code HTML, puis passe le texte pour que le système d'exploitation soit rendu.)

Le flux de travail suggéré peut consister à créer et à découper votre conception dans Photoshop, puis à l'ouvrir dans Dreamweaver. Si la conception nécessite des corrections supplémentaires, vous pouvez ouvrir le fichier simultanément dans Photoshop, effectuez les modifications, enregistrez et actualisez la vue dans Dreamweaver. Ajoutez la copie finale et réelle dans Dreamweaver. Vous pouvez également remplacer Photoshop par Fireworks; ou même commencer le wireframing dans Fireworks → continuer dans Photoshop → publier via Dreamweaver. (Il apparaît clairement pourquoi les éditions Creative Suite sont généralement achetées en bundles, n'est-ce pas?)

Si le design semble différent dans l'aperçu de Dreamweaver que dans les navigateurs, c'est une autre question malheureuse (et je ne parle pas seulement de la typographie mais du rendu dans son ensemble). Le plus tôt vous pourrez passer de Photoshop à une démonstration en direct, que ce soit via Dreamweaver ou non, le mieux ce sera. Je ne souhaite Photoshop aurait des pouvoirs de rendu sous - pixel (mais en même temps l' espoir qu'il ne sera pas introduit dans CS6, ou tout au moins l' espoir je serai riche alors)!

Juste une remarque: ClearType est protégé par une dizaine de brevets, donc exactement le même rendu n'est pas probable. Il convient également de noter que OS X utilise un rendu différent (Quartz) par défaut, tout comme les interfaces graphiques dans les distributions Linux.

Conception en HTML et CSS. Si vous DEVEZ le récupérer dans une maquette PhotoShop, copiez-le à l'écran depuis le navigateur, puis réintroduisez-le dans votre document PhotoShop.

La définition du type dans PhotoShop est une douleur, en général.

Une solution de contournement possible pourrait être d'utiliser la méthode d'anti-crénelage "nette" et de définir une lueur intérieure de 0 profondeur sur le calque de texte:

Pour cet échantillon, j'ai utilisé une couleur blanche, une opacité de 85%, un mode de fusion "écran", 0 étranglement, 0 taille. Pas aussi bon que Ms clear-type, mais ça a l'air moins audacieux ...

(première ligne = pas d'anti-aliasing, dernière ligne = anti-aliasing net sans lueur intérieure)