¿Cómo consigo que mis logotipos vectoriales se vean súper nítidos en la web?

13

Trabajo mucho con Illustrator, pero nunca he estado tan contento con el aspecto de mi trabajo en nuestro sitio web. He probado varias técnicas, guardar desde Illustrator, abrir en Photoshop y guardar, pero todavía me falta algo.

Ed. El logotipo solo se suministró como AI. Obtengo el mismo resultado ligeramente borroso si estoy guardando para web y dispositivos de Illustrator, o si tomo el vector en Photoshop. Tiendo a escalar en Illustrator al tamaño requerido, y luego guardar para la web (tipo inc optimizado, hay texto en el logotipo).

Possikiem
fuente
¿Estás intentando guardarlo en formato png / gif? ¿Le molesta el borde borroso de la imagen?
hello_world
1
¿Está su sitio construido en un CMS como Wordpress, porque Wordpress (y probablemente otros) comprime automáticamente la calidad de la imagen para reducir el tamaño del archivo.
deecemobile
¿Está dimensionando la imagen en el navegador, ya sea hacia arriba o hacia abajo? Si es así, no lo haga :) Dado que hay tres personas que tienen preguntas, ¿tal vez podría editar su pregunta para vincularla a su exportación o algo similar? Eso nos ayudaría a responder.
Brendan
Si una de las respuestas a continuación respondió su pregunta, acéptela.
DᴀʀᴛʜVᴀᴅᴇʀ

Respuestas:

11

Al rasterizar gráficos vectoriales, las líneas se ven nítidas si caen dentro de los límites de píxeles. Esto lo puede hacer el rasterizador (redondeo), pero la mayoría de los programas de gráficos vectoriales que conozco no lo admiten. Una estrategia para contrarrestar eso será usar una cuadrícula cuyas celdas abarquen y un número entero de píxeles (una celda 1x1 o 2x2 o 3x3, ... píxel).

Para los iconos, una cuadrícula de 16x16 es un buen comienzo, ya que permite producir iconos nítidos de 16x16, 32x32, 48x84, etc. a partir del mismo gráfico vectorial.

Para un logotipo, una cuadrícula de píxeles con 1 celda = 1 píxel en la representación más pequeña del logotipo es un buen comienzo.

Aquí hay un tutorial que explica esta técnica: icono de bombilla vectorial en Inkscape

Peter Walser
fuente
5

Hay muchas cosas que puedes hacer.

  1. Utilice el formato de imagen con compresión sin pérdidas, como PNG
  2. Asegúrese de que su ruta vectorial esté alineada a la cuadrícula de píxeles tanto como sea posible
  3. Mejora el contraste entre la imagen y el fondo (ya sea por color, brillo o ambos)
  4. Aplique un filtro de nitidez en su software de edición de imágenes.
  5. Use una combinación de efectos, borde más oscuro + brillo más claro (sobre un fondo claro) O borde más claro + brillo más oscuro (sobre un fondo oscuro), de esta manera:

ingrese la descripción de la imagen aquí

  1. Otra técnica es cambiar el tamaño de su logotipo vectorial al 200%, fusionarlo con su fondo, aplanarlo a mapa de bits y luego cambiar el tamaño del mapa de bits al 100%. A veces hace la diferencia.

Como software de gráficos web, recomiendo encarecidamente Adobe Fireworks, ya que es más adecuado para un diseño con píxeles perfectos, además de otras razones.

Alph.Dev
fuente
Gracias. Creo que alinearme con la cuadrícula de píxeles es donde me estoy equivocando. He escuchado cosas buenas sobre Fireworks, pero nunca lo he usado. Salud.
Possikiem
Prueba la Modify > Snap to pixelopción. También puede dejar que los fuegos artificiales alineen píxeles individuales para usted en la esquina superior izquierda o en el centro de un píxel. PathPanel interior , bajo Edit pointsetiqueta. Buena suerte.
Alph.Dev
5

No proporcionó mucha información sobre cuál es su proceso y esto no fue mencionado, pero pensé que le daría esta opción. Si está diseñando con frecuencia en Illustrator y está buscando una manera de mostrar sus gráficos, existe una alternativa que se puede hacer en Illustrator conocida como SVG.

ingrese la descripción de la imagen aquí

SVG se está volviendo frecuente con los fondos del sitio y con las capacidades de redimensionar sin pérdida de detalle. He visto más utilizándolo con íconos. He incluido algunos recursos en los que quizás pueda leer sobre el uso de SVG aquí:

DᴀʀᴛʜVᴀᴅᴇʀ
fuente
1

Puede cambiar el tamaño de su archivo vectorial en Illustrator. Guárdelo como PDF, con preajuste: compresión - imágenes de mapa de bits en color - muestra bicúbica a: cualquier tamaño que desee - compresión: 'JPEG' - calidad de imagen: 'máximo'. Guárdelo y coloque el archivo PDF en Photoshop en un archivo de 300 PPI previamente dimensionado (por ejemplo, 125 x 125 píxeles). Guardar como PNG. Esto lo puedes colocar en un sitio. Es muy agudo.

usuario49293
fuente