¿Por qué mi logotipo pierde calidad cuando lo guardo para la web? [cerrado]

Estoy diseñando un sitio web para mi negocio y tengo algunos problemas. No soy muy bueno para este tipo de cosas, pero espero que alguien pueda explicarlo en términos básicos.

Obtuve el logotipo de la empresa de nuestro diseñador gráfico. Es un archivo .pdf y se ve totalmente bien en Photoshop. Estoy tratando de crear un banner para el sitio web y cuando lo hago en Photoshop, se ve muy bien, pero cuando lo subo al sitio está totalmente pixelado.

Cuando obtuve el archivo PDF, lo abrí en PS y, usando la varita mágica, eliminé el fondo y copié y pegué la imagen encima de una nueva imagen en blanco.

ingrese la descripción de la imagen aquí

¿Alguien puede explicar lo que estoy haciendo en términos sencillos?

¿Cuáles fueron sus configuraciones de exportación en Photoshop?
Sin saberlo, mi mejor suposición es que guardaste el logo con menor calidad.
¿A qué lo has subido? Los sitios como Facebook tienen la costumbre de volver a comprimir sus imágenes, lo cual es una molestia.

Respuestas (4)

Su logotipo se ve bien, bueno, tan bien como se puede representar en ese tamaño.

El problema es el logotipo en sí. Está usando algunas líneas muy finas que simplemente no se verán tan claras en ese tamaño en una pantalla. Idealmente, los diseñadores de elementos de marca habrían creado una versión específica para uso en pantalla de este tamaño. Supongo que no lo hicieron en ese caso, por lo que podría proponer una alternativa que aún se adhiriera a las pautas de la marca, pero que se adaptara a las realidades de las resoluciones de pantalla.

1) Si tiene contacto con el diseñador, idealmente debería solicitar un logotipo basado en vectores.

2) No utilice jpg para un logotipo o cualquier gráfico que tenga grandes áreas uniformes de color. Use png en este caso.

3) Esta imagen no está realmente pixelada. Tiene una fuerte compresión jpg. Ver punto 2.

4) Tiene algunas líneas finas que conviene ajustar. Eso debe hacerse en vectores. Ver punto 1.

5) No es necesario eliminar un fondo. Si el diseñador tiene el logotipo vectorial, puede generar uno transparente desde cero o proporcionar uno limpio con un fondo blanco. Ver punto 1.

6) Está borroso. Si la imagen de origen es más pequeña... sí, la estás pixelando. Si la imagen es más grande, use el remuestreo bicúbico más nítido.

Mirando su imagen, parece que su imagen se ha guardado con una alta compresión.

En Photoshop, guarde su imagen para la web usando cmd+++ .optionshiftS

ingrese la descripción de la imagen aquí

Dado que su imagen de muestra era un JPG, supongo que le gustaría usar un JPG para su sitio web. Deslice el control deslizante de calidad lo más bajo posible sin que se note la granulosidad. Pulse guardar y vea cómo se ve en su sitio.

Si aún tiene problemas, contactaría a su diseñador y le preguntaría si puede proporcionarle el archivo en formato de archivo EPS (Photoshop puede abrir este formato de archivo). Esto debería evitar que tengas que usar la varita mágica para eliminar el fondo.

Tenga en cuenta que incluso al seleccionar 100% de calidad, la imagen aún puede perder calidad, no por la pérdida de información, sino por el reordenamiento de la información durante la compresión (JPEG siempre se comprime). Solo recomendaría guardar las fotos como JPEG. Es una práctica común guardar logotipos y otros gráficos como PNG.

Hay muchos factores que hacen que la imagen se pixele:

  • Guardado con el formato incorrecto. En PS use "guardar para web y dispositivos" -> y seleccione png-24 (alta calidad)
  • resolución de imagen; asegúrese de que sea de 72 ppp (300 ppp para impresión)
  • las dimensiones de la imagen en el sitio web son más grandes que las dimensiones de la imagen original.

La mayoría de los diseñadores envían logotipos basados ​​en vectores (Ai) como .pdf; Los vectores permiten la capacidad de transformar las dimensiones de la imagen sin perder calidad, puede abrirla en Illustrator y aumentar las dimensiones si es necesario.

Ingenieroadicto. 72 ppp para web y 300 ppp para impresión es un mito total.
Pero estoy de acuerdo en que necesitas usar png en este caso.
@rafael, ¿por qué es un mito? Veo que es un estándar que todos los diseñadores siguen, y de hecho, en la práctica, si alguien imprime 72 ppp, no se ve bien, pero 300 ppp y más producirán materiales de buena calidad.
La declaración de 300 ppp es para la impresión se aplica a la impresión offset estándar cuando tiene 150 lpi. Pero si tienes un libro de arte, probablemente necesites 400 ppp, 200 ppp para una fotografía de retrato, 100 ppp para un póster grande, 1 ppp para una valla publicitaria realmente grande. - Y en la pantalla ppi no importa, así que no hay ppi allí. Aquí hay más explicaciones: photo.stackexchange.com/questions/66028/…
Estoy de acuerdo, en los materiales impresos, la resolución varía, pero diferentes resoluciones darán lugar a diferentes dimensiones en Photoshop, es por eso que merece atención.
Basta con acostumbrarse a usar el píxel como unidad en pantalla. El 72-300 da más problemas.
¿Por qué mi logotipo pierde calidad cuando lo guardo para la web? [cerrado]
RespuestasAquíPolítica de privacidad1y, 1v