Exportar tamaños de íconos de iOS en Affinity Designer

Aunque Affinity Designer tiene la exportación extremadamente útil @ 1x, @ 2x y @ 3x, me pregunto si hay una manera de exportar en la variedad de tamaños que se requieren para un ícono iOS.

Encontré una cuadrícula concisa de los tamaños necesarios aquí , que reproduciré en formato de lista:

• 1024x1024
• 180x180
• 152x152
• 120x120
• 87x87
• 80x80
• 76x76
• 58x58
• 57x57
• 40x40
• 29x29

¡Eso es 11 tamaños diferentes de íconos!

Encontré que todo el concepto Exportar Persona con configuración de corte es excelente, especialmente porque puede aplicar cortes a capas individuales (por ejemplo, para las versiones normales y presionadas de un botón). ¿Hay alguna forma de usar esta misma herramienta, tal vez, para hacer tamaños específicos de exportaciones?

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

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

• 29pt
• 49pt
• 60pt
• 76pt
• 1024px

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

Algunos de los tamaños que verá enumerados en la red y en el sitio de Apple son para iOS 6 y versiones inferiores (57 × 57, etc.). No son necesarios si está apuntando a iOS 7 y superior.

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

Tengo segmentos configurados para exportar cada ícono y una acción para cambiar el tamaño y reexportar, así que termino con:

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

Todavía no se necesitan todos esos tamaños, pero probablemente lo serán en el futuro. Comenzar con 4 tamaños base hace que la construcción de los 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 iconos que proporcione no deben tener áreas transparentes: el color debe extenderse hasta las esquinas. iOS enmascarará el ícono, para que no tenga que preocuparse por eso.

¿Podrías hacer lo mismo con 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 . Puede valer la pena considerarlo.

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 íconos necesarios actualmente para iPhone (29pt, 40pt, 60pt), cada uno con una resolución de 2x y 3x:

1. Cree un nuevo documento, configure 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 ambos lado a lado) y luego cámbiele el nombre a "40pt" (nuevamente, este paso es opcional)
6. Cambie el tamaño de la nueva capa a 40x40pt usando el panel Transformar: su obra de arte se ampliará automáticamente
7. Repita los pasos 4-6 para crear una mesa de trabajo de 60 puntos también (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 en la lista ("29pt", "40pt", etc.) y haga clic en "Exportar seleccionados" en la parte inferior del panel.

Affinity creará todos los tamaños de iconos en cada resolución seleccionada, por lo que puede obtener más iconos de los que realmente necesita. Pero se llaman claramente "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 segmento 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 está reducido en algunos píxeles. Parece un error en AD. Sin embargo, puede solucionarlo fácilmente arrastrando las esquinas de los sectores.

Marc Edwards tuvo una gran respuesta en términos de qué tamaños de iconos deben crearse, el uso de sectores para hacerlo y buenos enlaces a recursos de Photoshop para hacerlo. Sin embargo, todavía estoy buscando una solución sobre cómo exportar en múltiples tamaños en Affinity Designer específicamente.

Finalmente me di cuenta de que esto sería posible utilizando 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 atraigan su archivo de íconos. Cada una de esas capas se puede convertir en un segmento con nombre.

La desventaja aquí es que cada capa necesita ser creada y apuntada a su archivo de icono, por lo que parece que serí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.