¿Cómo hacer crips y suavizar iconos de png descargado?

Probablemente sea una pregunta repetida, pero quiero que todos pnglos íconos se vean nítidos y suaves en la aplicación de Android. ¿Cómo puedo hacer esto en Photoshop?

Tengo 50*50 px pngimágenes que quiero que se vean bien en el móvil. Pero cuando reduzco pngla imagen usando el comando de transformación o usando el remuestreo de la imagen con la técnica bicúbica más nítida, la imagen aún reducida se ve borrosa en el móvil por alguna razón y está pixelada.

¿Cómo reducir la resolución pngpara que se vea bien en la aplicación móvil y en todos los tamaños? ¿Realmente necesito el formato vectorial o solo es bueno con png?

Hmm... ¿no es ese el punto, simplemente necesitas imágenes más grandes?
¿Qué tamaño deben tener en la solicitud? ¿Está utilizando la resolución dp correcta?
Proporcione más detalles y compruebe si hay errores tipográficos. ¿Es posible que tengas un png de 50x50 pulgadas? ¿Resolución de dpi para empezar? Si solo tiene 50x50 píxeles y todavía quiere reducir (?), va de mal en muy mal. ¿Qué tamaño quieres o necesitas? ¿Estás creando la aplicación tú mismo? ¿Qué prescribe la documentación para los iconos? ¿Y cómo se ven tus png iniciales? ¿Son incluso crujientes y suaves o estás pidiendo espejos? He obtenido buenos resultados al vectorizar incluso mapas de bits de baja resolución; pero esa no es tu pregunta...
@MartinZaske DPI no importa solo píxeles

Respuestas (4)

No, no necesita forma vectorial para que las imágenes se vean bien en otros dispositivos. Sin embargo, necesita una imagen original más grande o será mejorada o pequeña en un dispositivo que tiene una densidad de píxeles muy alta.

Vea que los navegadores en máquinas de alta densidad tienen un problema. Si muestran imágenes en una proporción de 1 píxel a 1 píxel, todas las imágenes de los sitios web heredados serían terriblemente pequeñas. Entonces, lo que hacen es anular el tamaño de su imagen e interpolar más píxeles. Ahora, la mayoría de estos navegadores mostrarán la imagen exactamente en el tamaño que especifique si anula la imagen para usar en css o con un atributo meta en el encabezado para que el navegador sepa qué hacer. Es posible que esto no ayude, ya que la imagen será muy pequeña en estos dispositivos en comparación con los dispositivos que no tienen una densidad de píxeles tan densa.

En realidad, lo más probable es que solo desee un ícono separado para estos dispositivos con más píxeles para esas pantallas. Y realmente la única forma de hacerlo es volver a dibujar el icono.

Pero su caso de uso es un poco opaco en la pregunta, es difícil de decir. nada definitivo.

NOTA : PPI/DPI es solo una pista falsa en la historia. Todo lo que importa es que tengas suficientes píxeles. Y explícale al navegador que eres un sitio moderno.

la borrosidad puede deberse a que las imágenes no son perfectas en píxeles, lo que significa que algunos de los límites de su ícono se encuentran entre un píxel, en lugar de llenarlo por completo. Esto también puede provenir de la escala, que puede hacer que los íconos con píxeles perfectos se vuelvan borrosos cuando el factor de escala no da como resultado un tamaño en el que los límites se encuentran en los bordes de los píxeles.

Este sitio de Adobe podría arrojar algo de luz sobre lo que estoy hablando: https://helpx.adobe.com/illustrator/how-to/pixel-perfect.html

Siempre que el diseño del ícono original se haya hecho con píxeles perfectos, no debería importar si usa un archivo vectorial o png (siempre y cuando no lo amplíe, sino que lo reduzca).

Es posible que desee probar la herramienta Calco de imagen en Illustrator y jugar con la configuración hasta que obtenga el detalle deseado para sus íconos, luego continúe y cambie el tamaño. Vector es la forma más confiable de asegurarse de que sus diseños aún se vean nítidos en cualquier escala.

Primero, crea una imagen de tamaño pequeño como 48 * 48 px con una resolución de 72ppi.

cuando cambie el tamaño de la imagen, no cambie su alto y ancho. Solo cambie la resolución. Si cambia su resolución de 72 ppp a 144 ppp, el tamaño de la imagen aumentará automáticamente y será 2x significa 96 * 96px y la calidad de la imagen será alta (sin pixelar) porque la calidad de la imagen depende de la resolución, no de la altura y el ancho.

err, todavía estará borroso. Deberías tener una imagen grande y luego hacerla más pequeña;)