Creación de iconos multirresolución de alta calidad

Prefacio:

Necesitaba diseñar algunos íconos (quizás unos 30) para una aplicación que estoy desarrollando. Al principio, la idea de diseñar todos esos íconos para diferentes resoluciones fue realmente abrumador para mí (y aún lo es), especialmente considerando que necesito diseñar varios temas. Así que decidí crear íconos vectoriales para poder diseñar una vez y cambiar el tamaño varias veces, sin pérdida de calidad. Pero resulta que estaba completamente EQUIVOCADO . Cuando exporto el svg a png, especialmente para resoluciones bajas, la calidad es horrible y ni siquiera se acerca a la buena. Podría decir que falta el suavizado.

La pregunta:

¿Cómo debo diseñar temas de íconos con diferentes resoluciones?

  • ¿Debo diseñar cada resolución de forma independiente?
  • ¿Estoy haciendo algo mal al exportar el SVG a PNG?
  • ¿o que?

POR CIERTO: estoy usando InkScape para diseñar el svg

Muchas gracias

EDITAR

La resolución del archivo de salida no es estándar, ya que estoy creando una imagen de sprite. Pero se podría decir que los tamaños de los iconos son casi 32x32 48x48 72x72 96x96...

Y aquí están los iconos:Iconos como una imagen de sprite

EDITAR 2

Para ser honesto, estoy empezando a pensar que estoy haciendo la pregunta equivocada (en el lugar equivocado :-D). Cuando subí la imagen de arriba, comencé a pensar que no es tan malo. o incluso si es malo, no es tan malo como el producto final. Entonces comencé a jugar con el ícono en GIMP agregando diferentes fondos. NO ES TAN MALO.

Entonces debo agregar que necesito los íconos para una aplicación de Android. Tal vez Android o mi código o incluso un ImageView redimensionado sea el responsable de este lío.

¿Cuáles son sus resoluciones específicas?
Supongo que es irrelevante. Ver mi edición.
En un tamaño lo suficientemente pequeño se vuelve relevante. Diseñar un ícono de 16px² tiene consideraciones de diseño diferentes a las de uno de 128px²
Eso es totalmente correcto. Gracias por el comentario.

Respuestas (1)

¿Debo diseñar cada resolución de forma independiente?

Depende del icono.

El arte de línea plana y en negrita probablemente se puede diseñar como un SVG y simplemente escalar según sea necesario en la aplicación/sitio web. Así es como funcionan las fuentes de íconos... son solo íconos vectoriales y cambian de tamaño según sea necesario.

Por otro lado, si se trata de un icono fotorrealista con detalles finos, normalmente el proceso es el siguiente:

  • diseño grande
  • reducir la escala para cada tamaño
  • ajustar a mano cada tamaño específico a nivel de píxel

El ajuste manual puede consistir simplemente en ajustar algunos píxeles aquí y allá, o podría ser una edición importante en la que elimina más y más detalles a medida que las imágenes se hacen cada vez más pequeñas.

¿Estoy haciendo algo mal al exportar el SVG a PNG?

Posiblemente, aunque creo que Inkscape suaviza la exportación de forma predeterminada. En la ventana de exportación, asegúrese de que no haya una opción de suavizado que haya desactivado.

FWIW, para convertir de Inkscape a PNG, mi flujo de trabajo personal suele ser usar capturas de pantalla. Solo hago una captura de pantalla de Inkscape, la pego en mi software de edición de tramas (a menudo Pixelmator) y hago mis ajustes de píxeles allí y luego los guardo en PNG de esa manera.

Gracias por la respuesta. De hecho, supongo que cuando alejo el zoom en InkScape, no veo esa pérdida de calidad. Pero si uso una captura de pantalla, el fondo será opaco. ¿Sería posible quitar el fondo sin dejar residuos?
La posibilidad más obvia de mala calidad o falta de suavizado es que las dimensiones de píxeles sin procesar para los íconos más pequeños probablemente no tengan suficientes píxeles para jugar. Ajustar es la respuesta.
Resulta que hay algo de cambio de escala, en algún lugar de la aplicación. Así que el problema no está en los gráficos. Sin embargo, aceptaré la respuesta ya que aprendí varias cosas sobre el diseño de íconos. Gracias hermano
No habrá cambio de escala en la exportación desde Inkscape si deja los dpi de exportación en su valor predeterminado de 90. La mayoría establece esto en 72 y luego se pregunta qué está ocurriendo con las extrañas dimensiones de píxeles de sus exportaciones.
Creación de iconos multirresolución de alta calidad
RespuestasAquíPolítica de privacidad1y, 0v