Le texte de mon image Photoshop est «flou»

9

Je crée un en-tête de site Web dans Photoshop CS5, mais quand je le regarde, le texte est très flou et je ne sais pas pourquoi.

J'utilise le préréglage Web. Que recommandez-vous pour obtenir les meilleurs résultats et les plus nets?

Voici la maquette actuelle:

Entête

adobe-photoshop website-design cs5 Jeff
la source
avez-vous essayé d'agrandir une image raster? Cela conduit généralement à un flou. Sur une note latérale, pour raster vs vecteur, voir par exemple: graphicdesign.stackexchange.com/questions/260/…
Jari Keinänen
@koiyu - Les calques qui m'inquiètent le plus sont les calques de texte, et je ne les ai pas tramés
Jeff
(oh, je regardais la courbe autour de "xSky") Photoshop applique un anti-aliasing au texte par défaut et le paramètre peut ne pas correspondre à vos besoins actuels. Il y a des exemples dans graphicdesign.stackexchange.com/questions/1177/… (bien que cela ne réponde pas directement à votre question)
Jari Keinänen
Merci pour ce message, exactement ce dont j'avais besoin pour m'aider avec mon texte flou, une aide claire et impressionnante :)

Réponses:

14

Par défaut, Photoshop applique un anti-crénelage aux calques de texte. Alex a fourni une belle comparaison dans une autre question :

Comparaison

Les options d'anticrénelage sont disponibles sur la barre d'outils et dans la Characterfenêtre:

options d'anticrénelage

NB: si vous prévoyez d'utiliser les calques de texte en tant que texte standard (HTML) dans le produit final, les navigateurs afficheront très probablement le texte différemment de Photoshop. Plus d'informations à ce sujet, vous pouvez trouver sur la même question "Font (anti) aliasing dans Photoshop" mentionnée.

Jari Keinänen
la source
Donc je suppose que c'est l'anti-aliasing qui le fait? Sinon, comment puis-je obtenir du texte en gras? :)
Jeff
Vous pouvez utiliser une version plus audacieuse de la police (si disponible), qui peut être choisie dans le menu déroulant à côté de la famille de polices. OU vous pouvez utiliser le faux gras de Photoshop, qui est activé en appuyant sur le bouton T (à côté du bouton T ). OU vous pouvez ajouter un effet de calque, par exemple un trait, pour rendre le texte plus audacieux.
Jari Keinänen
2
De plus, je pourrais ajouter, c'est une des raisons pour lesquelles Images de texte n'est pas une bonne idée. Le texte réel peut être rendu de la manière la plus souhaitable par le client.
mattdm
4

Assurez-vous que les attributs heightet width(ou CSS) de votre imgbalise correspondent à la taille réelle de l'image. Sinon, il sera redimensionné par le navigateur Web, et de nombreux navigateurs Web le font de manière laide. Même ceux qui le font relativement bien peuvent rendre l'image quelque peu floue.

Si vous voulez vous assurer qu'il semble correct, conservez les pixels 1: 1.

mattdm
la source
Le fait est que, dans Photoshop lui-même, il semble flou. Comment faire les "pixels 1: 1"?
Jeff
@Jeff "conserver les pixels 1: 1" équivaut à regarder l'image avec un zoom de 100%.
Jari Keinänen
@koiyu - D'accord, je l'ai déjà. :)
Jeff
1

Je ne voudrais pas afficher le texte sous forme d'image car cela entraîne des problèmes d'accessibilité et de moteur de recherche.

Cependant, si vous souhaitez afficher un texte sous forme d'image, les images png ou gif donnent de meilleurs résultats que les images jpg en raison de la compression jpeg. Même si vous ne compressez pas votre image, un navigateur comme Opera mobile ou un «accélérateur» Internet pourrait le faire.

jeroen
la source
Toujours utiliser PNG, éloigné de JPEG il y a longtemps: P
Jeff
1

Je ferais le texte sous forme de fichier PNG transparent pour une meilleure résolution. Une autre alternative consiste à utiliser sIFR pour le style et le référencement. sIFR incorpore essentiellement la police au format Flash, mais il est 100% convivial pour les moteurs de recherche. Voir quelques exemples par exemple sur 3d-photomontage.com .

Tony Tan
la source
1

Je dois souligner que dire qu'il n'est absolument pas nécessaire d'utiliser du texte d'image dans votre conception. Évitez d'utiliser des polices non Web pour la copie du corps. -Je sais qu'ils ont fière allure sur la conception mais vous avez plus de problèmes en HTML que ce que ça vaut -

Sélectionnez simplement «Aucun» dans les options d'anticrénelage de PS si vous ne voulez pas de flou dans votre texte. La version HTML rendra toujours le texte différemment selon le système d'exploitation ou le navigateur, il n'y a donc pas grand-chose à faire.

Jetez également un œil à cela, cela devrait vous aider davantage à résoudre les problèmes de rendu de texte dans votre HTML plutôt que dans PS

http://www.w3.org/TR/SVG11/painting.html#TextRenderingProperty

Je crée toujours avec l'option anti-alias 'Crisp' sélectionnée et consciente du fait que le texte en HTML sera de toute façon différent!

Sahbas Has
la source