Crear íconos de productos no es tan difícil como podría parecer a primera vista. ¡Obtenga más información sobre cómo diseñar el primer ícono de su aplicación Android desde cero!
No importa en qué mercado o servicio se distribuya una aplicación, el ícono de la aplicación es lo primero que notará un posible usuario. Las primeras impresiones son de suma importancia cuando se intenta atraer nuevos usuarios, lo que significa que los íconos son componentes clave de cualquier aplicación. Y, independientemente de la intención de la aplicación, crear un hermoso ícono de aplicación 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 a diseñadores dedicados, comprender el Los fundamentos del diseño y aplicarlos es algo que cualquiera puede hacer, si tiene una habilidad para la experimentación y análisis. ¡Los íconos de aplicaciones no son una excepción!
Esta guía analiza la creación de un ícono adaptable para una aplicación de Android de muestra utilizando software de código abierto. Aunque es posible que el resultado final no esté en el formato que usted necesita, muchos de los consejos de diseño que se analizan aquí serán válidos en múltiples plataformas.
Después del lanzamiento de los “íconos adaptativos” con Android Oreo, el ícono de una aplicación puede constar de tres capas fundamentales: capa de fondo opaco, una capa de primer plano con apoyo a la transparencia, y un mascarilla que define la forma del icono. Todas estas capas tienen un tamaño de 108 x 108 dp, aunque sólo las interiores de 72 x 72 dp pueden ser visibles para el usuario; la otra región, cortada por la máscara en la parte superior, se usa para efectos especiales dentro de la interfaz de usuario para hacer que el ícono parezca dinámico. Para los no iniciados, dp o píxel independiente de la pantalla representa una unidad de medida para toda la interfaz de Android y se define como igual al tamaño de un píxel en una pantalla de 160 puntos por pulgada.)
Nick Butcher de Google habla sobre un círculo de 66 dp en el centro del ícono que ninguna máscara puede recortar, llamado “zona segura”. Aquí es donde se ubicarán los elementos principales del diseño de nuestro ícono más adelante, cuando lleguemos al diseño real. Es posible que todo lo que esté más allá de este radio de 33 dp no sea visible en el ícono mientras tenga una máscara de forma activada.
Dado que es mejor que los íconos sean imágenes vectoriales debido al escalado de la interfaz de usuario, necesitaremos un editor de gráficos vectoriales para crear nuestro ícono. paisaje de tinta es de código abierto y una excelente alternativa al software más costoso, por lo que será nuestra elección para los propósitos de este tutorial. También he diseñado un archivo de proyecto. disponible aquí que tiene marcada la zona segura y la línea clave de diseño de Google, 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 el Rellenar y trazar (Mayús+Ctrl+F), Exportar imagen PNG (Mayús+Ctrl+E), y Capas (Shift+Ctrl+L) se abren los paneles, estamos listos para comenzar. El panel Capas es donde reside la esencia del proyecto, con el Primer plano y Fondo capas destinadas a albergar sus componentes titulares, y Pautas y Mascarilla deben activarse y desactivarse (haciendo clic en el pequeño icono del ojo al lado de ellos) 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 pautas de diseño específicas de la plataforma, como las de Android. El lenguaje de diseño de materiales tiene para ofrecer. Para fines de demostración, supongamos que estamos trabajando en una aplicación meteorológica que utiliza elementos materiales. Podríamos utilizar el motivo clásico del sol y las nubes para informar al usuario del propósito de la aplicación y poner un poco de Gire este diseño básico usando sombras paralelas y geometría para que se combine bien en su entorno Android.
Fondo
Comencemos por configurar el fondo, que consistirá en un cielo azul y un sol amarillo en el centro. Torneado Mascarilla invisible, selecciono y hago visible el Capa de fondo, llena todo el lienzo con el Crea rectángulos y cuadrados. herramienta (F4) y establezca el color de relleno del rectángulo en Rellenar y trazar a 64B5F6FF (un azul claro) de acuerdo con el Paleta de colores de materiales. Luego selecciono el Crea círculos, elipsis y arcos. (F5), y manteniendo presionadas las teclas Mayús y Ctrl, dibuje un círculo desde el centro de la línea clave hasta el segundo círculo más grande y establezca 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 materiales, también le doy al sol una sombra sutil a través Filtros → Sombras y resplandores → Sombra paralela.
Primer plano
Llegando a Primer 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 EEEEEEFF. Luego agrupo los círculos apropiadamente haciendo clic derecho en varios objetos y seleccionando Grupoy ejecute el generador de sombra paralela en las dos formas finales que obtengo al final. Torneado Pautas invisible y alternante Primer plano y Fondo alternativamente, se pueden ver las capas que constituyen el ícono de nuestra aplicación meteorológica. Si alguna vez se arrastra el ícono de la aplicación por la pantalla de inicio, ¡las nubes caerán en cascada contra un sol estacionario!
Resultado
Mascarilla ahora se puede volver visible y modificar con Editar rutas por nodos (F2) para intentar simular máscaras de diferentes formas. Además, las dos capas se pueden exportar por separado utilizando el Exportar imagen PNG panel para uso en Android Estudio, y juntos por un Icono de Google Play.
Al crear el ícono de un producto, siempre es una buena práctica intentar tomar el propósito de una aplicación, resumirlo en su forma visual más abstracta y representarlo usando una geometría simple. Cuanto más simple sea un componente en el diseño, mejor y más confiable funcionará, y esto también se aplica al 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 siente necesario; demasiado apilamiento o uso de sombras paralelas solo complicará el diseño del ícono.
Puedes leer más sobre el diseño de íconos en Interfaces de materiales en el sitio oficial. Sitio web de materialesy obtenga íconos del sistema gratuitos para usar en el diseño de íconos desde el mismo sitio web.