Diseño UI con Affinity Designer (II): Guías y Cuadrículas

Este artículo forma parte de una serie que estamos realizando sobre Affinity Designer y Diseño UI en Silo Creativo. Puedes acceder al resto de ellos desde aquí:

Continuamos una semana más con Affinity Designer, y esta pequeña guía para introducirnos en el diseño UI. En esta ocasión, nos centraremos en dos herramientas que seguramente os sonarán de otras aplicaciones de diseño vectorial. Nos referimos a las guías y a lcuadrículas. Si venimos trabajando con Adobe Illustrator, comprobaremos que el tratamiento que tienen es muy parecido. Aunque se añaden ciertos matices para ayudarnos si estamos diseñando una UI o un prototipo.

Pero antes de empezar con ese tema, es necesario que hablemos de las opciones que tenemos para personalizar los ajustes de elementos o snapping. Estos ajustes de elementos nos facilitarán nuestro trabajo dentro del diseño UI. Sin más, veamos en que consisten.

Herramientas de Ajuste o Snapping

Opciones de Ajuste en Affinity Designer

Las opciones de Ajuste de Elementos o Snapping las encontramos bajo Vista > Asistente de Ajuste. O directamente en la barra superior de Affinity Designer, pulsando el la flecha a la derecha del icono del imán.

En esta nueva ventana, podemos elegir entre tener activado el Ajuste o no. Esto también podemos hacerlo al activar o desactivar el icono del imán de la barra de herramientas que hemos mencionado anteriormente.

Una de las opciones mas interesantes es que podemos crear perfiles de Ajuste. Esto nos sirve si, por ejemplo, estamos creando un diseño web, es más útil tener solo activo los Ajustes a rejillas y ejes. Mientras que si estamos dibujando un icono o cualquier ilustración, quizás sea mejor ajustar sólo a elementos visibles. Esto nos permite cambiar los Ajustes con más rapidez. Aparte de no tener que recordar que parámetros teníamos activados o desactivados en según que situaciones.

Pero claro, todo esto sirve si tenemos creado en nuestro proyecto guías y cuadrículas con las que trabajar. Así que vamos a ver como crearlas.

Guías en Affinity Designer

En primer lugar, empecemos con las guías. Antes que nada, hay que asegurarse que bajo el menú Vista, tenemos activada la opción de Mostrar guías. Si no está activo, por mucho que hagamos, nunca vamos a verlas.

Opción 1: Arrastrar Guías

Una vez activada esta opción, existen dos formas de insertar una guía. Una de ella es la más usual de arrastrarlas desde las reglas de nuestro documento. Si no ves estas reglas, las puedes activar en Mostrar reglas, dentro del menú Vista. Muy cerca de donde activamos las guías. Pues una vez hecho esto, solo tenemos que ir a la regla superior y arrastrar para crear una guía horizontal. O la la regla lateral izquierda para crear una guía vertical. Muy sencillo, y exactamente igual que en Illustrator.

Opción 2: Gestor de Guías

La otra manera quizás nos permita un ajuste más fino a la hora de colocar nuestras guías. Si nos vamos a Vista > Gestor de guías, vemos como nos aparece una ventana flotante. En esta nueva ventana podemos definir las nuevas guías que queramos insertar en la mesa de trabajo que tengamos activa. Hay que tener en cuanta que el punto inicial de inserción es el borde superior e izquierdo de nuestra mesa de trabajo. Es decir, que si añadimos una guía horizontal a 40px, esta distancia se empieza a contar desde el borde superior.

Para añadir nuevas guías, solo hay que pulsar el icono correspondiente. Este icono es el mismo que suele tener el de abrir un nuevo documento, por lo que quizás puede resultar un poco confuso al principio. Eso si, para eliminar una guía, el icono correspondiente es la universal papelera. Aquí pocas confusiones. Y como extra, no solo podemos insertar guías añadiendo una distancia, sino también un porcentaje. Si activamos la opción Porcentaje, vemos como nuestras guías ya no se muestra en píxeles. Ideal si estamos en resoluciones que nos son algo extrañas.

Una vez vistas las guías, pasemos a ver las cuadrículas.

Cuadrículas en Affinity Designer

Pasamos al que, personalmente, me parece uno de los aspectos más interesantes de Designer: la creación y personalización de la cuadrícula. Para los que no estéis familiarizados con el termino, la cuadrícula no es más que una rejilla que forma parte de nuestra mesa de trabajo y que, al igual que las guías, nos sirven como ayuda cuando estemos diseñando. Pero al contrario de las guías, no hay que crearlas una a una, sino que el programa se encarga de hacerlo ajustando ciertos parámetros. Como antes, asegurémonos en primer lugar de que Mostrar cuadrícula este activa en el menú Vista.

En este mismo menú Vista, haremos clic en la opción Asistente de guías y ejes. Esta nueva ventana será donde trataremos con la personalización de nuestra cuadrícula. Lo primero que vemos es que desde aquí también podemos elegir entre mostrar o no nuestra cuadrícula. Por defecto, está activada la Cuadrícula automática. Con esta opción marcada, solo podemos modificar el color de la cuadricula y de sus líneas divisorias.

Modificación de los colores de la cuadrícula

Pero aquí hemos venido a jugar, así que lo desactivamos. Si hacemos esto, las opciones que tendremos aumentarán. Si elegimos el modo Básico, ya podemos elegir el espaciado entre los ejes de nuestra cuadrícula, o las divisiones que tendrá la misma. En este punto, te animo a que modifiques estos parámetros, y veas que sucede cuando los cambias.

Y vamos con el modo Avanzado, que es donde verdaderamente nuestras opciones aumentan exponencialmente. Con este modo activado, además de seguir teniendo disponible todo lo anterior, podemos elegir el tipo de cuadricula con la que queremos trabajar. Desde la estándar, que es la que hemos visto hasta ahora, como la isométrica. Ideal si nos gusta crear ilustraciones con esta perspectiva.

Panel del Gestor de Guías y Ejes

Si seguimos bajando en los parámetros, podemos elegir los espaciados por ejes, para que no sean todos iguales, el angulo exacto que deben tener, añadir restricciones, etc. Con todo esto, tenemos la opción de crear una cuadricula totalmente personalizada y que no sea un estorbo cuando estemos diseñando.

Cuadrículas personalizadas según el tipo de dispositivo

Por ultimo, y esto me parece muy importante, una consideración con respecto a las cuadriculas. Todos los ajustes que hagamos se aplicarán a la Mesa de trabajo que tengamos activa. Esto quiere decir que cada mesa de trabajo puede tener una rejilla totalmente diferente al resto. Lo que facilitará enormemente si estamos haciendo un diseño responsive en escritorio, tablet y dispositivo movil, en la que cada uno se mueva bajo unas cuadriculas diferentes. En la imagen superior podéis ver como funciona en tres mesas diferentes que hemos creado.

Conclusiones

Con este artículo, y el anterior sobre la creación de Mesas de trabajo, ya tenemos unas nociones básica para preparar nuestro documento antes de empezar a diseñar nuestra UI o nuestro prototipo.

En el siguiente texto, pasaremos a ver como podemos gestionar assets o recursos que encontraremos por diferentes webs y foros, y que optimizarán y acelerarán nuestro flujo de trabajo. Además de como poder crear nuestro propios recursos para utilizarlos en futuros proyectos, o poderlos compartir con más facilidad entre nuestro equipo de trabajo.

Y esto es todo por esta semana. Os esperamos en el próximo artículo. Y ya sabéis que tenéis abierta la sección de comentarios para cualquier consulta que tengáis, o cualquier añadido que queráis aportar!

Comentarios (2)

  1. Gracias por los aportes visuales, ayudan a la comprensión del contenido.
    Buen artículo, seguiremos pendientes de los siguientes.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *