El texto en mi imagen de Photoshop se ve "borroso"

9

Estoy creando un encabezado de sitio web en Photoshop CS5, sin embargo, cuando lo miro, el texto se ve muy borroso y no tengo idea de por qué.

Yo uso el preajuste web. ¿Qué recomiendas para obtener los mejores y más nítidos resultados?

Aquí está la maqueta actual:

Encabezamiento

adobe-photoshop website-design cs5 Jeff
fuente
¿Intentaste agrandar una imagen raster? Eso generalmente conduce a la borrosidad. En una nota al margen, para raster vs. vector, ver por ejemplo: graphicdesign.stackexchange.com/questions/260/…
Jari Keinänen
@koiyu - Las capas que más me preocupan son las capas de texto, y no las rasteré
Jeff
(oh, estaba mirando la curva alrededor de "xSky") Photoshop aplica un poco de suavizado al texto de forma predeterminada y la configuración podría no satisfacer sus necesidades actuales. Hay ejemplos en graphicdesign.stackexchange.com/questions/1177/… (aunque esto no responde directamente a su pregunta)
Jari Keinänen
Gracias por esta publicación, exactamente lo que necesitaba para ayudarme con mi texto borroso, increíble ayuda clara :)

Respuestas:

14

De forma predeterminada, Photoshop aplica un poco de suavizado a las capas de texto. Alex ha proporcionado una buena comparación en otra pregunta :

comparación

Las opciones de suavizado están disponibles en la barra de herramientas y en la Characterventana:

opciones de suavizado

NB: si planea utilizar las capas de texto como texto normal (HTML) en el producto final, los navegadores probablemente representarán el texto de manera diferente que Photoshop. Puede encontrar más información sobre esto en la misma pregunta "Font (anti) aliasing in Photoshop" mencionada.

Jari Keinänen
fuente
¿Entonces supongo que es el Anti Aliasing que lo está haciendo? ¿De qué otra forma puedo lograr texto en negrita? :)
Jeff
Puede usar una versión más audaz de la fuente (si está disponible), que se puede elegir del menú desplegable junto a la familia de fuentes. O bien, puede usar la negrita falsa de Photoshop, que se habilita presionando el botón T (al lado del botón T ). O bien, puede agregar un efecto de capa, por ejemplo, un trazo, para que el texto se vea más audaz.
Jari Keinänen
2
Además, podría agregar, esta es una razón por la que Imágenes de texto no es una buena idea. El cliente puede representar el texto real de la forma más deseable.
mattdm
4

Asegúrese de que los atributos heighty width(o CSS) de su imgetiqueta coincidan con el tamaño real de la imagen. De lo contrario, será redimensionado por el navegador web, y muchos navegadores web lo hacen de una manera fea. Incluso aquellos que lo hacen relativamente bien pueden hacer que la imagen sea algo borrosa.

Si desea asegurarse de que se ve bien, mantenga los píxeles 1: 1.

mattdm
fuente
La cosa es que, en Photoshop, se ve borroso. ¿Cómo hago los "píxeles 1: 1"?
Jeff
@Jeff "mantener píxeles 1: 1" es equivalente a mirar la imagen con un zoom del 100%.
Jari Keinänen
@koiyu - De acuerdo, ya tengo eso. :)
Jeff
1

No mostraría el texto como una imagen, ya que eso lleva a problemas de accesibilidad y motores de búsqueda.

Sin embargo, si desea mostrar un texto como una imagen, las imágenes png o gif dan mejores resultados que las imágenes jpg debido a la compresión jpeg. Incluso si no comprime su imagen, un navegador como Opera mobile o un 'acelerador' de Internet podría hacerlo.

jeroen
fuente
Siempre use PNG, se alejó de JPEG hace mucho tiempo: P
Jeff
1

Crearía el texto como un archivo PNG transparente para una mejor resolución. Otra alternativa es usar sIFR tanto para el estilo como para el SEO. sIFR básicamente está incorporando la fuente como Flash, pero es 100% amigable para los motores de búsqueda. Vea algunos ejemplos en, por ejemplo, 3d-photomontage.com .

Tony Tan
fuente
1

Debo señalar que decir que no hay absolutamente ninguna necesidad de usar texto de imagen en su diseño. Evite usar fuentes que no sean web para la copia del cuerpo. -Sé que se ven muy bien en el diseño, pero tienes más problemas en HTML de lo que vale -

Simplemente seleccione 'Ninguno' de las opciones de suavizado en PS si no desea desenfoque en su texto. La versión HTML siempre representará el texto de manera diferente según el sistema operativo o el navegador, por lo que no hay mucho que pueda hacer.

Eche un vistazo a esto también, debería ayudarlo más a resolver problemas de representación de texto en su HTML en lugar de PS

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

¡Siempre diseño con la opción 'nítida' con alias seleccionado y consciente del hecho de que el texto en HTML se verá diferente de todos modos!

Sahbas Has
fuente