Junior Designer - Luchando con los tamaños de los iconos de iOS

Me han asignado la tarea de exportar íconos de iOS para una aplicación que está desarrollando mi oficina. Nunca he hecho esto y estoy luchando con el flujo de trabajo y obteniendo íconos perfectos en píxeles.

Estoy trabajando en Illustrator y hago referencia a este artículo en el sitio web para desarrolladores de Apple, y mi principal fuente de frustración es que parece que no puedo lograr que mis mesas de trabajo e íconos estén perfectamente alineados.

Parece que no tengo ningún problema cuando trato con dimensiones de íconos en números pares , como 40x40 px, pero obtengo píxeles adicionales cuando exporto íconos con dimensiones impares y no puedo alinear mi arte con la mesa de trabajo correctamente sin dejar de ser "píxel perfecto". Por ejemplo, se supone que el ícono de la aplicación iPad Pro es 83.5px @ 2x. ¿Significa esto que necesito una mesa de trabajo de 83,5 px (2x) o puedo usar una mesa de trabajo de 167 px (1x)? De cualquier manera, termino con un icono de 168x168 píxeles, un píxel de más.

¿Me estoy perdiendo de algo? ¿Por qué Apple solicita íconos en dimensiones de números impares si esto me impide lograr íconos perfectos en píxeles? Obviamente es algo que estoy haciendo mal, pero no puedo resolverlo.

Pido disculpas si esta es una pregunta ridícula. Este es mi primer trabajo en el campo y reconozco que tengo mucho que aprender.

¡Se agradece mucho cualquier ayuda!

Utilice las dimensiones de píxeles dadas. El dispositivo cambiará de tamaño al tamaño/resolución de puntos efectivos. es decir, cree su ícono de iPad Pro a 167px x 167px y expórtelo a 1x. Luego se mostrará en la pantalla como 83.5pt x 83.5pt @2x.

Respuestas (2)

Las dimensiones de medio píxel @2x o @3x son para pantallas de alta densidad (Retina, Super Retina, etc.) que utilizan prácticamente todos los dispositivos Apple modernos. Esto significa que se necesitará el doble de píxeles para ocupar la misma cantidad de espacio en la pantalla.

ex. Piense en ello como dos tableros de ajedrez. Ambos son del mismo tamaño y ocupan la misma cantidad de espacio en la mesa, pero uno tiene el doble de cuadrados en el tablero.

En el caso del iPad Pro

  • @2x significa que la pantalla de este dispositivo tiene el doble de densidad de píxeles que la estándar (el doble de cuadrados en el tablero de ajedrez)
  • 83,5 px es el tamaño representado del icono que se muestra en el dispositivo (el tamaño del tablero de ajedrez en la mesa)
  • 167 px es el tamaño png exportado desde su software de diseño, que se reducirá al tamaño de 83,5 px en el dispositivo (la cantidad de cuadrados de ancho y alto en el tablero de ajedrez)

Yo tuve el mismo problema. Adobe Illustrator sigue generando un tamaño inadecuado de las imágenes de iconos. 21 en lugar de 20, 30 en lugar de 29, 168 en lugar de 167.

El script listo para usar resolvió el problema: https://github.com/MPieter/iOS-images-export-script-illustrator

El enlace es un script/complemento para Adobe Illustrator que genera todos los íconos con nombres y tamaños apropiados. También se agrega el archivo content.js automático para que todos los archivos se puedan agregar a image.assets directamente.