Conociendo las herramientas de Sketch: Capas y textos

//Conociendo las herramientas de Sketch: Capas y textos

Conociendo las herramientas de Sketch: Capas y textos

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: 

 

capas.png

 

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: 

 

capas2.png

 

Ahora vamos a especificar en qué consiste cada opción que aparece en el panel: 

straight.png
Straight: Nos permite mover los puntos de ancla sin modificar su ángulo.

 

 

mirrored.png

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.pngDisconnected: En este caso el movimiento de un ancla no significará que el otro se mueva a la par.

 

 

asymmetric.png

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: 

  1. Seleccionamos nuestro Objeto.
  2. Le damos todos aquellos atributos que queramos utilizando el panel: s1.jpg
  3. Pulsamos la opción  No shared Style
  4. Seleccionamos “Create New Shared Style”s3.jpg
  5. Le asignamos un nombre y ¡Voilá! ¡Habemus estilo! 

s4.jpg

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: 

s5.jpg

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”

s6.png

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. 

s7.jpg

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: 

s8.png

Podremos utilizar degradados con la opción Fills 

 

s9.png

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: 

 

s10.png

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! 

¿Te gusta lo que lees? Suscríbete a nuestras newsletters

2018-08-07T13:43:04+00:0020 septiembre, 2017|Categories: Diseño & UX|0 Comments