CURSO DE ADOBE xD.

Para empezar esta clase vamos a replicar mi página web principal.

Como puedes ver, mi página web se compone unicamente de 3 elementos.

Una cabecera con un menú de navegación y su icono además de la imagen de fondo, un cuerpo principal en donde se establecen los cursos que hay disponibles (o que pronto lo estarán), y un pie de página con el icono de redes sociales.

Como de momento no voy a programar nada, vamos a ir añadiendo imagenes al contenido de nuestro Artboard. Para ello, vamos a crear primero un Artboar nuevo y seleccionaremos un nuevo archivo de página web con las medidas por defecto según tu pantalla.

Ahora ajusta el tamaño de la Mesa de trabajo para que puedas ver la pantalla de manera completa dentro del entorno de trabajo y, después girá el Artboard para colocarlo en posición vertical (menú Transformar, icono ).

Llama al proyecto mirpas_prototipo. Hasta ahora el proyecto queda configurado muy basicamente. En la zona práctica completaremos este prototipo y te podrás descargar los archivos para utilizarlos en tu Artboard, pero en esta clase vamos a organizar el espacio de trabajo.

Organización de elementos en el Artboard.

Dentro de la carpeta que te bajarás para realizar las prácticas existe un directorio llamado img, en el que estarán contenidos los archivos de imagenes que tengo en el curso. Estos archivos de imagenes los pegaremos dentro del Artboard. Para ello pincha sobre menú Archivo, Importar y selecciona el directorio en el cual hayas descargado los documentos desde mirpas.com.

Por ejemplo, yo voy a tener un directorio llamado ARTBOARS en el cual ire agregando nuevos directorios por cada proyecto. Y dentro de dichos proyectos, estarán los directorios organizados por imagenes, vídeos, u otros elementos, tanto igual que si fuese un servidor local o un árbol de directorio de Windows.

Dentro de mi directorio de proyecto, tengo el directorio img, que lo que voy a hacer es seleccionar todo e importarlo al proyecto.

Como puedes ver las imagenes tienen diferentes tamaño, pero eso ya no es problema para tí ya que sabes como ajustarlas. Además las imagenes las hemos introducido directamente en el Artboard y en la mesa de trabajo, que por así decirlo, es la carpeta principal del proyecto. Así que para organizar primero, vamos a crear un nuevo objeto Herramienta de forma Rectángulo que. En realidad necesitaremos 3 rectángulos para crear las zonas de cabecera, cuerpo y pie de página. Utiliza la herramienta Rectángulo y verás que puedes ajustar el contenido del rectángulo a la zona de la mesa de trabajo. Los tamaños de ajuste de cada rectángulo son:

● Cabecera: 1080px de ancho por 400px de alto.
● Cuerpo: 1080px de ancho por 1456px de alto.
● Pie de página: 1080px de ancho por 64px de alto.

Organización dentro de la mesa de trabajo.

Adobe Xd se organiza igual que organiza sus elementos y capas en Adobe Photoshop. La primera capa estará visible sobre las anteriores. De ahí que ahora solo veas tres rectángulos blancos. Sin embargo, si seleccionas las imagenes y las mueves por encima de los rectángulos cabecera, cuerpo y pie, verás que ahora si se muestran.

El problema de este tipo de organización radica en que solo existe una mesa de trabajo y cualquier elemento de la mesa de trabajo quedará expuesto para todo el artboard, pero para empezar estaremos bien.

Márgenes y guías.

Si bien Adobe Xd nos proporciona un sistema de guías y reglas para para definir nuestros objetos dentro de otro objeto de manera precisa, la forma más rápida es crear nuestras propias reglas, como si fuesen un objeto en cuestión.

Sistema de columnas de mirpas.

Observa que la estructura principal se podría asimilar a una tabla con filas y columnas, en donde nuestra tabla tendría 5 filas en las que habría una serie de columnas según el contenido. Por lo que podríamos crear nuevos rectángulos para cada fila e incluso columna, pero eso complicaría las cosas más tarde.

Como el ancho del cuerpo es de 1080px puedes dividir entre 4 secciones el ancho para sacar el punto medio de cada columna en el artboard. Para ello crea un nuevo Rectángulo de 1080 de ancho en el cuerpo del artboard. Después divide 1080⁄4 para obtener 270px.

El método más sencillo para ello es utilizar la Cuadrícula de repetición, creando un único elemento de 250px y asignándolo con un espaciado de 20px por defecto para que se reproduzcan los 4 elementos como se ve en el .gif.

Después solo queda asignar y ajustar el contenido al artboard.

Con ADOBE xD podemos establecer guías para el ponerlas en nuestro artboard y que nos ayude en el diseño de la presentación. Si te vas a los bordes del artboard el cursor del ratón cambiará a lo cual te permitirá añadir guías al artboard. Esas guías te permitirán definir bien los márgenes y posiciones de los elementos dentro del artboard. Así puedes sacar tantas guías como precises en tu proyecto para empezar a ordenar los elementos dentro de él.

Una vez creado algunas guías, desde el menú Ver del programa, tienes la opción de bloquear las guías u ocultarlas para que puedas editar tu proyecto sin problemas de interferencia. Estás son las opciones básicas que puedes hacer con tus guías:

Crear guías.

TIPO DE GUÍAS.

Para crear una guía vertical, pase el puntero sobre el borde izquierdo de la mesa de trabajo hasta que aparezca el icono . Haga clic y mantenga presionado el icono y arrástrelo a la posición deseada.	Para crear una guía horizontal, pase el puntero sobre el borde superior de la mesa de trabajo hasta que aparezca el icono . Arrastre y suelte en la posición deseada.

Mascaras de recorte.

Ya que sabemos manejar el proyecto de forma básica, tenemos nuestras guías establecidas y las imagenes puestas, vamos a crear nuestra primera máscara de imagen. Recuerda que tienes un elemento Rectángulo que ampliastes con la herramienta cuadrícula de repetición. En el primer Rectángulo vamos a insertar la imagen de Electrónica Avanzada. Para ello, mueve la imagen hasta el primer Rectángulo de la cuadrícula superior. Una vez que estén juntos, tienes que seleccionar ambos elementos con el botón MAYS del teclado (para seleccionar los dos elementos a la vez), y clic derecho y pulsar sobre Crear Máscara con forma.

Bueno espero que te haya gustado este mini curso de ADOBE XD. Vamos a dejarlo aquí y te emplazo a que sigas investigando por tu propia cuenta.

Saludos.