Primera página diseñada en XD

Cuando colocamos una foto en Adobe XD para comenzar a crear una maqueta de una aplicación; vemos que cuando el “artboard” está colocado de forma vertical, y la foto es horizontal o como dicen en España “apaizada“; notamos que la parte de la foto que se encuentra fuera del “artboard” queda enmascarada. Cuando tenemos una foto como esta podemos jugar libremente con su acomodo en el canvas utilizando el panel de propiedades y los parámetros que se activan al seleccionar la foto.

Screen Shot 2018-04-11 at 2.50.52 PM

Antes de comenzar a tocar los botones del panel de propiedades, observemos por un momento cosas que podemos alterar en una foto con solo nuestro mouse. Si se fijan bien en la foto, la misma tiene una herramienta la cual fue introducida primero en Adobe Illustrator CC; y es la habilidad de redondear las esquinas. Solo debes de seleccionar y arrastrar el punto interno hacia adentro de la foto para comenzar a redondear las cuatro esquinas al mismo tiempo. Si seleccionas la tecla de “Option” en tu teclado mientras arrastras el “mouse” vas a redondear solamente la esquina seleccionada.

Este efecto también lo puedes lograr si en el panel de propiedades seleccionas en la sección de “Aprearance“; en la segunda sección; con los botones siguientes. El primero es para redondear las 4 esquinas al mismo tiempo; y el segundo botón es para activar los parámetros y escribirlos tu mismo.

Puedes notar que en esta sección también puedes activar y alterar los colores del polígono seleccionado; sus bordes; darle sombras al objeto y difuminar el objeto en dos formas distintas de efectos: “Background Blur” y “Object Blur“. Si seleccionas “Object Blur“, estarás difuminando solo la imagen u objeto seleccionado en porcientos de 0% a 100%.

Screen Shot 2018-04-11 at 3.20.07 PM

Si deseas usar el filtro del “Background Blur” necesitas un elemento a adicional para que funcione el efecto. Necesitas un segundo polígono u objeto sobre la imagen. No importa si el nuevo objeto tiene color o borde. El secreto es que el objeto superior difumina al objeto inferior; veamos el ejemplo.

Screen Shot 2018-04-11 at 3.27.08 PM

Primero colocamos un cuadrado sobre la foto y que cubra más de la mitad de la parte superior. Nos olvidamos por completo de su color y ajustamos solamente los parámetros en el panel de propiedades. En este caso utilice 19 para la difuminación; 19 para el brillo y 0% en la transparencia. En la imagen de abajo podemos ver el resultado obtenido.

Screen Shot 2018-04-11 at 3.27.52 PM

Más o menos ya pueden ver hacia dónde nos dirigimos con este efecto. Usualmente cuando activamos una aplicación, tenemos que activarla colocándole un nombre de usuario y una clave de acceso para poder entrar y usar los servicios de la misma. Digamos que estamos diseñando una aplicación para un Banco; pues en la primera página de la maqueta necesitamos comunicarle al programador que necesitamos que programe una acceso. Utilizando los elementos del iOS de Apple; que de antemano descargamos a nuestras computadoras; podemos colocar en la parte inferior de nuestro arte, el teclado diseñado por Apple en su “UI Kits“. Usamos la herramienta de texto y escribimos lo propio para esta zona del diseño y le colocamos una línea para obtener un diseño minimalista. En el panel de propiedades podemos cambiar los parámetros tanto del texto como el de las líneas creadas. Recuerda todo lo que diseñes o toques en la página de diseño afecta o activa parámetros nuevos en el panel de propiedades constantemente.

Screen Shot 2018-04-11 at 3.43.54 PM

Como esta página no es la primera en todo una gama de otras páginas a diseñar, podemos seleccionar el nombre del “artboard” que se encuentra en la parte superior, hacemos click dos veces en el mismo y le cambiamos el nombre a “Password“. Esta página puede ser la segunda o quizás la tercera en el diseño a crear. También veamos como en el panel de “layers” nuestra primera página actualiza su nombre.

Screen Shot 2018-04-11 at 4.04.02 PM

Si hacemos “double click” en el “artboard” llamado ahora Password podemos notar todas las capas que componen esa primera página creada. Adobe XD le adjudica nombres cada elemento a su discreción; también notemos los símbolos que usa en cada capa. “Keyboard Alphabetic” para el teclado; “Symbol 1-1” que contiene una línea y el texto del Username; un “Rectangle 1” para el objeto borroso sobre la foto; y la foto de la cascada con su nombre de archivo de compra. Mientras más objetos, grupos y vectores contenga tu maqueta; más difícil se complican estos nombres. Por ende te aconsejo a que siempre regreses un momento a los “layers” para que los identifiques a cada uno y no te rompas la cabeza buscando algo en tu diseño y no lo puedes encontrar por falta de tiempo para nombrarlos adecuadamente.

Screen Shot 2018-04-11 at 4.06.03 PM

Hasta aquí por hoy! En el próximo post hablaremos sobre la herramienta más poderosa que tiene Adobe XD; el “Repeat Grid“.

¡Hasta luego!

 

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