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?
icon
export
ios
affinity-designer
Matt Mc
fuente
fuente
Parece una lista enorme y compleja, pero en realidad solo necesitas 5 tamaños para construir:
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:
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.
fuente
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':
fuente
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:
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 "[email protected]", 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.
fuente
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.
fuente