Exportar tamaños de iconos de iOS en Affinity Designer

Dado que los requisitos cambian de vez en cuando, siempre es una buena idea consultar las pautas de Apple. Hay una plantilla Affinity Designer en mi sitio web que he desarrollado que exporta los 18 tamaños que se requieren actualmente para aplicaciones universales.

Parece una lista enorme y compleja, pero en realidad solo necesita construir 5 tamaños:

• 29 puntos
• 49 puntos
• 60 puntos
• 76 puntos
• 1024px

Los primeros cuatro tamaños (enumerados en puntos) necesitan versiones de 1×, 2× y 3× (si está preparado para el futuro, además de cubrir el iPhone 6 Plus).

Algunos de los tamaños que verá en la red y en el sitio de Apple son para iOS 6 e inferiores (57×57, etc.). No son necesarios si su objetivo es iOS 7 y superior.

Aquí está la plantilla de Photoshop que creé:

Tengo secciones configuradas para exportar cada ícono y una acción para cambiar el tamaño y volver a exportar, así que termino con:

• icono-29.png
• icono-29@2x.png
• icono-29@3x.png
• icono-40.png
• icono-40@2x.png
• icono-40@3x.png
• icono-60.png
• icono-60@2x.png
• icono-60@3x.png
• icono-76.png
• icono-76@2x.png
• icono-76@3x.png

Todavía no se necesitan todos esos tamaños, pero es probable que se necesiten en el futuro. Comenzar con 4 tamaños de base hace que la construcción de iconos sea mucho más fácil.

Estoy usando Slices en Photoshop para exportar las diferentes regiones necesarias para cada icono. Tenga en cuenta que los íconos que proporcione no deben tener áreas transparentes: el color debe extenderse hasta las esquinas. iOS enmascarará el icono, así que no tienes que preocuparte por eso.

¿Podría hacer lo mismo usando la función de división de Affinity?

Actualización: creé algunas plantillas de iconos de aplicaciones de código abierto para Affinity Designer, Sketch, Photoshop e Illustrator . Podrían valer la pena considerarlos.

Puede hacerlo en Affinity Designer, los segmentos pueden escalar su salida, usando sufijos, aquí está la exportación de iconos de iOS usando el sufijo 'w':

Acabo de encontrar una buena manera de hacer esto en Affinity Designer. Sin embargo, no está completamente automatizado. Explicaré cómo obtener los tres tamaños de iconos que se necesitan actualmente para iPhone (29pt, 40pt, 60pt), cada uno con una resolución de 2x y 3x:

1. Cree un nuevo documento, establezca la unidad en "Puntos", el tamaño de página en 29x29 y marque "Crear mesa de trabajo" en el cuadro de diálogo
2. Pegue y coloque su obra de arte en la mesa de trabajo
3. Cambie el nombre de la mesa de trabajo a "29pt" en el panel Capas (opcional)
4. Haga clic derecho en la mesa de trabajo y seleccione "Duplicar"
5. Arrastre la nueva mesa de trabajo (para que pueda ver ambas una al lado de la otra) y luego cámbiele el nombre a "40 puntos" (nuevamente, este paso es opcional)
6. Cambie el tamaño de la nueva capa a 40x40 puntos usando el panel Transformar: su obra de arte se ampliará automáticamente
7. Repita los pasos 4 a 6 para crear también una mesa de trabajo de 60 puntos (más 76 puntos y 83,5 puntos para iPad, si es necesario)
8. Vaya a Exportar Persona, cambie al panel Slices y seleccione las resoluciones 2x y 3x (más 1x para iPad)
9. Seleccione todas las capas de la mesa de trabajo de la lista ("29pt", "40pt", etc.) y haga clic en "Exportar seleccionado" en la parte inferior del panel.

Affinity creará todos los tamaños de íconos en cada resolución seleccionada, por lo que es posible que obtenga más íconos de los que realmente necesita. Pero están claramente llamados "29pt@2x.png", etc., por lo que es muy fácil asignarlos en su catálogo de activos de Xcode.

Una advertencia: cuando va a Exportar persona, Affinity crea automáticamente un sector de exportación para cada mesa de trabajo (ese es el marco azul con la etiqueta de tamaño). Descubrí que, a veces, el tamaño de estos cortes se desvía unos pocos píxeles. Parece un error en AD. Sin embargo, puede solucionarlo fácilmente arrastrando las esquinas de las rebanadas.

Marc Edwards tuvo una excelente respuesta en términos de los tamaños de íconos que se deben crear, el uso de cortes para hacerlo y buenos enlaces a recursos de Photoshop para hacerlo. Sin embargo, todavía estoy buscando una solución para exportar en varios tamaños específicamente en Affinity Designer .

Finalmente me di cuenta de que esto sería posible con la herramienta Colocar imagen. Haga su ícono en un archivo y luego en otro archivo de "plantilla", puede usar la herramienta Colocar imagen para crear múltiples capas que extraen su archivo de ícono. Cada una de esas capas se puede convertir en un segmento con nombre.

La desventaja aquí es que cada capa debe crearse y señalarse en su archivo de icono, por lo que parecería tedioso. Sin embargo, una vez que estuvo en su lugar, después de cualquier edición en su archivo base, podría volver a exportar todo fácilmente.