No importa en qué mercado o servicio se distribuya una aplicación, el icono de la misma es lo primero que notará un posible usuario. Las primeras impresiones son de suma importancia cuando se trata de atraer a nuevos usuarios, lo que significa que los iconos son componentes clave de cualquier aplicación. Y, sin importar la intención de la aplicación, crear un icono atractivo debería ser una parte importante de la fase de desarrollo de cada aplicación. Aunque muchos desarrolladores de aplicaciones técnicas dejan los gráficos en manos de diseñadores especializados, comprender los fundamentos del diseño y aplicarlos es algo que cualquiera puede hacer, si tiene un don para la experimentación y el análisis. ¡Los iconos de las aplicaciones no son una excepción!

Esta guía explica cómo crear un icono adaptable para una aplicación de Android de muestra mediante software de código abierto. Aunque el resultado final puede no tener el formato que necesita, muchos de los consejos de diseño que se comentan aquí son válidos para varias plataformas.

La anatomía del icono de una aplicación de Android

Después del lanzamiento de los “iconos adaptativos” con Android Oreo, un icono de aplicación puede constar de tres capas fundamentales: unacapa de fondo opaca,una capa de primer planoconsoporte de transparenciay unamáscaraque define la forma del icono. Todas estas capas tienen un tamaño de 108 x 108 dp, aunque solo la capa interior de 72 x 72 dp puede ser visible para el usuario; la otra región, recortada por la máscara de la parte superior, se utiliza para efectos especiales dentro de la interfaz de usuario para hacer que el icono parezca dinámico. Para los no iniciados,dpopíxel independiente de la pantallase considera una unidad de medida para toda la interfaz de Android y se define como igual al tamaño deun píxel en una pantalla de 160 puntos por pulgada.

Nick Butcher de Google habla de un círculo de 66 dpen el centro del icono que ninguna máscara puede recortar, llamado “zona segura”. Aquí es donde se ubicarán los elementos principales del diseño de nuestro icono más adelante, cuando lleguemos al diseño real. Todo lo que esté más allá de este radio de 33 dp puede no ser visible en el icono mientras tenga una máscara de forma activa.

Ensuciarse las manos

Dado que es mejor que los íconos sean imágenes vectoriales debido al escalado de la interfaz de usuario, vamos a necesitar un editor de gráficos vectoriales para crear nuestro ícono.Inkscapees de código abierto y una gran alternativa a un software más costoso, por lo que será nuestra elección para los fines de este tutorial. También he diseñado un archivo de proyectodisponible aquíque tiene la zona segura y la propia línea clave de diseño de Google marcadas, y una ingeniosa máscara de capa que nos permite obtener una vista previa de la forma del ícono.

Con el archivo del proyecto abierto en Inkscape y los panelesRelleno y Trazo(Mayús+Ctrl+F),Exportar imagen PNG(Mayús+Ctrl+E) yCapas(Mayús+Ctrl+L) abiertos, estamos listos para comenzar. El panel Capas es donde se encuentra la esencia del proyecto, con las capasde Primer planoyFondodestinadas a albergar sus componentes principales, y las LíneasguíayMáscaradestinadas a activarse y desactivarse (haciendo clic en el pequeño icono del ojo que se encuentra junto a ellas) como referencia.

Un icono es una expresión de la identidad de una aplicación. Como tal, debe incorporar tanto el carácter de la personalidad de la aplicación como las pautas de diseño específicas de la plataforma, como las queofrece el lenguaje de diseño Materialde Android . A modo de demostración, supongamos que estamos trabajando en una aplicación meteorológica que utiliza elementos Material. Podríamos utilizar el clásico motivo de sol y nubes para informar al usuario sobre el propósito de la aplicación y darle un toque diferente a este diseño básico utilizando sombras paralelas y geometría para que se integre bien en su entorno Android.

Fondo

Comencemos configurando el fondo, que consistirá en un cielo azul y un sol amarillo en el centro. Haciendo invisiblela Máscara, selecciono y hago visible lacapa Fondo, lleno todo el lienzo con la herramientaCrear rectángulos y cuadrados(F4) y establezco el color de relleno del rectángulo enRelleno y Trazoen 64B5F6FF (un azul claro) de acuerdo con lapaleta de colores de Material. Luego selecciono la herramientaCrear círculos, elipsis y arcos(F5) y, manteniendo presionadas las teclas Shift y Ctrl, dibujo un círculo desde el centro de la línea clave hasta el segundo círculo más grande y establezco su color en FFEE58FF, lo que nos da un pequeño sol cálido. Siempre es bueno ceñirse a la geometría básica en cualquier tipo de diseño, y el lenguaje de diseño de Android en particular fomenta la simplicidad. Para cumplir con las pautas de Material, también le doy al sol una sombra sutil a través deFiltros → Sombras y resplandores → Sombra paralela.

Primer plano

Al pasar alprimer plano,dibujo un grupo de nubes alrededor del sol dibujando círculos a partir de las circunferencias de otros círculos y les doy a todos un color de relleno de EEEEEEFF. Luego agrupo los círculos de manera apropiada haciendo clic derecho en varios objetos y seleccionandoAgrupar, y ejecuto el generador de sombras paralelas en las dos formas finales que obtengo al final. Al hacer invisibleslas líneas guíay alternar entreprimer planoyfondoalternativamente, se pueden ver las capas constituyentes del ícono de nuestra aplicación del clima. Si alguna vez se arrastra el ícono de la aplicación por una pantalla de inicio, ¡las nubes caerán en cascada contra un sol estacionario!

Resultado

Ahora es posible hacer visiblela máscara y ajustarla conEditar rutas por nodos(F2) para intentar simular diferentes máscaras de forma. Además, las dos capas se pueden exportar por separado mediante el panelExportar imagen PNGpara usarlasen Android Studioy juntas para crear unícono de Google Play.

Al crear un icono de producto, siempre es una buena práctica intentar tomar el propósito de una aplicación, destilarlo a su forma visual más abstracta y representarlo mediante una geometría simple. Cuanto más simple sea un componente en el diseño, mejor y más confiablemente funcionará, y esto también es cierto en el diseño gráfico. Para la mayoría de los propósitos, una forma de objeto en primer plano y un color sólido o un patrón en el fondo (o viceversa) funciona bien, pero como en nuestro caso de ejemplo, se puede usar otra capa de objetos si se considera necesario; demasiado apilamiento o uso de sombras paralelas solo complicará el diseño del icono.

Puede leer más sobre el diseño de íconos en las interfaces de Material en elsitio web oficial de Materialy obtener íconos de sistema gratuitos para usar en el diseño de íconos desdeel mismo sitio web.