Imagen borrosa cuando se exporta

Tengo una imagen SVG, que corté y pegué en PS. Cuando exporto la imagen para usarla en mi sitio web, se vuelve borrosa sin importar cómo exporte. Sé que hay publicaciones que se han ocupado de esto, y he probado de todo, desde cambiar la calidad de Bilinearhasta Bicubicy todas las variaciones intermedias. He probado PNG 8 - 128 Dithered, PNG 24, y así sucesivamente. Intenté exportar en lugar de guardar para la web (heredado), y nada parece mantener el ícono con el aspecto de la imagen que es cuando está en Illustrator. Incluso he intentado exportar desde Illustrator y obtengo el mismo resultado. Esto es de lo que estoy hablando:

Buena ducha

Exportado para Web - Hazy

Respuestas (4)

Pruebe esto, importe la imagen / svg a Photoshop lo más grande posible. es decir, 1000 px x 1000 px y luego, cuando lo exporte, asegúrese de que su DPI esté en no sé alrededor de 300 px y del tamaño de píxel que lo necesita.

Mirando su imagen, voy a aventurarme aquí y decir que es un problema de densidad de píxeles ya que está usando un formato de trama.

El siguiente método utiliza un archivo de Adobe Illustrator, colocado en Photoshop como un objeto inteligente.

  • Primero guarde su archivo SVG como un archivo AI, directamente desde Illustrator.
  • haga clic y arrastre el archivo AI a una página en blanco de Photoshop para crear un objeto inteligente.
  • Establezca su nivel de zoom al 100% en Photoshop.

Captura de pantalla Colocación de objetos inteligentes y zoom al 100 %

  • Presione CTRL+T (Transformar). Haga clic y arrastre los controladores de las esquinas del objeto para cambiar la escala al tamaño que desee, manteniendo presionada la tecla Mayús mientras arrastra para restringir las proporciones.
  • Una vez que haya sido redimensionado, use la herramienta de recorte.

Herramienta para recortar capturas de pantalla

  • Si lo desea, al recortar, puede establecer un tamaño en píxeles en las opciones de la herramienta Recortar antes de usar la herramienta para que tenga un tamaño específico.

Barra de opciones de la herramienta Recortar

  • Guarde su imagen usando Archivo > Exportar > Exportar como [o Guardar para web (heredado)]

Aquí están los resultados, no importa el tamaño que le des, los píxeles no se verán borrosos:

Resultado de la prueba de exportación Resultado de la prueba de Export2

Puede usar svg para web en estos días. Es más bonito, más pequeño, funciona en cualquier tamaño y es a prueba de retina. Por favor, olvídate de png 😉.

Desafortunadamente, la mayoría de los sitios de Wordpress no aceptarán svg para imágenes.
La carga de SVG no está permitida en WordPress por buenas razones: sus usuarios pueden usarla para insertar scripts. Es posible que esto no se aplique a usted. Asegúrese de obtener acceso FTP a este servidor, cargue sus imágenes SVG y haga referencia a ellas desde el código.
@Blaine es bastante fácil hacer que WordPress acepte archivos SVG (ver aquí por ejemplo)

¿Las dimensiones de la imagen en PS o AI son las dimensiones exactas que desea para la imagen final en la web? Cambiar eso podría ayudar.

Además, no es específico sobre cómo está usando esto en la web. Me encontré con el mismo problema con una imagen que intentaba insertar en una firma de correo electrónico HTML. Aparentemente, algunos programas de correo electrónico (MS Outlook, te estoy mirando aquí) ejecutan un comando de cambio de tamaño en las imágenes, incluso cuando tienen el tamaño correcto, y el resultado es una imagen borrosa como la que estás mostrando. Desafortunadamente, nunca pude resolver ese problema en particular: terminamos eliminando por completo las imágenes de nuestras firmas de correo electrónico.

He intentado usar exactamente el mismo tamaño de imagen. Estoy usando esto en un sitio web de Wordpress. Nada parece funcionar
Casi has llegado al límite de mi conocimiento de gráficos web, por lo que probablemente esto no hará una diferencia, pero lo arrojaré de todos modos. Dijiste que cortaste y pegaste la imagen en Photoshop. ¿Ha intentado usar el comando Trazar de Illustrator para crear una versión vectorial de la imagen y luego exportarla? Tal vez algo sobre pegar una imagen rasterizada en Photoshop podría estar estropeando las cosas. Y la imagen es lo suficientemente simple como para que Image Trace funcione bastante bien con ella.
Lo intentaré, sin embargo, he intentado exportar la imagen desde Illustrator y la imagen se vuelve borrosa. Es muy extraño, y no sé qué está causando que suceda. Es muy frustrante.
Imagen borrosa cuando se exporta
RespuestasAquíPolítica de privacidad1y, 0v