CURSO DE ADOBE xD.

Las herramientas del menú lateral de heramientas de Xd nos proporcionarán el esqueleto de nuestra aplicación dentro del artboard. Es decir, si en una página web tenemos etiquetas para insertar contenido y, dichas etiquetas nos sirven de esqueleto para la página web o aplicación Web, las herramientas de Xd son como las etiquetas de un sitio Web: con ellas produciremos la aplicación.

Herramienta de forma.

Las herramientas de forma son aquellas que nos generan una forma geométrica para usarla en nuestro artboard. Existen tres principales que son la Herramienta Rectángulo, la Herramienta Elipse y la Herramienta Triángulo. En este punto vamos a ver la herramienta rectángulo porque en el uso de las otras herramientas de forma es igual en todos los aspectos (salvo la propia forma de la herramienta).

Esta es la primera de las herramientas del menú de herramientas de Xd. Sirve para dibujar una figura rectangular sea un cuadrado o un rectángulo. Al seleccionar la herramienta de rectángulo (también se selecciona con la tecla R del teclado), y la llevas al artboard, puedes dibujar un rectángulo dentro del mismo. Por defecto el rectángulo tendrá un fondo blanco y unos puntos de anclaje definidos por el sistema.

En el interior del rectángulo que hemos dibujado existen varios puntos de anclaje, de color blanco, que sirven para redimensionar el objeto. Pero además en su interior hay otros cuatro puntos de radius que sirven para establecer el radio a los bordes del control creado.

Los puntos de radius, si pones el ratón sobre uno de ellos cambiará y te permitirá escoger el ángulo del borde del objeto. Mientras más centrado esté el punto, más radio tendrá el objeto. Mientras que cuanto más alejado del centro, menos radio tendrá el borde.

Propiedades del objeto.

Cuando me refiero a las propiedades del objeto estoy haciendo referencia a las propiedades físicas del objeto como son tamaño, ajuste respecto a su artboard, tipo de borde, tamaño del borde (si es interior o exterior), su alineado, etc.

Y al referirme a la representación me refiero a como se va ver el objeto dentro del artboard en cuanto a color, estilo de los bordes, color de los mismos, degradados, opacidades, estilos varios, etc. Por lo tanto separaré el espacio de trabajo del Panel de Ejecución y representación según las tareas que realizaré.

Ajustes físicos de los objetos

Al seleccionar el objeto cambian las propiedades de forma del Panel de Ejecución y representación. Vamos a ver los ajustes físicos que se pueden hacer en el objeto respecto al artboard.

Alineamiento.

Este menú muestran las propiedades del objeto en cuanto a su alineamiento con el objeto principal artboard. Empezando por la izquierda, este primer elemento alinea en la parte superior del artboard al objeto. El elemento de su derecha, alinea el objeto en el centro del artboard (justo en el centro lineal). El siguiente a la derecha, alinea el objeto en la parte inferior del artboard.

Observa que cada representación del icono te muestra como quedaría el objeto dentro del artboard.

EL cuarto icono empezando por la izquierda es Distribuir horizontalmente. Esta herramienta hace que el objeto se ponga de forma horizontal respecto al artboard. Aunque en este caso no es necesario. El quinto, sexto y séptimo icono empezando por la izquierda nos permiten alinear el objeto al artboard según su eje horizontal a la izquierda, al centro o a la derecha. Y para terminal el último icono desde la izquierda es Distribuir verticalmente, lo cual cambia la posición del objeto a una posición vertical.

Cuadrícula de repetición.

Esto puede ser peligroso si no quieres modificar el objeto actual, ya que al redimensionar y crear nuevas copias, el objeto original se redimensiona al tamaño movido. Al pulsar de nuevo sobre Desagrupar cuadrícula, el objeto habrá cogido el nuevo tamaño y si lo redimensionas se redimensionará todo el conjunto.

Para hablar sobre los siguientes iconos de propiedades necesitamos crear otro objeto rectángulo. Selecciona la Herramienta Rectángulo (o pulsa R), y dibuja otro rectángulo en el artboard. Para que el Menú de combinación de objetos funcionen deberás de seleccionar por lo menos dos objetos a los que quieres que se apliquen estas operaciones booleanas a los objetos. Para ello, selecciona un objeto y con la tecla TAB del teclado, el otro objeto. Esto hará que se seleccionen ambos objetos. En ese momento en el Panel de Ejecución y Representación se activará el Menú de combinación de objetos.

Según el trabajo con objetos puedes:

El primer icono empezando por la izquierda es Añadir a área de forma . Esto hará que los objetos seleccionados con TAB se manipulen como un único objeto y así puedas redimensionar todos los objetos del artboard como si de uno se tratase. Además puedes hacer, si los objetos están tocandose o dentro del otro que se genere una forma adicional por la silueta que generan ambos objetos.

El segundo icono por la izquierda es el de Restar. Por cada objeto seleccionado en el artboard se eliminará del mismo para que puedas editar un objeto en cuestión. Es decir de si dos objetos seleccionados, solo me mostrará el primero al quitar el segundo objeto que seleccioné (pudiendo unicamente editar el elemento que queda mostrado en el artboard). Aplicando también el mismo principio de insercción, si los objetos están contenidos dentro del otro, se restará la parte del segundo sobre el primero, generando una silueta y forma del objeto.

El tercer elemento por la izquierda, Intersectar sobre todo se usará con la herramienta Pluma que veremos más adelante en otras prácticas. Pero se puede usar en objetos del artboard para recortar y definir formas de dos objetos que están en contacto entre sí. Por ejemplo si queremos que de dos rectángulos que están iteractuándo solo tengamos presente el resultado de las puntas que interactúan entre ambos objetos, al pulsar el icono, se mostrará unicamente el rectángulo que queda de ambos resultados (en rojo como se mostrará al pulsar el icono).

El último icono es el de Excluir interacción, es decir hace lo inverso que el anterior evitando que el resultado que nos daba anteriormente en este caso se excluye del objeto.

Así que partiendo de dos objetos que están interactuándo entre si:

Estas son las formas que se obtienen de cada control:

Las opciones de transformación que se te activan cada vez que seleccionas un objeto nos permiten manipular las medidas de dicho objeto y la posición relativa respecto a otros objetos, por lo que el ajuste del objeto en ADOBE Xd es total.

Ajustes de representación del objeto.

Los siguientes controles del Panel de representación y Ejecución se encargan de dar estilo al objeto como color, fondo, degradado, tipo de borde, estilo del mismo, etc. Cabe destacar las siguientes herramientas.

Formato de bordes.

Puedes seleccionar un tamaño a los bordes y también poner que el borde sea exterior, interior o central.

El Guión del borde es el tipo y forma que va a tener dicho borde, puede ser extremo romo, extremo redondeado y extremo proyectado. Cada uno de los tipos de guión están por defecto incluidos en los objetos.

También se puede hacer que el borde en sus uniones tengan una unión de ángulo, una unión redondeada o una unión biselada.

También puedes, aparte de lo anterior, establecer el tipo de borde del objeto dandole un border-radius general o personalizado a cada eje del objeto insertando el valor de cada radius en el cuadro de texto.

Poco más hay que decir. Si acaso la opción de Marcar para Exportación, permite que el objeto sea exportado para ser usado en otros archivos y programas de ADOBE, pero eso si, deberás de tener activado y en funcionamiento el software de CREATIVE CLOUD del que hable basicamente en la clase1.

En la siguiente clase empezaremos a manipular imagenes y llevarlas a nuestros artboards además de seguir conociendo las otras herramientas que no hemos visto aún.