Crea íconos con Icon Composer

Hola. Esto es Crear íconos con Icon Composer. Soy Lyam del equipo de diseño y hoy te mostraré cómo usar nuestra nueva herramienta, Icon Composer, para ayudarte a crear tus propios íconos de apps para que se vean y funcionen a la perfección en el iPhone, el iPad, la Mac y el Watch.

Primero, si aún no viste la sesión sobre la nueva apariencia de los íconos de las apps, en esta se cubren todas las actualizaciones del lenguaje de diseño de íconos en las plataformas de Apple y algunos modos adicionales muy interesantes en iOS y macOS que te ofrecen aún más personalización. Te recomiendo que empieces por ahí para luego descubrir en esta sesión cómo lograr todo esto por tu cuenta. Antes de empezar, quiero hablar un poco sobre cómo los íconos cambiaron a lo largo del tiempo. Durante años, los íconos de las apps para la Mac se creaban en diversos tamaños para que cada ilustración pudiera optimizarse para diferentes usos. Antes de las pantallas Retina, los elementos se ajustaban a la cuadrícula de pixeles para un mayor contraste y legibilidad.

Luego llegaron iOS, watchOS, las pantallas 2X con el doble de densidad de pixeles y las 3X, por lo que era necesario crear muchos íconos. Hace unos años, con los avances en resolución y ajuste de las pantallas, agregamos la opción de usar una imagen por plataforma y dejamos que el sistema se encargara del resto, lo que simplificó las cosas. Ahora, 2025.

Este año, con la expansión del modo oscuro y de tinte en iOS, la adopción de estas apariencias en macOS y el nuevo aspecto en el Watch, nos hallamos en un punto de inflexión similar. Creemos que, como estamos dando coherencia al lenguaje de los íconos, podemos aprovechar la ocasión y simplificar de nuevo el proceso.

Ahora todo esto se puede lograr en un archivo con Icon Composer.

Si tu ícono es muy complejo o muy gráfico, quizá prefieras cargar imágenes individuales en Xcode. Sin que debas hacer nada más, obtendrás el nuevo y hermoso tratamiento de los bordes en el dispositivo. El término técnico para esto es “reflejo especular”. Sin embargo, si tu ilustración es más compatible con el lenguaje de diseño, como esta versión más gráfica, llévala a Icon Composer y podrás darle vida con todas las nuevas posibilidades que ofrece Liquid Glass.

Icon Composer se combina con tus herramientas y te da el control total de nuestros materiales. También agiliza la creación de íconos en nuestras diferentes plataformas y apariencias. Es la herramienta que usamos este año para actualizar nuestros íconos y nos ahorró mucho tiempo. Desde hoy, puedes crear diseños para el iPhone, el iPad, la Mac y el Watch a partir de una ilustración y darle a tu app una identidad coherente. Aprovecha todas las propiedades exclusivas del vidrio dinámico, obtén una vista previa de cómo se verá y prueba las seis nuevas apariencias: Predeterminado, Oscuro, Transparente claro, Transparente oscuro, Tinte claro y Tinte oscuro.

Una vez que estés conforme con tu ilustración, podrás exportar las imágenes para usarlas donde quieras. Además, ya no tendrás que preocuparte por crear diferentes tamaños. Diseñamos los materiales para que se adapten a tu ícono.

Ahora veamos cómo se ve el nuevo flujo de trabajo con Icon Composer. Empieza en tu herramienta de diseño favorita, exporta las capas y tráelas a Icon Composer para comenzar a hacer ajustes para el vidrio, los modos y las plataformas. Y listo, puedes guardar el archivo y enviarlo a Xcode. Veamos cada paso en detalle. El proceso de diseño. Si trabajas con gráficos planos, es mejor usar una herramienta que diseñe vectores, ya que poder exportar archivos SVG te brindará mayor escalabilidad más adelante. Una vez abierto, deberás configurar el tamaño de lienzo correcto. Para esto, lo más fácil es usar una de nuestras plantillas de íconos de apps. Están disponibles para Figma, Sketch, Photoshop e Illustrator, y se encuentran en el sitio web de recursos de diseño de Apple. Para el iPhone, el iPad o la Mac, se usa el mismo lienzo de 1024px, lo que facilita las cosas, y hay una nueva cuadrícula y una forma de rectángulo redondeado. Con 1088px, los íconos del Watch sobrepasan el rectángulo redondeado y usan la misma cuadrícula, con diseños que se adaptan más fácilmente.

Ahora, puedes comenzar a diseñar tu ícono con capas. Si conoces el proceso de creación de íconos para tvOS o visionOS, sabes bien cómo funcionan las capas. Cada capa representa un nivel de profundidad en el eje Z, donde la inferior es el fondo y las demás se superponen.

En muchos casos, solo hay un primer plano y un fondo, como en la app Mensajes. En otros casos, la ilustración puede tener más capas, como en la app Casa.

Además, la división de diferentes colores por capas te brindará mayor control después en Icon Composer. Veamos la app Traducir. En las burbujas de diálogo se usan dos capas distintas, lo cual es un buen comienzo. Si también separo las letras de las burbujas, tendré aún más control, así, cuando vaya a crear la variante de modo oscuro en Icon Composer, todo lo que tendré que hacer será cambiar un relleno y listo.

Otra cosa a tener en cuenta al diseñar es qué decisiones creativas se pueden tomar en Icon Composer. Volvamos a Traducir. Creo que podría quedar bien aplicar un difuminado en la superposición y agregar una sombra sutil para darle volumen.

Pero como voy a hacer estas capas de Liquid Glass, estas son propiedades dinámicas que podrían agregarse directamente en Icon Composer, junto con reflejos, opacidad y translucidez.

Así, en lugar de intentar incorporarlos a mi archivo, lo mejor es reducir la ilustración a su esencia gráfica, para que sea plana, opaca y fácil de controlar después.

Cuando estés a gusto con la ilustración, deberás exportar las capas como SVG. Esto puede variar en cada herramienta. Para quienes usan Illustrator, creamos un script de capas a SVG que automatiza esta tarea y que puedes descargar. Exportar el tamaño del lienzo garantiza que todo encaje perfectamente en Icon Composer. Enuméralos en su orden de Z y automáticamente seguirán ese orden. Si no, podrás reordenarlos más tarde.

Los colores de fondo y degradados simples se agregan directamente en Icon Composer, no se deben exportar.

Si tienes que usar texto, tendrás que convertirlo a contornos antes de exportarlo ya que el SVG no conserva fuentes. Al usar degradados personalizados, imágenes rasterizadas, elementos o software que no puedan expresarse en SVG, estas capas se deben exportar en PNG, un formato que conserva fondos transparentes. Recuerda que nunca incluimos el rectángulo redondeado o la máscara circular en nuestras exportaciones. Para este ejemplo de Siri, no debemos exportarlo así, ya que esta máscara se aplica sola más tarde, garantizando un recorte perfecto. Eso está mejor.

Una vez que hayas exportado las capas, podrás abrir Icon Composer. Veamos un proyecto existente.

A la izquierda está la barra lateral con el lienzo, los grupos y las capas. En el centro está el panel de vista previa con las ilustraciones y los controles. A la derecha está el inspector, con las propiedades y las opciones del documento.

Cuando abras Icon Composer por primera vez, se verá algo así, solo con el lienzo a la vista.

Pero probablemente no querrás usar este tono de azul. Para establecer el color de fondo, debes dirigirte a la barra lateral y seleccionar el lienzo, y luego al inspector y elegir un color o degradado. Usaré uno de estos ajustes preestablecidos, son fondos claros y oscuros listos para usar que optimizamos para los nuevos materiales, y veré cómo se actualizan en el panel de vista previa.

Observa cómo cada una de estas secciones toma forma. Veamos de cerca cada área, comenzando por la barra lateral. Arrastra y suelta tus capas y se organizarán alfabéticamente aquí en un grupo.

Los grupos controlan cómo los elementos se superponen y reciben propiedades. Por defecto, siempre será una, pero pueden ser hasta cuatro. Este número determina los límites correctos para la complejidad visual que debe tener un ícono. Para la app Casa, usé las cuatro para que cada una tenga un efecto de vidrio único.

Abajo, tenemos nuestras plataformas y modos de apariencia, las mismas que quizás ya conozcas para diseñar: claro, oscuro y tinte.

Este año, cambiamos sus nombres a predeterminado, oscuro y monocromático, y la ilustración produce los modos transparente y tinte.

Esto se puede visualizar con un clic en la miniatura.

En el inspector están los controles de las propiedades y la configuración del documento. Es útil al elegir para qué plataformas diseñar.

Veamos nuevamente los controles de apariencia.

Cuando arrastras una capa a Icon Composer, automáticamente se aplicará Liquid Glass.

En la vista de capa, puedes elegir activar o desactivar este efecto. Además, verás otros controles útiles que reconocerás de las herramientas de diseño.

Los controles de color son útiles para crear variantes para el modo oscuro y monocromático, y los de composición, para reelaborar ilustraciones para diferentes plataformas.

En la vista de grupo, veremos que los controles lucen un poco diferentes. Aquí están todas las opciones de Liquid Glass. Algunas se configuran automáticamente, pero puedes ajustarlas para obtener el aspecto que deseas.

Al adaptar estas propiedades, ten en cuenta que algunas están preconfiguradas para aplicarse según la apariencia y otras para todas las apariencias, ya que los atributos mantienen una coherencia en todos los modos. Si buscas aún más control, pasa el cursor sobre una propiedad y haz clic en el símbolo más para crear una variante individual.

Estos son algunos consejos que debes tener en cuenta al usar estas propiedades.

Miera el día en el ícono de Calendario. Creo que se ve un poco recargado en las áreas estrechas. Para resolver esto, podemos desactivar el reflejo especular en el grupo o Liquid Glass en la capa.

Sombras. Las neutras son las predeterminadas. Son matizadas, versátiles y lucen geniales en cualquier fondo. Usar colores sobre blanco es una gran oportunidad para probar sombras cromáticas. El color de la ilustración se derrama sobre el fondo y crea una gran apariencia que enfatiza las luces y las propiedades del material.

Podemos mantener las sombras neutrales para tonos oscuros y monocromáticos con una variante.

Hablando de apariencia oscura, también hay cosas que tener en cuenta.

Como los rellenos. Los uso para optimizar las ilustraciones. Veamos Diccionario. Si no hiciera nada para oscurecer el ícono, se vería así, y es un gran ejemplo porque resalta dos cosas. Uno, el marcador marrón se pierde sobre el negro. Dos, ahora extraño un poco ese rojo coral tan característico.

Debemos cambiar el relleno. Esto se aplica a otras propiedades del color, como la opacidad y el modo de mezcla.

Supongamos que importé un PNG y no puedo usar un relleno. El mismo principio se puede lograr creando otra imagen en nuestro software de diseño e importándola como variante.

La legibilidad también es clave para las apariencias monocromáticas. Configura al menos un elemento de tu ícono para que sea blanco, como la parte más prominente, y asegúrate de que se destaque. Los demás colores se pueden asignar a tonos de gris. Icon Composer hará una conversión automática, pero debes ajustarlo para obtener el mejor contraste. Al diseñar para plataformas con formas de rectángulo redondeado y círculo, no tendrás que hacer nada, ya que el nuevo lienzo es más grande y está creado sobre la misma cuadrícula. Sin embargo, debes tener en cuenta la composición. Considera ajustes ópticos para la forma de círculo. Si tienes algún elemento que toca el borde del lienzo, auméntalo para que vuelva a tocar los bordes en el Watch. Si conoces el concepto de diseño con sangrado, puedes integrarlo en tu ilustración inicial. Dicho todo esto, veamos el panel de vista previa.

Los controles de la parte superior derecha te permiten cambiar el fondo y ver el ícono. Ideal para verlo en otro contexto. Y probar fondos o imágenes detrás de los modos para probar la legibilidad.

También puedes superponer la cuadrícula, ver cómo se mueve la luz y acercarlo y alejarlo.

Al terminar en Icon Composer, solo tienes que guardar el archivo .icon, arrastrarlo a Xcode y elegir tu ícono en el editor de proyectos. Cuando crees y ejecutes tu app, podrás ver cómo se ajusta a las plataformas y apariencias.

Para resumir, antes el proceso de diseño empezaba y terminaba con herramientas tradicionales. Con Icon Composer, tienes un punto de contacto adicional para dar vida a diseños de formas nuevas y dinámicas en todos nuestros productos y pasar menos tiempo generando recursos y en Photoshop intentando recrear efectos de vidrio. A todos nos pasó. El diseño de íconos está pasando de simples imágenes estáticas a ilustraciones expresivas y de varias capas que responden al usuario y se adaptan a las apariencias. Se volvieron una experiencia mucho más rica e integrada en el dispositivo.

Si deseas aprovecharlo, Icon Composer está disponible en versión beta y seguirá presentando nuevas funciones y mejorando gracias a tus comentarios. Te recomendamos descargarlo, usar el Feedback Assistant para solicitar mejoras y explorar los recursos que ofrecemos en esta nueva herramienta. Gracias por tu atención.