El logotipo de mi web se ve pixelado después de cambiar el tamaño

Debería exportar directamente a las dimensiones de píxeles que necesita del archivo original de Illustrator.

Probablemente le irá bien alterar el tamaño en el cuadro de diálogo Guardar para web en lugar de crear una versión vectorial escalada para cada instancia.

Debe rasterizarlo en las dimensiones de píxeles correctas directamente desde Illustrator siempre que sea posible, pero cuando cambia el tamaño de las cosas en Photoshop, hay una selección de modos de remuestreo:

• Vecino más cercano : esta es la forma más simple de remuestreo, si es que puede llamarlo así, donde los píxeles originales simplemente se expanden al siguiente píxel completo para llenar la nueva cuadrícula de píxeles. Si no está cambiando la escala por un factor par, producirá muchas distorsiones. E incluso cuando cambia la escala por un factor par, tiende a crear una gran cantidad de alias, ya que solo está explotando los píxeles. Por lo general, esto solo se usa cuando tiene un diseño en el que todos los límites de color están alineados con los límites de píxeles y no tiene problemas con el alias (por ejemplo, pixel art).
• Bilineal : este es el segundo método más rápido para interpolar datos de imagen y, en cierto modo, promedia la cuadrícula de 2x2 px en la imagen original más cercana al punto que se interpola (en realidad, está encontrando la tasa de cambio en las direcciones x e y y luego extrapolando el color intermedio a la distancia precisa entre x ₁ , x ₂ y entre y ₁ , y ₂ donde se encuentra el nuevo punto). Las limitaciones de este método son cuando cambia la escala más allá de un factor de 2 en cualquier dirección (es decir, aumenta más del 200 % o se reduce a menos del 50 %).

• Bicubic : en realidad, hay 3 versiones de este método de interpolación en Photoshop: la versión estándar y una versión más nítida y más suave. Los 3 son similares al remuestreo bilineal, pero usan una cuadrícula de 4x4 px y, en lugar de usar solo la derivada de una función lineal para calcular el valor del color en el nuevo punto, usa una spline cúbica para obtener una función continua suave. El efecto de esto es que las transiciones de color son más suaves y menos entrecortadas. Esto no siempre es bueno (por ejemplo, cuando desea conservar límites de color estrictos), pero en general es la imagen interpolada más "precisa".

  Bicubic Smoother se recomienda para ampliaciones (ya que promedia el "halo de borde" en los límites nítidos que es un artefacto de la técnica de spline cúbico).

  Bicubic Sharper se recomienda para las reducciones, ya que la reducción de imágenes grandes a un tamaño pequeño tiende a desenfocar las imágenes y requiere nitidez (como lo atestiguan muchos diseñadores de iconos).

Entonces, si Illustrator no produce el resultado deseado, intentaría:

1. Primero, ajustando la alineación del logotipo vectorial en la cuadrícula de píxeles para evitar AA innecesarias.
2. Luego intente retocar manualmente los bordes AAed si solo se necesitan ajustes menores.
3. Luego intente rasterizar a un factor par mayor que la salida deseada (por ejemplo, 200% o 300% del tamaño) y luego use Bilinear o Bicubic Sharper para reducir la escala de la imagen en Photoshop.

Convierta la capa de su logotipo en un objeto inteligente (haga clic con el botón derecho en la capa, encontrará Convertir en objeto inteligente ) y luego cambie el tamaño.

Nota: No cambie el tamaño una y otra vez, perderá la calidad original, mostrará píxeles.

Me ocupo de esto todo el tiempo. Mi empresa tiene una "O" en su logotipo y "llantas pinchadas" cuando se cambia el tamaño. Esto parece estar solucionado en Photoshop CC (quizás CS6 también), particularmente con la nueva función de referencia de imágenes.

Sin embargo, en versiones anteriores de Photoshop, para evitarlo, simplemente importe el vector en el tamaño final en el que desea que se muestre. En el diálogo de importación en PS, simplemente configure las dimensiones allí.

No necesita crear varias versiones, pero es posible que deba eliminar y volver a importar mientras adivina el tamaño que funciona dentro de su diseño.