Digamos que estas organizando la barra inferior de una aplicación la cual se compone de cuatro iconos. Como ya sabes, los iconos los puedes diseñar tanto en Adobe XD como en Illustrator, Photoshop u/o comprarlos listos en el internet. Los vectores que copias (Command + c) en Illustrator, se convierten en imágenes SVG (Scalable Vector Graphics) cuando loas pegas (Command + v) en Adobe XD. En muchas ocasiones esos iconos están compuestos por grupos; por ejemplo: la mano es un arte vectorial y la moneda es otro arte vectorial. Si duplicas esa moneda dos veces más, obtienes cuatro iconos vectoriales separados, pero si seleccionas las monedas y la mano y las agrupas con “Command + g” obtienes un grupo. Así que si seleccionamos el primer grupo y usando el atajo del teclado “Shift + click” para seleccionar todos los grupos y volvemos a agruparlos estamos creando  grupos anejados o en ingles “nested groups“.

Una vez agrupados los iconos; en el panel de capas vas a notar que se crea un “folder” principal el cual agrupa los demás “folders“. Estos grupos anejados los puedes renombrar para fácil manejo. El siguiente paso sería alinear los iconos, pero no intentes alinearlos a ojo; usa el panel de alineamiento que se encuentra a mano derecha de la aplicación. Primero selecciona el último icono y llévalo hasta la derecha del “art board“.

El panel de alineamiento se encuentra en la parte superior derecha.

Una vez colocado en su sitio vas a utilizar el panel de “align” para centralizar y acomodar a distancias equitativas cada icono. Primero asegúrate de tener seleccionado cada icono utilizando el atajo del teclado “Shift + click” para seleccionar todos los iconos; luego presionas el botón de “Distribuir horizontalmente” y luego presionas el botón de  “Alinear el centro verticalmente“. Déjate llevar por los “Tool tips” para que puedas reconocer los botones.

Una vez todo centralizado verás a tu grupo anejado con una separación equitativa entre todos los iconos y todos bien alineados unos con otro. Estos mismos pasos los puedes hacer en tu práctica personal pero con los nombres de cada icono.

Utiliza palabras cortas; utiliza la misma fuente o familia de letra para todas las palabras; puedes cambiar el tamaño y estilo de letra en el panel de texto ubicado a la derecha de la aplicación, cuando seleccionas con la herramienta de texto cada palabra escrita. En mi caso utilice la fuente Helvetica Neue + 12 puntos + Bold + Centralizada + Texto lineal.

Palabras acomodadas bajo cada icono.

Palabras alineadas equitativamente.

El problema que veo ahora es que las palabras no están centralizadas con los iconos superiores. ¿Qué haces ahora? A ver, por ese cerebro a pensar!…

Muy bien! Utiliza el panel de capas; seleccionas todos los nombres; inserta los nombres dentro del grupo anejado de los iconos. Ahora todos forman parte de un mismo grupo!. Seleccionas una palabra con su icono correspondiente y utilizas el panel de alineamiento para alinear su centro verticalmente. Esto lo haces uno a uno con cada palabra y cada icono y el resultado visualmente se ve de show!

Hoy aprendiste a usar el panel de alineamiento y a agrupar objetos. Nos vemos mañana con otro post en donde te mostraré cómo usar el botón de exportar imágenes específicas!

¡’Dición!