7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Sketch

De la A a la Z de Sketch: ¡Consejos y Trucos!

Scroll to top
Read Time: 15 mins

Spanish (Español) translation by Naudys Angulo (you can also view the original English article)

Deja que te muestre algunos consejos y trucos rápidos en Sketch para Mac. Veremos 26 consejos y trucos de Sketch de la A a la Z.

Una vez que te hayas familiarizado con Sketch, ¡visita Envato Elements! Con una suscripción, tendrás acceso ilimitado a numerosos recursos de Sketch, como plantillas de Sketch, formas de Sketch y mucho más. ¡Una simple licencia comercial que puedes cancelar en cualquier momento!

Popular Sketch UI Templates on Envato ElementsPopular Sketch UI Templates on Envato ElementsPopular Sketch UI Templates on Envato Elements

Lo que aprenderás en este tutorial de Sketch:

  • Cómo trabajar con vectores en Sketch
  • Cómo manejar las capas de Sketch
  • Cómo trabajar con símbolos de Sketch
  • Cómo crear y editar formas en Sketch

A de Artboards (Mesas de trabajo)

Una mesa de trabajo representa el área donde se creará un diseño de pantalla en Sketch. Por defecto, tu mesa de trabajo inicial será blanca, y puedes tener varias mesas de trabajo en un documento.

Seleccionando la herramienta Artboard en la barra de herramientas o pulsando la tecla de acceso rápido A, se abrirá una lista con los tamaños de pantalla más comunes en la barra lateral derecha. Puedes seleccionar una de las plantillas preestablecidas de Sketch y añadir la mesa de trabajo a tu diseño, o puedes definir tu propia mesa de trabajo de tamaño personalizado.

Haz clic en el nombre de una Artboard para seleccionarla y utiliza el cuadro delimitador siempre que quieras escalarla.

sketch artboardsketch artboardsketch artboard

B de Borders (Bordes)

Se puede aplicar un Border (trazo) en cualquier tipo de capa de un documento de Sketch.

En el Inspector puedes cambiar el color del border, ajustar el estilo, establecer la alineación y el grosor, o bien puedes seleccionar uno de los ajustes de border de cap y join.  Cuando trabajes con trazados abiertos puedes añadir un diseño de inicio y de fin. Más sobre esto cuando lleguemos a la letra L, donde hablaremos de las líneas.

sketch bordersketch bordersketch border

C de Customize Toolbar (Personalizar la barra de herramientas)

Haz clic con el botón derecho del ratón en tu barra de herramientas y ve a Customize Toolbar siempre que quieras editar los botones disponibles en tu barra de herramientas.

Haz clic y arrastra los diferentes botones que puedan ajustarse a tus necesidades para un proyecto específico. Puedes arrastrar fácilmente el conjunto predeterminado a la barra de herramientas y, mediante el menú desplegable, puedes eliminar el texto que hay debajo de tus botones.

sketch customize toolbarsketch customize toolbarsketch customize toolbar

D es para Comando+D

Utiliza este atajo de Sketch siempre que quieras duplicar una capa seleccionada de tu diseño. Tu copia se añadirá encima de la capa original de Sketch.

sketch duplicate shortcutsketch duplicate shortcutsketch duplicate shortcut

E es para Edit (Edición)

Usando el modo de Edit puedes editar una forma existente. Haz doble clic en la forma, selecciónala y pulsa Intro, o haz clic en el botón Edit de la barra de herramientas para activar el modo Edit. Ten en cuenta que también puedes seleccionar varias formas y editarlas al mismo tiempo.

En el modo Edit puedes hacer clic en cualquier punto para seleccionarlo y moverlo. Haz clic en una trayectoria para añadir un nuevo punto o mantén pulsada la tecla Comando y arrastra para doblar bien tu trayectoria.

Los puntos seleccionados también pueden ajustarse utilizando uno de los cuatro botones de tipo de punto del Inspector. Dependiendo del tipo de trayectoria que hayas seleccionado, puedes cerrarla o abrirla utilizando el botón del Inspector y puedes ajustar el radius (radio) de las esquinas de cualquier punto seleccionado utilizando el control deslizante del Radius (radio).

Una vez que hayas terminado de editar el trazado, puedes salir del modo Edit pulsando dos veces la tecla Esc o haciendo clic en el botón Finish Editing (Finalizar edición) desde el Inspector.

sketch editsketch editsketch edit

F es para Fill (Relleno)

Un Fill (relleno) establece el color de una capa en Sketch.

Al hacer clic en Fill color desde el Inspector, se abrirá la  vista previa. Usando los iconos superiores puedes elegir entre cinco tipos de Fill: Solid Color (Color sólido), Linear Gradient (Degradado lineal), Radial Gradient (Degradado radial), Angular Gradient (Degradado angular) o Pattern/Image (Patrón/imagen). Con el botón del cuentagotas puedes tomar rápidamente un color de tu diseño y utilizarlo para el Fill.

Baja el valor de la Opacity (Opacidad) cuando desees añadir un poco de transparencia a tu relleno, añade más de un relleno utilizando el botón +, o utiliza el botón de al lado si deseas cambiar el modo de fusión.

Para desactivar un Fill, todo lo que tienes que hacer es desmarcar la casilla junto al Fill color. También puedes hacer clic con el botón derecho en un relleno para copiarlo, duplicarlo o eliminarlo.

sketch fillsketch fillsketch fill

G es para Grid (Cuadrícula)

Para activar la Grid, haz clic en el botón View (Ver) de la barra de herramientas y ve a Show Grid (Mostrar cuadrícula), ve a View > Canvas > Show Grid (Ver > Lienzo > Mostrar cuadrícula) en la barra de menú o utiliza el atajo de teclado Control+G. Las cuadrículas pueden utilizarse para definir la estructura principal de un diseño y para medir, alinear o crear fácilmente capas de píxeles perfectos en Sketch.

Para editar tu Grid, haz clic de nuevo en el botón View de la barra de herramientas y selecciona Grid Settings (Configuración de la cuadrícula) o ve a View > Canvas > Grid Settings (Ver > Lienzo > Configuración de la cuadrícula) en la barra de menús. En la nueva ventana que se abre puedes establecer el tamaño y el color de la cuadrícula. Asegúrate de reducir la opacidad del color para que la cuadrícula no te distraiga.

Échale un vistazo a este tutorial de Sketch si quieres mejorar el trabajo con vectores en Sketch mientras creas esta fuente Nautical Tattoo: Cómo crear una fuente Nautical Tattoo.

sketch gridsketch gridsketch grid

H es para Hand Tool (Herramienta Mano)

Si mantienes pulsada la Space bar (barra espaciadora), se activará temporalmente la Hand tool (Herramienta Mano), que puede utilizarse siempre que desees desplazarte por un documento sin seleccionar o mover capas accidentalmente.

sketch hand toolsketch hand toolsketch hand tool

I es para Image (Imagen)

Las imágenes se pueden añadir dentro de una forma seleccionada utilizando el color de relleno del Inspector. Este método puede apretar o recortar tu imagen y en algunos casos querrás añadir tu imagen completa como una capa independiente.

Para conseguirlo, puedes arrastrar manualmente la imagen desde tu escritorio o puedes ir a Insert > Image... (Insertar > Imagen) y hacer doble clic en la imagen que quieras añadir.

sketch imagesketch imagesketch image

La J es para Joins (Uniones)

Las Joins (uniones) afectan a los puntos de las esquinas de un Border (borde). Dependiendo del tipo de Join (unión) que selecciones en el Inspector, puedes hacer que las esquinas aparezcan afiladas (Miter Join - unión en inglete), redondeadas (Round Join - unión redonda) o cuadradas (Bevel Join - unión en bisel). Haz clic en el botón Adjust Border Properties (Ajustar propiedades del borde) si no puedes ver estas opciones.

sketch joinssketch joinssketch joins

K es para Comando+K

Con este atajo de teclado de Sketch puedes cambiar fácilmente el tamaño de las capas complejas. El tamaño del Borde, los atributos de la sombra y el radio de las esquinas se escalarán en consecuencia. El escalado puede hacerse de forma proporcional o numérica, y puedes establecer el punto de referencia para el escalado utilizando el botón Scale from (Escalar desde).

sketch scalesketch scalesketch scale

L es para Line (Línea)

Selecciona la Line tool (herramienta Línea) de la barra de herramientas o pulsa la tecla de acceso directo L siempre que desees crear una línea recta perfecta.

Una vez creada, puedes ajustar la configuración de los Border (bordes) en el Inspector y puedes convertirla fácilmente en una línea de flecha utilizando los atributos Start (Inicio) y End (Fin).

sketch linesketch linesketch line

M es para Masking (Máscara)

El Masking (enmascaramiento) te ofrece la posibilidad de ocultar partes de tus elementos de diseño. Hay dos tipos de máscaras que se pueden aplicar en Sketch: Outline Masks (Máscaras de Contorno) y Alpha Masks (Máscaras Alfa).

Selecciona la capa que actuará como máscara junto con el objeto (u objetos) que serán enmascarados. Simplemente haz clic con el botón derecho en tu selección y ve a Máscara. Esto creará un nuevo grupo dentro de la Lista de Capas que contiene tu máscara y la capa enmascarada. Cualquier nueva capa que arrastres por encima de la máscara, dentro de ese grupo, también será enmascarada. Para desenmascarar una capa, selecciónala, haz clic con el botón derecho y ve a Ignore Underlying Mask (Ignorar máscara subyacente).

Para crear una Alpha mask (máscara alfa), comienza por crear la Outline Mask (máscara de contorno). Una vez que hayas terminado, selecciona la máscara en la lista de capas y ve a Layer > Mask > Mask Mode > Alpha Mask (Capa > Máscara > Modo de máscara > Máscara alfa). Dirígete a la configuración de Fill (Relleno) y sustituye el color plano por un degradado. Si tienes un punto de tu degradado seleccionado, simplemente baja la Opacity (Opacidad), lo que ajustará la transparencia de tu capa enmascarada. Ten en cuenta que los colores del degradado no son importantes, solo los valores de Opacidad que establezcas para los colores del degradado afectan a la máscara.

sketch maskingsketch maskingsketch masking

N es para Comando+N

Utiliza este atajo de Sketch para crear rápidamente un nuevo documento en Sketch para Mac.

sketch new documentsketch new documentsketch new document

O es para Overrides (Sobreescribir)

Las Overrides (sobrescrituras) van de la mano de los Symbols (símbolos) de Sketch. Los símbolos son elementos de diseño que pueden reutilizarse fácilmente en tus diseños de interfaz de usuario. Aprenderemos más sobre esta increíble característica cuando lleguemos a la letra S.

Las Overrides aparecen en el Inspector siempre que tengas un símbolo seleccionado. La edición de una override cambiará el contenido dentro de una instancia individual del símbolo. Este cambio no afectará al símbolo de origen ni a ninguna otra instancia del mismo.

Echa un vistazo a este tutorial de Sketch si quieres aprender más sobre el poder de los símbolos y overrides de Sketch mientras creas este diseño de interfaz de usuario de la aplicación de pedidos de comida para iPad: Cómo diseñar una interfaz de usuario para iPad de pedidos de comida en Sketch.

sketch overridesketch overridesketch override

P es para Prototyping (Prototipos)

La creación de Prototyping (prototipos) te permite visualizar tu diseño de interfaz de usuario con interacciones animadas. Para crear un prototipo en Sketch es necesario añadir Links (Enlaces) o Hotspots que conectan cualquier capa con cualquier mesa de trabajo.

Para añadir un Link (enlace), selecciona la capa que quieres convertir en enlace, ve al Inspector y marca el botón + en la sección de Prototyping (Prototipos).  Haz clic en una mesa de trabajo a la que quieras vincular tu capa y vuelve al panel del Inspector, donde puedes establecer el aspecto de la transición de tu enlace utilizando los botones de Animation (animación). 

Para añadir una Hotspot (zona activa), selecciona Insert > Hotspot (Insertar > Zona activa) en la barra de herramientas. Haz clic y arrastra para crear la Hotspot Area (área de zona activa) y luego haz clic en una mesa de trabajo a la que quieras vincular tu capa. Una vez creada, puedes editar tu animación en el Inspector, al igual que con un enlace.

Cuando tu prototipo esté terminado puedes previsualizar la animación usando el botón de Preview (Previsualización) de la esquina superior derecha. En la nueva ventana abierta puedes hacer clic en los Links (enlaces) y las Hotspots (zonas activas) designados para probar tu animación.

sketch prototypesketch prototypesketch prototype

Q es para Comando+Q

Utiliza este clásico atajo de teclado de Sketch siempre que quieras salir rápidamente de tu aplicación de Sketch.

sketch quitsketch quitsketch quit

R es para Rulers (Reglas)

Por defecto, las Rulers (reglas) están ocultas. Para activar las Rulers (reglas), puedes hacer clic en el botón View (Ver) de la barra de herramientas y seleccionar Show Rulers (Mostrar reglas), puedes ir a View > Canvas > Show Rulers (Ver > Lienzo > Mostrar reglas) en la barra de menús o puedes utilizar la tecla de acceso directo Control-R.

Haz clic y arrastra tus reglas para establecer el origen cero donde lo necesites. Para bloquear las reglas en su lugar, haz clic en este icono de bloqueo. Para restablecer tus reglas, ve a View > Canvas > Reset Ruler Origin (Ver > Lienzo > Restablecer origen de regla).

Haz clic en cualquier parte de una regla para añadir una guide (guía). Si desactivas las reglas, tus guías también serán invisibles.

sketch rulerssketch rulerssketch rulers

S es para Symbols (Símbolos)

Los Symbols (símbolos) son elementos de diseño que pueden reutilizarse fácilmente en los diseños de la interfaz de usuario. Para convertir una capa en un símbolo, selecciónala y haz clic en el botón Create Symbol (Crear símbolo) de la barra de herramientas o haz clic con el botón derecho en ella y ve a Create Symbol.

Sketch creará una mesa de trabajo separada con tus símbolos que es la Source (Fuente). Una copia de esta Source se llama Instance (Instancia) y puedes crear tantas instancias como desees. Cuando realizas un cambio en una Source, el resto de las Instances se modifican simultáneamente.

Para insertar una Instance de un símbolo puedes pulsar la tecla de acceso directo C y hacer doble clic en el símbolo deseado o puedes ir a Insert > Symbol > This Document (Insertar > Símbolo > Este documento) y seleccionar el símbolo deseado.

Échale un vistazo a este tutorial de Sketch si quieres aprender más sobre el poder de los símbolos de Sketch mientras creas el diseño de la interfaz de usuario de esta aplicación para coches: Cómo diseñar la interfaz de usuario de una aplicación para carros en Sketch.

sketch symbolssketch symbolssketch symbols

T es para Text on Path (Texto en trazado)

Con Text on Path puedes colocar fácilmente un texto en un trazado. Para añadir el texto a un trazado vectorial, asegúrate de que el texto se encuentra sobre el trazado en la Lista de Capas y sobre la mesa de trabajo.

Selecciona la capa de texto y luego ve a Text > Text on Path en la barra de menú. Simplemente arrastra el texto para moverlo a lo largo del trazado y vuelve a Text > Text on Path cuando quieras separar el texto de ese trazado.

Échale un vistazo a este tutorial de Sketch si quieres probar esta función mientras creas el logotipo de esta barbería: Cómo crear el logotipo de una barbería.

sketch text pathsketch text pathsketch text path

U es para Unión

Utiliza esta operación booleana para unir fácilmente las formas de tu diseño. Solo tienes que seleccionar las formas que quieres unir, subir a tu barra de herramientas y hacer clic en el botón de Unión.

Además de la Unión puedes encontrar otras tres operaciones booleanas en la barra de herramientas: Restar, Intersección y Diferencia.

sketch unionsketch unionsketch union

V es para Vector Tool (Herramienta Vectorial)

Selecciona la Herramienta Vector de tu barra de herramientas o pulsa la tecla de acceso rápido V siempre que quieras dibujar una nueva forma en Sketch.

Empieza a crear una forma con un simple clic. Vuelve a hacer clic para crear el segundo punto y Sketch creará un trazado que conecte los dos puntos. Haz clic y arrastra cuando crees un nuevo punto para añadir un trazado curvo y haz clic en el primer punto cuando quieras cerrar tu trazado. Una vez cerrado, estarás en modo de edición y podrás ajustar los tiradores, seleccionar cualquier punto y moverlo como quieras.

sketch vector toolsketch vector toolsketch vector tool

W es para Comando+W

Utiliza este atajo de Sketch siempre que quieras cerrar el documento actual de la aplicación Sketch.

sketch close documentsketch close documentsketch close document

X es para Comando+X

Utiliza este atajo de teclado de Sketch siempre que quieras Cortar un objeto de tu diseño de interfaz de usuario.

sketch cutsketch cutsketch cut

Y es para Comando+Y

Con este atajo de teclado de Sketch puedes guardar fácilmente el elemento seleccionado como un símbolo de Sketch.

sketch create symbolsketch create symbolsketch create symbol

Z es para Zoom

Manteniendo pulsada la tecla de acceso directo Z, se obtiene la herramienta Zoom. Este atajo de zoom puede utilizarse para acercar o alejar la imagen. Haz clic en cualquier lugar de tu mesa de trabajo para acercarte o haz clic y arrastra para definir el área sobre la que deseas hacer el zoom. Para alejar la imagen, mantén pulsada la tecla Alt junto con la tecla Z y haz clic en cualquier parte del diseño.

También puede establecer el nivel de zoom desde la barra de herramientas o desde la barra de menús (Ver > Zoom), donde puedes encontrar algunos accesos directos al zoom.

sketch zoomingsketch zoomingsketch zooming

¿Estás preparado para probar algunos tutoriales de Sketch?

¡Genial! Así que ahora que hemos pasado por la A hasta la Z de la aplicación Sketch, por qué no pasar al siguiente nivel y probar uno de los tutoriales de Sketch más profundos o cursos de Sketch en Envato Tuts+. Recuerda visitar Envato Elements, donde puedes encontrar un montón de recursos de Sketch o plantillas de Sketch para inspirarte.

¡Ya sea que estés trabajando en un simple diseño de interfaz de usuario o simplemente quieras aprender más, Envato Tuts+ te tiene cubierto!

Más guías de la A a la Z

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.