Mejores prácticas para exportar imágenes de ilustraciones vectoriales/eps

Estoy dando mis primeros pasos en las aguas del diseño vectorial, diseñando un logotipo simple (en 'Sketch' para mac, una alternativa de ilustrador).

Esto fue bien hasta que llegó el momento de exportar el material gráfico para un sitio web. Llevé un eps a Fireworks y luego creé un PNG para el sitio web.

Terminó pareciendo más 'irregular' de lo que esperaba, y fue entonces cuando comencé a preguntarme si estaba haciendo las cosas bien.

¿En qué tamaño/resolución importa un logotipo eps en Fireworks (o Photoshop)? ¿El mismo tamaño que desea que tenga el gráfico final, o lo importa como un tamaño más grande y lo reduce en Photoshop para que se vea mejor?

En realidad, creo que casi todas las aplicaciones de renderizado de vectores 2d hacen las cosas mal (oh, por qué, oh, por qué no puedo sincronizar con el filetring de ventana de lancoz en PS). Adobe especialmente es malo en esto, ya que filtran la señal como si el espacio de color fuera lineal. Así que en realidad hago mi propio antialiasing cuando necesito material de calidad superior. Así que estoy de acuerdo en que esto es realmente un problema. Pero en un nivel completamente diferente. Si lo trae más grande, tiene más valores para filtrar cuando pone en juego la no linealidad.

Respuestas (4)

Como desarrollador web, diría que debe exportar las imágenes al tamaño que espera que se representen.

Esto es por dos razones:

a) Tamaño de archivo: un archivo de 2 MB reducido en términos de resolución, aún debe descargarse a 2 MB

b) Representación: el navegador representará una imagen de 1000x250px que se muestra en una etiqueta de 250x50px en tiempo de ejecución. Esto es lento y probablemente de peor calidad que la que lograría en una aplicación de gráficos específica.

Sugiero configurar un archivo de Photoshop con la resolución final (dependiendo de para qué lo quiera usar) y luego importar el logotipo a Photoshop como formas vectoriales (desde Illustator esto funciona con copiar/pegar, no estoy seguro acerca de "Sketch"). De esa manera, se mantienen sin pérdidas, incluso si cambia la resolución más tarde.

Le sugiero que exporte un archivo * .eps desde Sketch y simplemente ábralo en Photoshop sin cambiar el tamaño. Después de eso, elija una opción llamada 'Guardar para Web' (Shift+Cmd+Alt+s o desde el menú principal 'Archivo->Guardar para Web ') y cambie el tamaño de su imagen para obtener las dimensiones que necesita. Escuche el dougajmcdonald y prepare el tamaño que espera que se represente en un navegador. Seleccione la opción 'Bicubic Sharper' si desea reducir el tamaño. Te ayuda a mantener los detalles. De lo contrario, podrían estar demasiado difuminados.

Si está utilizando Sketch para crear la ilustración, probablemente debería usar Sketch para generar las imágenes de mapa de bits finales. Sketch puede producir en algunos formatos de mapa de bits diferentes, incluido PNG.

Esa es probablemente la forma más fácil y rápida de hacerlo.

Esto es lo que hice inicialmente, pero el resultado no parecía ser de muy buena calidad/resolución. ¿Debería hacer que el 'tablero de arte' o la 'diapositiva' tengan el mismo tamaño que quiero para el gráfico definitivo, o debería hacerlo más grande para obtener una mayor claridad?