Apilamiento

Cuando estamos diseñando, comenzamos a colocar imágenes, textos, iconos unos encima de otro hasta tener una composición agradable a la vista. En Adobe XD y muchos programas de Adobe como Photoshop, se trabaja de esta misma forma; usando los “layers” o capas. Cuando creamos un cuadrado rojo, luego un cuadrado azul y uno verde; Adobe XD apila cada imagen en el mismo orden en que son creadas. Si presionas “Command + y“, Adobe XD abre el panel de capas y te muestra exactamente el orden en que fueron creados los cuadrados.

Screen Shot 2018-04-03 at 1.12.52 PM

Adobe XD le dá un nombre por defecto a cada cuadrado. En este caso “Rectangle 1“, “Rectangle 2“, “Rectangle 3“. Esos nombres no están escrito en piedra; puedes hacer “double click” en cada nombre y cambiarlo a tu gusto. En este caso le asigné el nombre de Verde, Azul y Rojo respectivamente.

Screen Shot 2018-04-03 at 1.13.08 PM

El panel de Layers es inteligente y cualquier objeto solo o agrupado, que selecciones en el “art-board” o fuera del mismo, aparecerá seleccionado en el panel de capas. Si seleccionas los cuadrados de color y presionas “Command + g“, estarás agrupando los tres cuadrados en un grupo y en el panel de capas verás un nuevo icono de un pequeño “folder” que guarda los tres cuadrados.

Screen Shot 2018-04-03 at 1.13.26 PM

Si seleccionas dos veces el icono del “folder” verás que el mismo se desplaza o se abre para mostrarte su interior.

Screen Shot 2018-04-03 at 1.14.08 PM

Existen varias formas de acomodar  el apilamiento de objetos, tanto usando el panel de capas como los atajos del teclado. Con el ratón de tu computadora puedes seleccionar por ejemplo el nombre del cuadrado rojo y lo mueves hacia arriba y cuando veas una línea azul que se marca entre las capas Azul y Verde; sueltas el ratón y verás como el cuadrado rojo sube de nivel y se coloca sobre el cuadrado azul. Este movimiento que acabas de hacer con el ratón lo puedes hacer también utilizando el atajo “Command + ]” = (Bring Forward) . Para familiarizarte con los atajos en el teclado; juega un momento con estos atajos o visita la barra superior del menú principal; como por ejemplo si seleccionas el cuadrado verde; luego seleccionas: Object/Arrange/Send to Back. Como te mencioné antes en otros escritos; observa los atajos y apréndelos de memoria; los usarás mucho!

Un último vistazo que le debes de dar al panel de capas es que si pasas el cursor de tu ratón sobre cada capa notarás tres iconos; un icono de exportar; un icono de candado y un icono de ojito. Por ahora te voy a mencionar dos de ellos. El de ojito es para apagar o esconder el grupo u objeto seleccionado en el diseño. El candado es para que ese objeto se quede en esa posición y el de exportar te lo explico en el próximo escrito.

Screen Shot 2018-04-03 at 1.14.26 PM

Cuadrado azul encima de todas las capas.

Screen Shot 2018-04-03 at 1.13.47 PM

Grupo escondido y anclado al “art-board”.

Screen Shot 2018-04-03 at 1.13.39 PM

Grupo solamente anclado al “art-board”.

Espero te guste este tipo de lectura, recuerda que mientras aprendes tu; aprendo también!

“¡’Dición!”

 

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