¿Cómo guardar pequeños archivos png (iconos) con una pixelación mínima?

Me encargaron crear un montón de iconos para un producto de software que desarrolla mi empresa. El problema es que sigo recibiendo comentarios de que los íconos están demasiado "pixelados" para que los usen...

Los iconos deben tener un tamaño de 24 x 24 px y guardarse como PNG. Creé los íconos en Photoshop, puse la resolución en 300 (para intentar hacerlo lo más nítido y nítido posible) y guardé cada archivo como PNG. Aquí hay un ejemplo de cómo resultaron:Ejemplo de icono

Tenía la impresión de que, a 24x24 px, no se iba a pixelar mucho menos que esto. ¿Me equivoco en esto? ¿Hay alguna forma de exportar estos diminutos archivos de imagen para que estén lo menos pixelados posible?

¿Cómo puedo guardar estos archivos y obtener el mejor resultado posible?

Puede establecer la resolución en 5 gabillones y una imagen de 24x24 px siempre será de 24x24 px con el mismo tamaño de archivo idéntico. Parece que se oponen al "anti-aliasing", que suaviza los bordes. Tenga en cuenta también que si una página web / aplicación está escalando la imagen ARRIBA (léase: retina), entonces todas las imperfecciones también se escalan. Este stackexchange está lleno de preguntas etiquetadas con SVG PNG ICON.

Respuestas (2)

Eso no es pixelado, eso está borroso. Tu icono está borroso.

El problema es que los hiciste a diferente resolución y los redujiste, y el programa hizo un remuestreo. Para simular la proporción adecuada del trazo se aplicó un poco de suavizado.

Tienes que hacerlos:

a) píxel perfecto a la resolución exacta.

b) hacerlos en vectores, como svg.

c) volver a muestrearlos desactivando el antialias.... No creo que esto funcione, pero puedes intentarlo.

d) Intente aplicar algo de nitidez... Podría funcionar, pero no serán tan limpios como las opciones a y b.

notas adicionales.

Los 300 dpi que en realidad no son dpi, sino ppi, no tienen nada que ver con un icono para web. Simplemente use píxeles simples como el tamaño de su documento.

Editado:

Un primer plano de su icono:

Un ícono de píxeles perfectos debería verse más o menos así:

Aquí está el icono a 24x24 px: comparado con

Gracias por la respuesta, pero en realidad SÍ los creé perfectos en píxeles con la resolución exacta. Además, los desarrolladores me han dicho que solo pueden usar archivos PNG, no SVG, TIF, etc.
No, no lo hiciste. Déjame hacer algunas imágenes de muestra y editaré la publicación.
@Rafael SVG no es una solución garantizada para tamaños tan pequeños, por cierto, aún debe asegurarse de que la salida sea perfecta en píxeles. Esto es factible, pero agrega otra capa de complejidad.
Los volví a muestrear usando anti-aliasing según su sugerencia, y ayudó MUCHO, gracias. Su consejo combinado con lo que publicó @cockypup parece haber solucionado el problema. ¡¡¡Muchas gracias por su ayuda!!!

Parece que su diseño no se está alineando correctamente con la cuadrícula de píxeles. Esto crea todo tipo de artefactos que son muy difíciles de controlar.

Sugeriría establecer las dimensiones de su lienzo en 24 px x 24 px y ampliar lo suficiente para que pueda ver la cuadrícula de píxeles. Luego, mueva y/o cambie el tamaño de sus íconos hasta que se alineen con los píxeles específicos. Esto minimizará el suavizado en las formas rectangulares. Sin embargo, no hay mucho que puedas hacer con los círculos pequeños. Habrá anti-aliasing, lo queramos o no.

He marcado con un círculo las cosas que sugieren desalineación. Si una forma rectangular está alineada con la cuadrícula de píxeles y su trazo y ancho son dimensiones de píxeles perfectas, los colores en ambos lados deben ser iguales. De hecho, el color debe ser sólido, no 3 tonos diferentes del mismo color.

Esto no significa que su diseño sea incorrecto. Puedes hacer las cosas del ancho que quieras y colocarlas donde quieras. Simplemente significa que para ser renderizado en un tamaño tan pequeño, PS necesita usar suavizado.

ingrese la descripción de la imagen aquí

Puede echar un vistazo a mi guía OCD para la perfección de píxeles en esta pregunta. Aunque la respuesta sugiere usar AI, no PS, algunos de los comentarios también se aplican.

Cosas para considerar:

  • Es posible que los trazos no estén alineados con la cuadrícula de píxeles. Pueden estar centrados en él y, por lo tanto, renderizados con suavizado. Intente alinear los trazos hacia el interior o el exterior de los rectángulos.
  • Es posible que el ancho de los trazos no sea un píxel completo.
  • Los rectángulos pueden tener esquinas redondeadas.
  • Los rectángulos pueden estar ligeramente inclinados. No es probable, pero los cambios de color en el lado izquierdo del rectángulo más pequeño sugieren que algo anda mal.

Una última cosa. Tu comentario sobre 300dpi me confunde. Si está creando una imagen que se verá a 24 px x 24 px en una pantalla, hablar de su resolución no tiene cabida. Hablo de ese tema en esta respuesta .

¡¡¡GRACIAS!!! Desearía poder darle más de un voto a favor: ambos enlaces están muy bien explicados.
De nada. Solo pague respondiendo la pregunta de otra persona en algún momento :)
Lo pagaré por adelantado. :) Solo quiero asegurarme de que entiendo: 1. Documento = RGB 2. "Alinear con cuadrícula de píxeles" está marcado 3. El centro del cuadrado en la ventana Transformar está seleccionado para que las formas no se coloquen en píxeles fraccionarios .(?) 4. Trate de no usar píxeles fraccionarios, excepto para formas redondeadas 5. Use la vista previa de píxeles 6. Guarde la imagen como 2 veces el tamaño, luego especifique el tamaño original en la página web (aunque no estoy seguro de si esto funcionará en el software) . ¿Es esto correcto? Gracias de nuevo, eres el mejor!
Correcto. El comentario 6 estaba destinado a las imágenes que se utilizarán en la web. Como mencionas, podría no ser aplicable en tu caso.
¿Cómo guardar pequeños archivos png (iconos) con una pixelación mínima?
RespuestasAquíPolítica de privacidad1y, 2v