Hacer que el texto se comporte en Photoshop como lo hace en HTML/CSS

Estoy configurando una plantilla en PS 1280x700 px 300dpi (sé que la web es 72 pero me gusta más claridad cuando trabajo en PS).

Mi principal problema es la forma en que se representa el texto; Estoy usando Helvetica Neue Light 15px y sale bastante irregular. ¿Hay alguna manera de suavizarlo/usarlo como una fuente en lugar de seguir la cuadrícula de píxeles para que se vea como lo hará en la web?

Mi segunda pregunta es cuando se establece una navegación, ¿hay una mejor manera de separar los encabezados de texto? Por el momento, solo uso la barra espaciadora 5 o 6 veces para dividirlos (lo cual es realmente malo cuando quieres regresar y hacer cambios, ya que tienes que cambiarlos todos) o hago que cada encabezado sea una capa de texto y espaciarlos en una cuadrícula, nuevamente no es genial cuando quiero hacer cambios.

Su "segunda pregunta" realmente no tiene relación con la primera. Es una pregunta legítima, así que elimínela de aquí y conviértala en una pregunta aparte para que podamos responderla.
@lauren ispum, servirá
Cambiar el DPI de una imagen de dimensión de píxeles fijos no mejora ni reduce la 'claridad'. En cuanto al suavizado de fuentes, esa es una opción en la paleta de fuentes. Hay varias opciones.
@ da01, ¿hay algún método antialiasing que se prefiera para que se vea como se verá en la web o solo se debe hacer a simple vista?
@sem no hay una 'forma única' de que se vea en la web. Diferirá de un dispositivo a otro, de un navegador a otro, de un sistema operativo a otro, de una fuente a otra.

Respuestas (2)

hmm, bueno, en las opciones de Carácter, cuando el texto está resaltado, hay una opción de "Anti Aliasing", que puede cambiar de suave, a nítido, nítido, fuerte y ninguno.

Pero es un poco extraño que tengas ese problema.

Asegúrate de mirar el texto con un zoom del 100 %. He notado eso en mis diseños a veces, especialmente cuando uso OpenType PostScript (archivos otf).

Entonces, si hace zoom al 100%, primero vea si ese es el problema. Además, dado que está trabajando en un diseño más grande, puede reducir el zoom al 50% y tampoco obtendrá ese efecto dentado, pero cualquier cosa intermedia lo hará...

Si ninguno de los dos funciona, puede ser un problema con el archivo. Si ninguno de esos funciona, entonces no veo que funcione bien en CSS/HTML. ¿Notaste que se procesa correctamente en CSS/HTML? Si es así, entonces sí, es Zoom o Anti Aliasing.

¿Qué versión está usando? (Si no puede encontrar el suavizado), probablemente pueda explicarlo, pero es un poco diferente en diferentes versiones. Pero, en general, está en la parte superior, justo debajo del menú principal, con un par de opciones justo después del tamaño de fuente. Es un cuadro desplegable.

Buena suerte amigo.

EDITAR: en cuanto a su segunda pregunta, vaya al menú / panel de caracteres. Si no está visible en el lado derecho cerca de sus capas, debe habilitarlo seleccionando el flujo de trabajo "typogrpahy" en lugar de "Essentials", O ir al menú principal y seleccionar "Ventana> Carácter" entonces debería aparecer arriba. También puedes hacer el suavizado allí. Pero lo que quiere hacer con eso es resaltar su título y resaltar la primera línea del siguiente texto. Una vez que hagas eso, ve a la ventana del personaje y cambia el "Leading" (que es la primera opción en el lado derecho. Pasa el cursor sobre él y dirá "Change the Leading" para estar seguro. Eso es equivalente a la Línea de CSS altura

Prácticamente todo lo que haces en Photoshop, en ese menú de caracteres, puedes hacerlo en CSS.

Además, si yo fuera usted, usaría pt (puntos) para el texto. Parece que siempre tengo un problema de compensación con los píxeles, cuando transfiero un diseño al código. Los puntos nunca me defraudan.

Puedes cambiar tus reglas, y todo el documento para el resto del diseño a puntos si quieres, en el menú principal, en "Edición > Preferencias > Unidades y Reglas"

Buena suerte amigo.

gracias, está en cs5 extendido, para confirmar que funciona bien en html/css, solo cuando se trabaja en PS, parece confinar el texto a una cuadrícula de píxeles en lugar de dejar que sean líneas fluidas
No hay problema amigo. ¿Te refieres a una cuadrícula real? o simplemente la cuadrícula que se configuró al principio usando el DPI. Porque si solo se refiere a una cuadrícula establecida por las preferencias, puede desactivarla en el menú principal, "Ver> Ajustar a> Cuadrícula".
Me refiero a la cuadrícula establecida cuando hice el lienzo, por lo que la cuadrícula de 300x300 ppp

Puede intentar validar su archivo de Photoshop para problemas de tipografía específicos de la web a través de https://www.oss-usa.com/web-preflight?promo=psd-parser

Hacer que el texto se comporte en Photoshop como lo hace en HTML/CSS
RespuestasAquíPolítica de privacidad1y, 0v