Herramientas de formas
Cuando maquetamos una aplicación Web, de móvil o iPad, tendremos que usar muy a menudo las herramientas de formas establecidas en el Menú de Herramientas izquierdo de la aplicación.
Dichas herramientas las iremos usando dentro del artboard en cuestión creándo el contenedor o elemento que necesitemos utilizar en nuestra aplicación.
Entendiendo el proyecto.
Vamos a escoger un nuevo proyecto de IPHONE X, XS, 11, Pro-1. Se creará directamente un artboard a la pantalla de trabajo. En el panel de Ejecución y representación se activa la opción del tamaño del artboard y se puede cambiar la altura y anchura así como la orientación del diseño.
La opción de redimensionado interactivo nos servirá más adelante cuando hagamos proyectos multimedia. De momento no es necesario que conozcas más detalles del ello.
La opción de Desplazamiento por defecto es vertical de arriba a abajo. Sobre el Aspecto, desde este control puedes seleccionar el aspecto del artboard seleccionado. Por defecto tiene un color blanco que puedes editar pulsando sobre el icono de color para que se te abra la paleta de colores básica.
La paleta de colores es sin duda un recurso importante de cualquier programa de maquetación, ya que nos permite establecer colores de fondo y degradados a nuestros objetos del artboard.
De las dos barras en la parte derecha, la primera es la que indica la opacidad del color y la segunda empezando por la derecha es la selección de color. La pantalla de la izquierda indica el tono del color seleccionado. Si pulsas sobre el formato de color, se te abrirá otro submenú para que escojas otro formato de color, pudiendo escoger entre RGB y HSB. Por defecto el estilo de color seleccionado es Hexadecimal.
Además puedes guardar colores personalizados de la paleta (muestras), mediante el boton + para usarlos en otros objetos del artboard o en otros artboards del mismo documento (recuerda que podrás guardar además el color en la biblioteca si tienes actualizado el Creative CLOUD).
La paleta también tiene la opción de seleccionar el tipo de sesgado del color, es decir, se puede aplicar un efecto de degradado. Al pulsar sobre el texto Color Uniforme se despliega otro submenú que muestra el tipo de degradado que puedes utilizar.
Con el degradado lineal se realiza un degradado lineal configurable tanto en ángulos como en posición. Por eso al seleccionarlo aparece una línea para que se escoja manualmente el ángulo de ataque y dirección del degradado.
Y por supuerto también puedes guardar el color degradado como muestra para futuros usos.
Para terminar con el color, el degradado radial genera un degradado como su nombre indica de tipo radial, es decir que el degradado tiene carácter circular.
Ten en cuenta que todos los degradados tienen un punto de inicio y un punto final dentro de la pantalla o el objeto en el que se aplican y moviendo el cursor y la línea de destino puede obtenerse varios degradados así como los tonos consecutivos.
La última opción que nos queda por ver es la cuadrícula. La cuadrícula es una regla que se pondrá en la pantalla u objeto que uses para definir sus border, márgenes y limitaciones físicas. Es una ayuda al desarrollador. Existen por defecto dos estilos de cuadrículas: Diseño y Cuadrado.
Plantilla por diseño.Esta plantilla divide en columnas el artboard para que puedas editar los componentes correctamente y a la altura deseada.
Puedes ver que las columnas se pueden ajustar en tamaño con Anchura de columna y que la opción de Anchura de medianil indica el ancho que tiene el espaciado entre columnas.
Justo abajo tienes a continuación la configuración de los márgenes del diseño.
La opción por defecto es la opción de los márgenes derecho e izquierdo vinculados. Esta opción hace que los márgenes derecho e izquierdo tengan un tamaño fijo respecto al artboard y a las columnas, por lo que las columnas se redimensionarán automáticamente.
La otra opción es la opción de escoger el tamaño de cada margen del artboard siendo el primer valor el valor top (superior), el segundo valor el rigth (derecha), el tercer valor el bottom (inferior), y el cuarto valor el left (izquierdo). Con esto puedes escoger y dar un formato de márgenes para tu ayuda al diseño de la aplicación, y recuerda que los márgenes se dan en la unidad que hayas escogido y que por defecto es píxeles.
Cuadrícula por cuadrado.Esta segunda opción de la cuadrícula nos llena el artboard de cuadraditos pequeños que podemos configurar en tamaño y color para que nuestra plantilla esté más precisa.
Como puedes ver en la imagen anterior puedes escoger el tamaño de los cuadraditos del diseño para que te resulte más fácil cuando utilices las heramientas de formas que verás en la práctica de esta clase.
Espero que te haya servido esta clase para conocer el artboard básico y los controles que manejarás en tus proyectos. Si quieres conocer más herramientas, pasa directamente a la práctica de dicha clase para aprender a usarlas. Si ya las sabes usar, puedes pasar a la siguiente clase en la que aprenderás a insertar archivos multimedia y ajustarlos a tu artboard.