Expression Design: ¿Por qué mi imagen está borrosa?

Estoy tratando de crear un ícono web usando un diseño de expresión.

Tiene un tamaño de 45x45 píxeles, y configuré el PPI en 96, exportando a .PNG con Antialias y Transparencia.

No se ve nítido cuando lo miro en mi página y se ve bastante borroso cuando lo veo en mi móvil.

He activado la vista previa de píxeles, y cuando amplío puedo ver que en las líneas rectas hay una fila de píxeles sombreados entre los dos (en lugar de que los píxeles estén activados o desactivados), lo que parece ser la causa del problema.

He habilitado las siguientes opciones:

  • Ajustar a píxeles
  • Ajustar a puntos
  • Ajustar a guías

Aquí está el icono exportado:

ingrese la descripción de la imagen aquí

Es bastante simple, pero si miras los bordes del símbolo de la libra, están borrosos; más aún en un dispositivo móvil.

¿Hay algo más que deba hacer para obtener un icono de aspecto nítido?

Las esquinas redondeadas nunca harán una representación precisa de píxeles.
@Dominic Para la retina, debe duplicar las dimensiones de los píxeles, no los ppi. Por ejemplo, 500x400px @ 72ppi es el mismo tamaño que 500x400px @ 150ppi. Para la retina, necesitaría 1000x800px, ya que tiene una pantalla de subpíxeles. PPI siempre está controlado por la pantalla real. Piense en un HD de 42 pulgadas frente a un HD de 23 pulgadas: los mismos píxeles, diferente tamaño real o 'píxeles por pulgada'. Si se acercó mucho y contó los píxeles de visualización reales en la pantalla, obtendría el PPI real, que obviamente varía según el dispositivo.
@Dominic Lo estoy mostrando en el tamaño formateado... es decir, 45px x 45px. Además, puede verse bien arriba, pero quiero que se vea nítido, no solo bien :)
@John eso es interesante. ¿Está diciendo que para que se muestre nítido en una retina, debería duplicar su tamaño real y luego mostrarlo reduciéndolo a la mitad?
Por cierto, creo que de lo que habla este tipo en este video es básicamente mi problema... para que se vea nítido, necesito ajustar manualmente algunos de los métodos antialiasingandcraft.com/videos/pixel-hinting- vectores-en-photoshop
@DavidMasters Eso es correcto. Sin embargo, debe tener en cuenta que la densidad de píxeles es diferente según el dispositivo. Aquí hay una buena referencia con una lista de algunas densidades de dispositivos en relación con la activación de la consulta de medios de densidad. Para una visualización máxima, en teoría, debe multiplicar el tamaño de su imagen por el número de densidad.

Respuestas (2)

¿Su página la muestra exactamente a 45x45? De lo contrario, el navegador está recalculando los píxeles y esto hará que se vea borroso.

Yo nunca he usado Expression, pero generalmente cuando se reduce el tamaño de las imágenes, en todos los programas habrá borrosidad ya que el programa tiene que volver a calcular los píxeles. Si tienes que cambiar el tamaño de una imagen, un consejo es hacerlo siempre a la mitad, si no a la cuarta parte. Esto hace que el recálculo sea más fácil para el programa y brinda resultados más nítidos.

Además, el PPI no es importante para la pantalla, ya que siempre mostrará el número exacto de píxeles, según las dimensiones de la imagen, independientemente de la densidad de píxeles por pulgada (PPI) que haya configurado.

He aceptado esta respuesta, pero por su comentario sobre duplicar el tamaño. Lo probé usando ** pantalla @media only y (-webkit-min-device-pixel-ratio: 2), (resolución mínima: 192 ppp) ** y funciona muy bien.
Desafortunadamente, los dispositivos móviles a menudo ignoran la configuración y redimensionan las imágenes. Lo hacen por varias razones, por lo que es probable que su logotipo se estire o aplaste utilizando un algoritmo rápido en el dispositivo (en lugar de un algoritmo orientado a la calidad). Tenga en cuenta que los elementos con el prefijo -webkit no se admiten universalmente.

Una buena manera de garantizar que sus íconos se vean bien en todos los dispositivos y al menos ha funcionado bien para mí es usar fuentes SVG y de íconos. Puede usar icomoon para crear su propia fuente de íconos e importar sus propios íconos svg, y luego llamarlos en su css con @font-face, hay toneladas de tutoriales sobre cómo hacer esto en la web y es relativamente fácil. Aquí hay algunos lugares para buscar:

http://www.broken-links.com/2009/06/30/checking-for-installed-fonts-with-font-face-and-local/

Smashing también tiene un buen artículo sobre por qué nuestros íconos o imágenes pueden no verse nítidos en otros dispositivos debido a sus píxeles: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Expression Design: ¿Por qué mi imagen está borrosa?
RespuestasAquíPolítica de privacidad1y, 0v