Agrupar/Alinear

Screen Shot 2018-04-04 at 3.30.56 PM

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“.

Screen Shot 2018-04-04 at 3.48.28 PM

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“.

Screen Shot 2018-04-04 at 3.56.00 PM

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.

Screen Shot 2018-04-04 at 4.11.03 PM

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.

Screen Shot 2018-04-04 at 4.17.15 PM

Palabras acomodadas bajo cada icono.

Screen Shot 2018-04-04 at 4.17.50 PM

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!…

Screen Shot 2018-04-04 at 4.21.24 PMScreen Shot 2018-04-04 at 4.22.21 PM

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!

Screen Shot 2018-04-04 at 4.26.46 PM

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!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s