Crea íconos con Icon Composer

Conoce Icon Composer, una nueva herramienta para crear íconos de apps que se integran perfectamente en iOS, iPadOS, macOS y watchOS.

Con los avances en la resolución de pantalla y la incorporación de modos de apariencia para íconos de apps en varias plataformas de Apple, el proceso de crear íconos se hizo más complejo y demandante. Icon Composer se integra con tu herramienta de diseño actual y simplifica enormemente el proceso de creación de íconos de apps. A partir de una sola ilustración, ahora puedes crear un único archivo de ícono que se adapta a múltiples plataformas de Apple ・€・ en iPhone, iPad, Mac y Watch ・€・ y a distintos modos de apariencia, como obscuro, teñido y claro/oscuro translúcido.

Si trabajas con gráficos planos, usa una herramienta vectorial que pueda exportar SVG para obtener la mejor apariencia en cualquier escala. Usa las plantillas de íconos de app, que ya están preparadas para exportar recursos con el formato correcto e incluyen la nueva cuadrícula para íconos. Diseña con capas para facilitar el ajuste rápido de colores y otras propiedades para los diferentes modos de apariencia de los íconos. Mantén la ilustración original plana, opaca y simple. Usa Icon Composer para agregar efectos dinámicos como desenfoque, sombras y reflejos especulares.

Si usas Illustrator, usa el script incluido en la plantilla del ícono de la app para generar activos automáticamente. Descarga el script del sitio web de Recursos de diseño de Apple. Asegúrate de que el tamaño del lienzo sea consistente al exportar las ilustraciones, para mantener su posición al colocarlas en Icon Composer, que usa nombres de archivo numerados para controlar el orden de composición en el eje Z. Agrega colores de fondo sólidos y degradados en Icon Composer. Convierte el texto en contornos antes de exportar. Exporta degradados personalizados, imágenes rasterizadas y elementos que no sean SVG como PNG con fondos transparentes. Ten en cuenta que las máscaras de rectángulo redondeado o círculo no se incluyen en las exportaciones, ya que se aplican automáticamente más adelante.

Para personalizar el fondo de los íconos de app, selecciona el lienzo en la barra lateral y elige un color o degradado en el inspector. La barra lateral organiza las capas en grupos, que controlan cómo se apilan los elementos y reciben propiedades de vidrio. Los grupos pueden tener entre una y cuatro capas. En la parte inferior del lienzo se encuentran las opciones para los modos de plataforma y apariencia. El inspector brinda controles para las propiedades de apariencia y la configuración del documento. Las capas reciben Liquid Glass automáticamente, pero puedes desactivar esta opción. Los controles de color y composición son útiles para crear variantes para diferentes modos de apariencia. Al diseñar para el modo oscuro, es posible que sea necesario ajustar los rellenos y otras propiedades relacionadas con el color para garantizar la legibilidad. Para apariencias monocromáticas, se recomienda configurar al menos un elemento en blanco y asignar los demás colores en tonos de gris. El panel de vista previa permite a las personas ver íconos en diferentes contextos, probar la legibilidad y superponer cuadrículas.

Para entregar, guarda el archivo .icon, arrástralo a Xcode y selecciónalo en el editor de proyectos. La herramienta agiliza el proceso de generación de activos, reduciendo el tiempo en herramientas de diseño para recrear efectos de vidrio y generar activos.