Como ya comentábamos en el post anterior, Sketches una herramienta basada principalmente en el uso de vectores. Es aquí donde encontramos las similitudes con Ilustrator.
Capas
Con Sketch tenemos la posibilidad de insertar formas geométricas que después podremos personalizar, agrupar, escalar, rotar, etc.
Para insertar las capas o formas, tendremos que irnos al panel «Insert«, que se encuentra en el toolbar superior y seleccionaremos la forma que prefiramos.
Las más habituales como líneas, cuadrados o círculos tienen sus propios atajos de teclado. Esto nos ahorrará muchísimo tiempo.
Por ejemplo, si queremos pintar una línea nos bastará solo con pulsar la tecla «L».
Consejo: Cada vez que queramos salir de una herramienta tendremos que pulsar la tecla ESC
De la misma manera que teníamos un panel de características o atributos a la hora de crear artboards, con las capas nos ocurrirá lo mismo:
Tendremos las opciones de alineación, posición con respecto al Artboard, tamaño, transformación, opacidad, radio, color, borde, sombra, etc.
Otra novedad respecto a Photoshop e Ilustrator es la herramienta que introduce Sketch para modificar las formas mediante la herramienta «vector«, más conocida en Photoshop como «pluma«.
Si hacemos doble click en la forma, nuestro panel cambiará por el siguiente:
Ahora vamos a especificar en qué consiste cada opción que aparece en el panel:
Straight: Nos permite mover los puntos de ancla sin modificar su ángulo.
Mirrored: Automáticamente generará un ángulo redondeado en el punto de ancla que selecciones. Si pruebas a mover los ejes verás que los mueve de forma homogénea, es decir, como si fuese un espejo.
Disconnected: En este caso el movimiento de un ancla no significará que el otro se mueva a la par.
Asymmetric: Esta opción es bastante similar a «Mirrored«, con la diferencia que con ella, sí podrás ampliar la longitud de los ejes de forma independiente.
Este modo de edición será bastante útil para aquellos que no sean muy «mañosos» con la pluma de Adobe.
Estilos de capas
La gran novedad que introduce Sketch es la posibilidad de crear estilos que podremos después reutilizar para otras formas.
Os pongo un ejemplo:
Puede existir la posibilidad de que queramos introducir en nuestros diseños de forma recurrente algunos contenedores que tengan, por ejemplo, una sombra y que además tengan un radio de 2 píxeles.
Lo habitual en Photoshop sería crear todo de cero cada vez que quisiéramos introducir este contenedor, o que tuviésemos que duplicar (buscando entre nuestro millón de capas y carpetas) el elemento ya creado para después modificarlo.
Con Sketch podemos aplicar o quitar estos estilos a golpe de click. Os explico cómo:
- Seleccionamos nuestro Objeto.
- Le damos todos aquellos atributos que queramos utilizando el panel:
- Pulsamos la opción «No shared Style«
- Seleccionamos «Create New Shared Style»:
- Le asignamos un nombre y ¡Voilá! ¡Habemus estilo!
A partir de ahora si queremos aplicarle ese estilo a otra forma solo tendremos que ir a ese seleccionable y elegir el nombre del estilo que hemos creado. Si queremos quitarlo simplemente tendremos que volver a la opción «No shared style».
Además de utilizar el panel de características, también tenemos otras funcionalidades en el toolbar superior:
Este toolbar es personalizable y nos ayudará a tener a mano todas aquellas herramientas que utilicemos con mayor frecuencia.
Para ello, simplemente debemos pulsar el botón derecho del ratón y seleccionar «Customize Toolbar».
Como podéis ver, las opciones son enormes, y será tan sencillo como utilizar el drug & drop.
Textos y estilos de texto:
El funcionamiento de los textos es bastante similar al de las formas. Si queremos introducir un texto, simplemente debemos pulsar la tecla T o ir al insert y seleccionar la herramienta de texto.
El panel de características es bastante intuitivo y fácil de utilizar.
Podremos customizar nuestros textos con variables ya conocidas, como el interlineado, el espacio entre caracteres, la alineación, etc.
La gran novedad de Sketch reside en la posibilidad de crear estilos también para los textos. Esto nos agilizará muchísimo el trabajo, puesto que simplemente nos bastará con crear aquellos estilos que vayamos a necesitar y después utilizarlos de forma masiva.
El funcionamiento es exactamente igual al de los estilos de forma.
Utilidades:
Podremos utilizar degradados con la opción Fills
Podremos aplicar estilos de transformación como Uppercase (mayúsculas) o Lowercase (minúsculas). Estas opciones las encontraremos en el icono de engranaje que se encuentra junto al color:
En el caso de crear cajas de texto podemos configurar que el ancho y alto de estas cajas sea fijo o se adapte al contenido, así mismo podremos alinear el texto a la zona superior, media o inferior.
Os recomiendo el plugin «random ipsum» y «content generator».
En próximos post os enseñaremos cómo utilizarlo para ganar tiempo cuando crees contenido en tus diseños. ¡Espero que os haya gustado el post de hoy y que os animéis a utilizar Sketch!
¡Hasta pronto!
