Manualsketch3 PDF

Diseño
de interfaces con Sketch 3.0

Diseño de interfaces
con Sketch 3.0
Iván Blanco Lorenzo

1

Diseño de interfaces con Sketch 3.0

Reservados todos los derechos. No se permite la reproducción total o parcial de esta obra,
ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por
cualquier medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización
previa y por escrito de los titulares del copyright. La infracción de dichos derechos puede
constituir un delito contra la propiedad intelectual.
Autor: Iván Blanco Lorenzo

Primera edición: 2014
© 2014. Iván Blanco Lorenzo

© 2014. Bohemiancoding
http://bohemiancoding.com/sketch/support/documentation/
Título del libro: Diseño de interfaces con Sketch 3.0

Derechos Reservados, (C)2014

2


Índice
1. Introducción ....................................................................................................................................................... 8
2. La Interfaz ........................................................................................................................................................ 11
Lienzo .................................................................................................................................................................... 11
Zoom en el Lienzo ........................................................................................................................................ 13
Píxel zoom ....................................................................................................................................................... 13
Opción “Acércate a una selección” ........................................................................................................... 13
Opción “Amplía al lienzo - Anterior Posición” ..................................................................................... 13
Opción Retina ................................................................................................................................................ 13
Diseño de cuadrícula .................................................................................................................................... 14
Forzando la Previsualización de píxeles ................................................................................................... 14
Reglas, guías, cuadrículas ............................................................................................................................. 14
Medición ........................................................................................................................................................... 15
Inspector de configuración ............................................................................................................................... 17
a. Atributos generales ................................................................................................................................ 17
b. Atributos Estilo ..................................................................................................................................... 18
Barra de herramientas ........................................................................................................................................ 20
Personalizar la barra de herramientas ....................................................................................................... 20
Páginas ................................................................................................................................................................... 20
Mesas de trabajo ................................................................................................................................................. 21
Añadir mesas de trabajo ............................................................................................................................... 21
Rejillas y Reglas .............................................................................................................................................. 21
Plantillas ........................................................................................................................................................... 22
Mesas de trabajo ............................................................................................................................................. 22
Impresión ......................................................................................................................................................... 22
Lista de capas ....................................................................................................................................................... 22
Varias páginas ................................................................................................................................................. 22
Mesas de trabajo ............................................................................................................................................. 23
Máscaras ........................................................................................................................................................... 23
Operaciones booleanas ................................................................................................................................. 23
Símbolos y Estilos Compartidos ................................................................................................................ 24
3. Las Capas en Sketch 3.0 ............................................................................................................................... 25

3


Añadir capas ......................................................................................................................................................... 25

Opciones avanzadas ............................................................................................................................................. 26
Selección de Capas ............................................................................................................................................. 26
Mover capas ......................................................................................................................................................... 27
Objetos duplicados ............................................................................................................................................. 28
Cambiar el tamaño de las capas ...................................................................................................................... 28
Edición de Capas ................................................................................................................................................ 29
Agrupación de Contenido ................................................................................................................................ 29
Grupos de capas .................................................................................................................................................. 29
Click-Through .................................................................................................................................................... 30
Redimensionar Proporcionalmente ............................................................................................................... 30
4. Formas (Shapes) .............................................................................................................................................. 31
Opciones adicionales ......................................................................................................................................... 31
Cómo editar Formas .......................................................................................................................................... 31
Diferentes Modos ............................................................................................................................................... 32
Dibujo frente a Edición .................................................................................................................................... 33
Cerrado vs Abierto ............................................................................................................................................. 33
Accesos directos ................................................................................................................................................... 34
Selección múltiple .............................................................................................................................................. 34
Operaciones booleanas ...................................................................................................................................... 35
Subtrazados .......................................................................................................................................................... 35
Operaciones ......................................................................................................................................................... 35
Lista de capas ....................................................................................................................................................... 36
Acoplar capas ....................................................................................................................................................... 36
Transformar ......................................................................................................................................................... 37
Mascaras ................................................................................................................................................................ 37
La restricción de las Máscaras .......................................................................................................................... 38
Máscara con Forma ............................................................................................................................................ 38
Máscaras con Alpha ........................................................................................................................................... 39
Tijeras .................................................................................................................................................................... 39
Copiar-Rotar ........................................................................................................................................................ 39
Splitting ................................................................................................................................................................. 40
Lápiz ....................................................................................................................................................................... 40

4


Ancho de trazo .................................................................................................................................................... 41

5. Texto .................................................................................................................................................................. 42
Capas de texto ..................................................................................................................................................... 42
Añadir texto ......................................................................................................................................................... 42
Cambiar el tamaño del texto ........................................................................................................................... 42
Inspector del texto .............................................................................................................................................. 42
Color del texto ..................................................................................................................................................... 43
Auto vs Fijo .......................................................................................................................................................... 43
Rendering ............................................................................................................................................................. 44
Subpixel-antialiasing .......................................................................................................................................... 44
Cuando se produce un error ............................................................................................................................ 45
Exportación .......................................................................................................................................................... 45
Diseñar para iOS ................................................................................................................................................ 46
El texto en contornos ........................................................................................................................................ 46
Estilos Compartidos ........................................................................................................................................... 46
Creación de Estilos ............................................................................................................................................. 47
Nuevas Capas ...................................................................................................................................................... 47
Texto en recorrido .............................................................................................................................................. 48
Convertir en contornos ..................................................................................................................................... 48
Los campos de texto ........................................................................................................................................... 49
Arriba y Abajo ................................................................................................................................................. 49
Matemáticas .................................................................................................................................................... 49
Ajustar Valores ............................................................................................................................................... 49
Eliminar “Estilo de texto” ................................................................................................................................ 50
6. Imágenes ........................................................................................................................................................... 51
Edición de Bitmap ............................................................................................................................................. 51
Sectores .................................................................................................................................................................. 52
Ajuste de color ..................................................................................................................................................... 53
7. Símbolos ........................................................................................................................................................... 54
Crear nuevo símbolo ......................................................................................................................................... 54
Excluir texto ......................................................................................................................................................... 55
Organizar símbolos ............................................................................................................................................ 55
Duplicación Símbolos ....................................................................................................................................... 56

5


Intercambio de Símbolos .................................................................................................................................. 56

8. Estilos ................................................................................................................................................................. 57
Copiar y pegar Estilos ........................................................................................................................................ 57
Alineamiento ........................................................................................................................................................ 57
Acceso directo a la opacidad de la Capa ....................................................................................................... 57
Rellenos ................................................................................................................................................................. 58
Adición de rellenos ............................................................................................................................................. 58
Patrón de relleno ................................................................................................................................................. 59
Relleno de ruido .................................................................................................................................................. 59
Degradados ........................................................................................................................................................... 60
Bordes .................................................................................................................................................................... 60
Color o Degradado ............................................................................................................................................ 61
Líneas discontinuas ............................................................................................................................................ 61
Desenfoque ........................................................................................................................................................... 61
Rendimiento ........................................................................................................................................................ 62
Reflexión ............................................................................................................................................................... 62
Estilos Compartidos ........................................................................................................................................... 62
Color ...................................................................................................................................................................... 63
Colores HSB ........................................................................................................................................................ 63
Colores Comunes ............................................................................................................................................... 63
Degradados ........................................................................................................................................................... 63
Degradados radiales ........................................................................................................................................... 64
Los gradientes circulares ................................................................................................................................... 64
Gradiente Bar ...................................................................................................................................................... 64
Accesos directos ................................................................................................................................................... 65
Degradados en Bordes ....................................................................................................................................... 65
9. Importación ..................................................................................................................................................... 66
Formatos de archivo admitidos ....................................................................................................................... 66
Formatos no admitidos ..................................................................................................................................... 66
10. Exportación ..................................................................................................................................................... 67
Capas o secciones ................................................................................................................................................ 67
Exportación de capas ......................................................................................................................................... 67
Lista de capas ....................................................................................................................................................... 68

6


Secciones ............................................................................................................................................................... 68

Adición de secciones .......................................................................................................................................... 68
Nombrar las secciones ....................................................................................................................................... 68
Múltiples Tamaños ............................................................................................................................................ 69
Sólo Contenido del grupo ................................................................................................................................ 69
Recorte .................................................................................................................................................................. 69
Formatos de archivo .......................................................................................................................................... 70
Atributos CSS ...................................................................................................................................................... 70
11. Rendimiento ................................................................................................................................................... 71
Desenfoques ......................................................................................................................................................... 71
Sombras ................................................................................................................................................................. 71
No usar varias páginas ....................................................................................................................................... 71
El texto en contornos ........................................................................................................................................ 71
12. Accesos directos .............................................................................................................................................. 73
Accesos directos generales ................................................................................................................................. 73
Inserción de capas ............................................................................................................................................... 73
Mover y redimensionar Capas ........................................................................................................................ 73
13. Recursos ........................................................................................................................................................... 74
14. Sobre el autor .................................................................................................................................................. 75
15. Bibliografía ...................................................................................................................................................... 76

7


1. Introducción
Sketch 3.0 es una aplicación profesional para crear gráficos vectoriales e interfaces
digitales, desarrollada por Bohemian Coding y disponible únicamente para ordenadores
Mac.
Sketch 3.0 es una solución de diseño mucho más ligera y rápida que otras
alternativas como Photoshop o Illustrator. Sketch 3.0 es una aplicación muy ligera
(apenas 24 MB de espacio en disco), en comparación con los 1GB de Photoshop.
Dispone de todas las opciones para crear desde cero desde un simple símbolo o icono hasta
toda la interfaz de una aplicación móvil o una página web:
- Plantillas de diseño web y iOS de serie

- Permite copiar los Estilos CSS al portapapeles (incluyendo gradientes)
- Permite definir en el lienzo áreas de exportación, como imágenes.
- Cuadrícula de 960 por defecto, con soporte para opciones de cuadrícula más
avanzados
- Permite crear varias páginas dentro de un solo documento
- Diseño para Web Responsive Design gracias a las Mesas de trabajo
- Y mucho más…
Lo primero que ves al entrar en el programa es un lienzo infinito. No hay ninguna

ventana que pregunte las unidades a utilizar o qué tamaño debe ser tu lienzo. No tienes que
aprender sobre DPI, unidades, tamaños de lienzo… Todo esto sólo importa una vez que
hayas realizado tu diseño.
Sketch 3.0 tiene soporte para estilos de mapa de bits básicos (por ejemplo, correcciones
de color) pero no puede hacer corrección de fotos o dibujar con pinceles.
Sketch 3.0 es una herramienta muy potente y fácil de entender. Sustituye

perfectamente a programas como Adobe Photoshop, Illustrator o Fireworks
para la mayoría de las tareas de diseño digital.

8


¿Por qué utilizar Sketch 3.0?

1. Herramientas muy potentes y una interfaz sencilla y elegante, en
un solo paquete.
2. El diseño vectorial es, actualmente, la mejor manera de diseñar sitios web,
iconos o interfaces y el lienzo de trabajo es infinito.
3. Es una aplicación de una sola ventana, y lo que necesitas esta siempre a
tu alcance. Es una aplicación específica para diseñadores de interfaz.
4. Dispone de Estilos de texto, reutilizables en todo el proyecto.
5. Dispone de Herramientas de exportación muy útiles si diseñas APP
móviles
6. Puedes ver el lienzo, tanto en una visión independiente de la resolución
donde se tiene una precisión infinita, o puedes activar la Previsualización de
píxeles y sabrás exactamente cómo se ve tu diseño tras la exportación.
7. Representación nativa de las fuentes, por lo que puedes estar seguro de que el
texto siempre se ve real al 100%.
8. Optimizado para pantallas Retina y no Retina
MEJORAS EN LA VERSIÓN 3:
- Símbolos, para la reutilización de los elementos en tu diseño. Los

Símbolos permiten reutilizar grupos enteros de contenido en varios lugares en su
diseño. Piensa en los elementos de interfaz como botones, encabezados y pies de página.
Cambia una vez, y se actualizan en todo el documento.
- Estilos de texto y estilos de capa, rediseñada y unificada para una mejor

experiencia. Los Estilos de capa se actualizan automáticamente en todas las capas
asociadas. Los Estilos de texto compartidos para compartir información de fuente y de
párrafo entre las capas de texto
- Nuevo diseño del inspector, que te da un acceso más rápido a todo
- Recortes automáticos y capas de exportación directa
- Exportación de múltiples resoluciones al mismo tiempo, a cualquier escala.

Las Mesas de trabajo y las Áreas de recorte permiten exportar múltiples imágenes de un
solo documento
- Modo de Presentación. Permite visualizar tu trabajo a pantalla completa,

ocultando todos los controles (perfecto para enseñar tus diseños).

9


Construido para Mac , Sketch admite las versiones de OS X y Auto Save , lo

que te permite centrarte en tu trabajo.
Compatibilidad: OS X 10.8 o posterior, procesador de 64 bits

10


2. La Interfaz
La interfaz de Sketch 3.0 tiene un diseño minimalista y es altamente personalizable. Está
creada pensando en la eficiencia del diseñador.
1. La Barra de herramientas en la parte superior contiene las acciones más

importantes (se puede personalizar con las acciones que desees).
2. El panel de la izquierda contiene todas las capas del documento.
3. El inspector de la derecha te permite ajustar las propiedades de la capa
seleccionada.
4. El lienzo de trabajo está en el medio.
No hay paneles flotantes. El inspector cambiará para mostrar las herramientas

que necesitas en cada momento, y oculta todo lo demás. De esa manera siempre tienes un
punto de vista completamente despejada del lienzo.
Lienzo
El lienzo de dibujo es de tamaño infinito. Puedes desplazarte por donde quieras en
cualquier dirección, por lo que tienes total libertad sobre la forma de configurar tu área de
trabajo.

11


Si deseas definir un marco fijo dentro del lienzo infinito, basta con insertar una o varias
Mesas de trabajo. Por ejemplo en el diseño de interfaces móviles, muchos diseñadores
crean una mesa de trabajo para cada pantalla en la aplicación y las ponen en el orden del
flujo de interacción.
Puedes ver el lienzo, tanto en una visión independiente de la resolución donde se

tiene una precisión infinita, o puedes activar la vista previa de píxeles y sabrás
exactamente cómo se verá cada pixel cuando sea exportado a un formato de mapa de bits
(como JPG o PNG).
Ten en cuenta que algunos efectos como el desenfoque, en modo de vista Previa de píxeles, presentará una
falta de definición, ya es un efecto basado en píxeles.
Navegar por el lienzo es fácil. Puedes utilizar la rueda de desplazamiento del ratón
para desplazarte por él. También puedes mantener pulsada la barra espaciadora y hacer clic
y arrastrar para desplazarte por el lienzo.
Si no has seleccionado ningún objeto, puede utilizar las teclas de flecha para moverte por el
lienzo también.
* Ten en cuenta que Page Up / Page Down cambia entre páginas.

12


Zoom en el Lienzo
Aparte de que hay varios accesos directos en el menú “Ver” para acercar y alejar el
contenido específico, también puedes mantener pulsada la tecla ⌘ y utilizar la rueda de
desplazamiento del ratón para acercar y alejar el lienzo.
Por último, puedes utilizar la tecla "Z" para ampliar rápidamente un área en particular. Haz
clic + arrastrar en cualquier lugar en el lienzo para ampliar la vista en esa zona.
Píxel zoom
Puedes ver tu diseño de dos maneras. Estos modos pueden activarse y desactivarse en el
menú “Ver”, haga clic en “Mostrar / Ocultar cuadrícula de píxeles”.
Ten en cuenta que cuando estás en el 100% de zoom (tamaño real) no hay diferencia entre
ambos modos, pero lo vas a ver cuándo te acerques.
Si te importa el aspecto de cada píxel individual en el documento, entonces este modo es

para ti. Lo que se ve es básicamente el equivalente de la primera exportación a PNG.
Si no te preocupa esto, entonces la vista por defecto es el mejor; cuando te acerques verás
que todo sigue con curvas suaves.
Opción “Acércate a una selección”
Si haces zoom a través de “Ver> Acercar / Alejar comandos”, por defecto el zoom será en el
centro del lienzo. Al activar la casilla de verificación “Acércate a una selección“ el zoom se
hará en las capas seleccionadas.
Opción “Amplía al lienzo - Anterior Posición”
Usando esta opción, el zoom cambiará a la posición que tenía en el lienzo antes de empezar
a acercarse.
Opción Retina
Las pantallas Retina para Mac y iOS utilizan cuatro píxeles físicos para representar un píxel
“tradicional”. La nueva pantalla Retina del MacBook Pro tiene cuatro veces más píxeles que
los modelos más antiguos, para mostrar los objetos en el mismo tamaño de
pantalla. Utilizan estos píxeles adicionales para proporcionar más detalle a las fuentes,
imágenes, etc.

13


Por defecto Sketch 3.0 hace lo mismo; los píxeles adicionales se utilizan para
proporcionar más detalle, pero el tamaño físico del dibujo sigue siendo el
mismo. Si no deseas este comportamiento y realmente quieres que cada píxel físico sea
representado como un píxel, desactiva la opción de “Retina en el lienzo”.
Diseño de cuadrícula
Las columnas del diseño de la cuadricula se pueden llenar, ya sea con un color (Rellenar
cuadrícula), o se pueden dibujar los bordes de las columnas (Outline Stroke)
Forzando la Previsualización de píxeles
A veces encontrarás que no se puede desactivar la vista previa de píxeles. Esto es porque el
“efecto de desenfoque” tiene que trabajar en datos de píxeles. Esto significa que la única
manera que tiene Sketch 3.0 para mostrar estos efectos es rasterizando sus
vectores. Por lo tanto la Visión independiente de la resolución ya no es aplicable,
por lo que se muestra el efecto en Vista previa de píxeles.
Reglas, guías, cuadrículas
Estas características en Sketch 3.0 ayudan a posicionar las capas en la posición exacta que
uno quiere; ya sea en una cuadrícula, líneas o entre las propias capas.

14


Guías
Por defecto, las guías automáticas están activadas en el lienzo. Ten en cuenta que se pueden
activar con el mando (^) + 'L'. Cuando haya cambio de tamaño o muevas alguna capa,
Sketch 3.0 tratará de ayudarte a alinear con otras capas automáticamente. Cuando
Sketch 3.0 encaje su capa en otra, verás una línea roja que muestra exactamente lo que
está ajustando.
Reglas
Sketch 3.0 tiene reglas, que están ocultas por defecto. Como hemos dicho antes,
Sketch 3.0 tiene un lienzo infinito y por eso los reglas no son fijas; se puede agarrar y
arrastrar las reglas en torno a definir su propio origen “cero”.
Puedes “hacer doble clic” en cualquier lugar de la regla para añadir guías manuales. Para
mover una guía, tienes que “agarrarla” dentro de la regla, y entonces puedes arrastrarla. Para
quitar una guía, arrástrala fuera de la vista y verás que desaparece con un “puf”.
Cuadrícula
Pulsa en “Ver> Cuadrícula” para activar la rejilla, y personalizarla en “Configuración”.

Sketch 3.0 es compatible con dos tipos de rejillas; una cuadrícula normal /estándar
y una cuadricula de diseño. Dependiendo del tipo de trabajo que haces en Sketch
3.0 es posible que desees utilizar uno u otro. La diferencia es fácil de ver:
• La cuadricula básica tiene ajustes para el tamaño de los cuadrados y con qué
frecuencia desea que aparezca una línea más gruesa. El tamaño de la cuadrícula por
defecto es 20 píxeles y líneas gruesas cada 10 plazas.
• En la cuadrícula de diseño se puede cambiar el ancho total de la "página" y el
número de columnas. También se puede ajustar la altura de las "filas" y el tamaño
de las columnas. Existen ajustes adicionales para el relleno.
Sketch 3.0 hará todo lo posible para colocar la cuadrícula de diseño en el centro de su mesa de
trabajo, pero después de cambiar el tamaño de la mesa de trabajo, esto puede cambiar. En ese
caso se pulsa el botón 'Center' para centrar la cuadrícula en la mesa de trabajo con facilidad.
Medición
Sketch 3.0 cuenta con excelentes herramientas integradas para asegurarte que tu
contenido está alineado correctamente. Es una gran ayuda para representar las “cotas” de un

15


interfaz. Las “cotas” son de gran ayuda para los desarrolladores, ya que les proporcionamos
todas las medidas exactas de los elementos en pixeles.
Distancia
Cuando se mantiene pulsada la tecla Opción / Alt (⌥) en el teclado, Sketch 3.0 calculará
la distancia entre la capa que has seleccionado y la capa que está flotando.
Además, al mover un objeto Sketch 3.0 te mostrará la distancia a otros objetos cuando es
igual a otras distancias existentes:
Tamaño
De la misma manera, si cambias el tamaño de una capa, Sketch 3.0 te ayudará al indicar
otras capas que tienen la misma anchura o altura.

16


Inspector de configuración
El Inspector de la derecha te permite ajustar la configuración de la capa actual, o las
opciones para la herramienta actual.
Cuando tienes una capa seleccionada, verás que el inspector está dividido en
secciones:
a. Atributos generales
Los estilos generales de capa están en la parte superior; la posición, el tamaño, la opacidad,
la mezcla y (dependiendo del tipo de capa) algunas opciones especiales, como el radio de la
esquina de un rectángulo o el número de puntos de una forma poligonal.

17


b. Atributos Estilo
Los atributos de relleno tienen cada uno su propia sección. Para agregar un nuevo relleno,
simplemente haz clic en el icono “+” en el título de la sección:
Al agregar un nuevo relleno, aparecerá un “popover” donde se puede elegir el color:

18


Puedes activar o desactivar cada relleno desmarcando la casilla de verificación de su

izquierda. Cuando uno o más rellenos están “apagados”, puedes eliminarlos “haciendo clic“
en el icono de papelera que aparece en el título de la sección:
Para cambiar las opciones de un relleno o un borde, haz clic en el icono del “engranaje”:

19


Barra de herramientas
La “Barra de herramientas” contiene todas las herramientas que necesitas
para hacer tus diseños. El primer conjunto de herramientas, en la barra de
herramientas por defecto, son para añadir nuevas capas, formas, imágenes, símbolos y más.
Las opciones “Agrupar” y “Desagrupar” son útiles para mantener tu documento organizado.
El siguiente módulo es para la edición de capas; rotación, transformación, combinación

de capas usando operaciones booleanas y mover capas “hacia atrás / hacia delante” en la lista
de capas.
El botón “Exportar” (el último icono de la Barra de herramientas) te permite exportar

tu diseño a uno o varios archivos bitmap o basados en vectores.
A diferencia de muchas otras aplicaciones de diseño, Sketch 3.0 no tiene una caja de
herramientas con las herramientas comunes, sino que se encuentran en la Barra de
herramientas.
Personalizar la barra de herramientas
Las Herramientas y accesos directos adicionales se pueden agregar a la Barra de

herramientas haciendo clic derecho y seleccionando "Personalizar barra de
herramientas...".
Páginas
Un documento puede tener cualquier número de páginas. Los símbolos y los estilos
compartidos trabajan a través de las páginas, pero no entre documentos.
Otra razón para el uso de múltiples páginas tiene que ver con el rendimiento. Sketch
3.0 puede manejar fácilmente una docena de mesas de trabajo en la página, pero en
función de su contenido, el tamaño y el número de ellos, puede que te resulte beneficioso
dividir el trabajo en múltiples páginas.

20


Mesas de trabajo
Las “Mesas de trabajo” te permiten crear marcos fijos sobre el “lienzo
infinito” de Sketch 3.0, pero son completamente opcionales.
Si estás haciendo un diseño para web, es posible que quieras diseñar para diferentes tamaños
de pantalla. Puedes definir cada tamaño de pantalla en una mesa de trabajo. Si estás
haciendo iconos es posible que desees limitar a cualquiera de los tamaños de los iconos por
defecto; puede crear una mesa de trabajo para cada uno.
Las “Mesas de trabajo” son como un tipo especial de grupo. Siempre están
"abiertos"; nunca tendrás que hacer doble clic para ver su contenido, y no cambia el tamaño
para adaptarse a los contenidos en el interior.
Añadir mesas de trabajo
Para crear una mesa de trabajo, selecciona “Insertar> Mesa de trabajo” de la Barra de
herramientas o menú. El inspector te mostrará algunos tamaños de mesa de trabajo
comunes a las pantallas de iOS y otros tamaños prestablecidos.
Selecciona un valor preestablecido para insertarla en el lienzo, o “haz clic” en la cabecera de

un grupo de “presets” de la mesa de trabajo para insertar todos a la vez. También puedes
agregar tus propias configuraciones en la parte inferior del inspector.
Si después de haber insertado una mesa de trabajo, deseas insertar más mesas de trabajo de
ese tipo, puedes pulsar “cmd + D” hasta que tengas el número de mesas de trabajo que
deseas.
Sketch 3.0 no permite seleccionar mesas de trabajo sobre el lienzo si tienen contenido en
su interior, pero se puede seleccionar una mesa de trabajo en la lista de capas y luego puedes
arrastrarlo por el lienzo (haz clic sobre el nombre de la mesa de trabajo en el lienzo y
arrástralo), o cambiar su posición o el tamaño en el inspector.
Rejillas y Reglas
Las Mesas de trabajo actúan como sus propios lienzo dentro del “lienzo infinito”, cada
Mesa de trabajo tiene sus propias reglas y cuadrículas opcionales, lo cual es especialmente
útil si estás combinando las mesas de trabajo de tamaño múltiple en un lienzo; una para
cada “punto de ruptura” en un diseño responsive, por ejemplo.

21


Plantillas
Un buen ejemplo de uso de las mesas de trabajo se puede ver en las plantillas que presenta
Sketch 3.0 por defecto. Ir a “Archivo> Nuevo desde” plantilla en el menú. Si escoges la
plantilla "Mac App Icon" verás que existe una mesa de trabajo para cada uno de los tamaños
comunes.
Mesas de trabajo
Las “Mesas de trabajo” en Sketch 3.0 también pueden ser exportadas directamente. Sólo
tienes que añadir un tamaño de exportación a la mesa de trabajo y la próxima vez hacer clic
en “Exportar”, Sketch 3.0 incluirá las mesas de trabajo también.
Cuando haces clic en “Exportar”, por primera vez, y tienes algunas mesas de trabajo en tu
lienzo, Sketch 3.0 asumirá que deseas exportarlas y las hará exportables automáticamente.
Impresión
Las Mesas de trabajo y las Secciones en Sketch 3.0 se pueden imprimir. Ves
a “Archivo> Imprimir”, y obtendrás una lista de las mesas de trabajo, o secciones si no tienes
mesas de trabajo. El cuadro de diálogo de impresión estándar aparecerá y serás capaz de
imprimir.
Ten en cuenta que existen tamaños de mesa de trabajo por defecto para A4 A5 y formatos de
papel A6.
Lista de capas
La lista de capas contiene una lista de todas las capas (incluyendo “secciones”) en la página
actual y muestra una pequeña vista previa de cada uno. También puedes ver cuál está
bloqueada, invisible, tiene una máscara, o esta marcada para la exportación. Aquí puedes
cambiar el orden de capas y seleccionar “Operaciones Boleanas” para crear subtrazados de
una forma. También puedes agrupar capas o cambiar el nombre de las mismas para
mantener tu documento organizado.
Varias páginas
Sketch 3.0 tiene soporte para múltiples páginas y tu puedes agregar / quitar o cambiar a
otras páginas usando la pequeña ventana emergente que hay por encima de la lista de capas
(también puedes usar las teclas Re Pág / Av Pág del teclado). La lista de capas siempre
muestra las capas de sólo la página actual.

22


Mesas de trabajo
Las Mesas de trabajo se muestran con un fondo blanco en la lista de capas.
Máscaras
Las capas que tienen una máscara aplicada mostrarán un pequeño punto en la lista de
capas antes de su nombre y de su vista previa. La capa a la que se le aplica la máscara es la
primera capa por debajo de ella y sin un punto.
Operaciones booleanas
Las formas pueden contener múltiples subtrazados. Si es así, se muestran como un grupo en
la lista de capas, con una flecha para mostrar las sub-rutas. Cada sub-ruta de acceso puede
tener una operación booleana aplicada a ella que dicta la forma en que se combina. La lista
de capas es una buena manera de obtener una visión general de cómo los subtrazados
trabajan juntos para lograr el resultado final.

23


Símbolos y Estilos Compartidos
Los “Símbolos” son un tipo especial de grupo, que puede existir en un documento
en varios lugares. Están identificados por el icono de la carpeta púrpura en la “Lista de
capas” (en contraposición a una azul para las carpetas normales)
Los “Estilos compartidos” se utilizan para mantener un estilo consistente

en un documento y se pueden aplicar a formas y a capas de texto. Para indicar que una
capa de forma o de texto está usando un “Estilo compartido”, su vista previa se muestra
en un color púrpura en lugar de la sombra gris oscuro.

24


3. Las Capas en Sketch 3.0

Las capas son los bloques básicos de construcción de contenido en Sketch
3.0.
A diferencia de otras aplicaciones, no existe una distinción entre las capas y los objetos; cada
objeto esta siempre en su propia capa.
Los grupos y mesas de trabajo se utilizan en Sketch 3.0 para mantener su

contenido organizado y también son tratados como capas.
Para empezar a añadir nuevas capas al documento, “haz clic” en el icono “Insertar la barra
de herramientas” o ves al menú “Insertar” en el menú global de la aplicación.
Añadir capas
La forma más sencilla de añadir una capa es escoger una de las opciones existentes en la
Barra de herramientas. “Haz clic” en la forma de rectángulo y verás que el cursor
cambia a un cursor en forma de cruz con un pequeño cuadrado en la parte superior
derecha.
Ahora “haz clic” en el lienzo y arrastra. Cuando se suelta el ratón se insertará la forma y ya
puedes comenzar a manipularlo.

25


Opciones avanzadas
Como se puede ver, el proceso de inserción es fácil, pero hay algunos atajos ocultos que le dan un
cierto control adicional. Por ejemplo, puedes mantener pulsada la tecla de mayúsculas (⇧) para
hacer una nueva forma cuadrada.
Del mismo modo, puedes mantener la tecla de opción (⌥) para poner el centro de la nueva
forma en el punto de su ratón (en lugar de la parte superior-izquierda).
Si decides que has colocado el origen de la nueva forma ligeramente descuadrada, mantén
presionada la barra espaciadora. Mientras que la barra espaciadora esté pulsada podrás
arrastrar el origen de la forma en lugar de cambiar su tamaño.
Selección de Capas
La “Selección de capas” en Sketch 3.0 es muy sencilla; basta con “hacer clic” sobre la
capa. Una vez que se selecciona la capa, deberías ver 8 pequeños tiradores; uno en cada
esquina y una en cada borde.
Nota: Si no ves estos tiradores, pero estás seguro de que has seleccionado la capa, es posible
que hayas ocultado accidentalmente los controles de selección. Para activarlos, ves
a “Ver> Mostrar selección” en el menú.
Selección de varias capas

Para seleccionar varias capas, mantén pulsada la tecla de mayúsculas (⇧) en el teclado. Si
“haces clic” en otra capa, preservará su selección original también. Si mantienes ⇧ y haces
clic en una capa ya seleccionada, se anulará la selección.
“Haz clic” + arrastrar desde un área vacía del lienzo para seleccionar todo lo que cabe en el
rectángulo. Una vez más, si tienes o ⇧ ⌘ presionado, ampliarás la selección o podrás anular
la selección de todos los objetos ya seleccionados.
Si mantienes pulsada la tecla alt (⌥), podrás seleccionar las capas que se encuentran dentro
de los límites del rectángulo. Compara las imágenes de abajo. A la izquierda: ⇧ +
arrastrar. Derecha: ⇧ + arrastre con ⌥.

26


Capas superpuestas
Para que sea más fácil seleccionar una capa que está bajo otra capa, puedes hacer clic en el
botón derecho y seleccionar 'Recogida de capa "en el menú. Aparecerá una lista con cada
capa que se encuentra bajo el puntero del ratón.
Un atajo para esto es “⌥”. Cuando se mantenga pulsado, Sketch 3.0 seleccionará la segunda
capa debajo del ratón en lugar de la primera. Si hay varias capas superpuestas y desea seleccionar
la tercera entonces tendrás que ir a través del menú contextual, como se describe más arriba, pero
en algunos casos esto puede ser un truco muy conveniente.
Mover capas
Puedes mover una capa seleccionada y moverla con el ratón.
Para restringir el movimiento a un eje determinado, manten presionada la tecla ⇧ cuando

se arrastra.
A medida que mueve (o cambia el tamaño) de su capa, Sketch 3.0 alinea

automáticamente su capa a las capas adyacentes.
Si esto no ocurre, es posible que tengas desactivadas las guías de capa. Para activarlas ves a “Ver>
Guías Mostrar Capa” en el menú.
Si mantienes presionada la tecla ⌥ antes de empezar a arrastrar, creas una copia de la capa,
dejando la capa original en su lugar. (Si a continuación, presionas inmediatamente cmd + D

27


(duplicado) de nuevo Sketch 3.0 insertará otra capa duplicada con el mismo desplazamiento de
su primer duplicado.)
Objetos duplicados
Por defecto, Sketch 3.0 coloca un objeto duplicado a 10px del original. Si desactivas esta
opción, se pegará directamente en la parte superior del original.
Cambiar el tamaño de las capas

Los 8 tiradores no sólo indican la selección; también se puede usar para cambiar el tamaño
de una capa. Coge cualquiera de los tiradores y arrástralos para cambiar el tamaño de la
capa.
Si además mantienes pulsada la tecla Shift (⇧) se redimensionará la capa

proporcionalmente manteniendo la anchura y la altura en la misma proporción.
Para cambiar el tamaño (sólo la anchura o la altura de una capa) usa los controladores de
tamaño de los lados de la capa. Para cambiar el tamaño en ambas dimensiones, utiliza los de las
esquinas.
Si mantienes pulsada la tecla Alt (⌥) se cambiará de tamaño desde la mitad hacia fuera en
lugar de desde la esquina opuesta.
También puede cambiar el tamaño de la capa a través del teclado. Para ajustes
que necesiten de píxeles precisos, el teclado suele ser más fácil que usar el ratón.
Para ello, mantén presionada la tecla ⌘ y utiliza las teclas de flecha del teclado. ⌘ →
aumentará la anchura de la capa por 1px tan ⌘ ← disminuirá por uno. Del mismo
modo, ⌘ ↓ y ⌘ ↑ aumentará y disminuirá la altura 1px respectivamente. Si mantienes
pulsada la tecla Mayúsculas cambia el incremento 1px a 10px lugar.
Escalado de propiedades
Al cambiar el tamaño de una capa, ciertas propiedades no se escalan como la capa (un trazo
1px en una forma 10x10 permanecerá un trazo 1px cuando la capa se cambia el tamaño de
50x50).

28


Para cambiar el tamaño de una capa y sus propiedades de una sola vez, utiliza Editar>
Escala en lugar del menú en su lugar.
Edición de Capas
Para editar una capa, haz “doble clic” en el lienzo o haz clic en el botón “Editar” en la barra
de herramientas.
Ten en cuenta que puedes salir de la edición de capa haciendo clic fuera de la capa o
pulsando Return o Escape.
Agrupación de Contenido
Además de la capa básica, como formas, imágenes y texto, Sketch 3.0 tiene algunos tipos
especiales de capas que son realmente útiles en la organización y la presentación de su
exportación.
La organización adecuada de capas puede ayudar en la Exportación.
Grupos de capas
Los grupos son una forma muy interesante de evitar modificaciones
accidentales.
Las capas del documento se pueden agrupar de forma que aparezcan como una sola
capa. Puedes mover y cambiar el tamaño como una sola capa y, sin embargo todavía se
puede entrar en el grupo y cambiar las capas individuales.
Se crea un grupo seleccionando una o más capas. Luego “haz clic” en el icono del grupo en
la barra de herramientas y Sketch 3.0 creará un nuevo grupo con esas capas. También
puedes arrastrar objetos entre los grupos en la lista de capas.
Puedes hacer “doble clic” en un grupo para ver su contenido y seleccionar sus capas. Hay
situaciones en las que quieres seleccionar una capa de inmediato, aunque esté enterrada
profundamente dentro de una jerarquía de grupos.

29


Para ahorrar mucho haciendo “doble clic” mientras se desciende más y más en la jerarquía del
grupo, en su lugar puedes mantener presionada la tecla ⌘ y seleccionar esa capa.
Si mantienes presionada la tecla de mayúsculas, podrás extender tu selección como se describe en

la sección anterior.
Click-Through
De forma predeterminada una capa interior de un grupo no se puede seleccionar
directamente, sin antes hacer “doble clic” en el grupo. Si mantienes presionada la tecla ⌘,
podrás seleccionar directamente las capas anidadas en grupos.
Si sólo vas a usar grupos como un componente organizacional en la lista de capas y no

quieres tener que hacer doble clic todo el tiempo, puedes habilitar este comportamiento en
el inspector e incluso ajustarlo en las preferencias globales donde se puede definir este
comportamiento para los nuevos grupos.
Por defecto, el “clic-through” está desactivado para las nuevas capas, pero se puede
activar. A partir de entonces, cualquier grupo que crees lo tiene activado.
Redimensionar Proporcionalmente
Las proporciones (anchura / altura) de los nuevos grupos se pueden bloquear. Si está
bloqueado, Sketch 3.0 mantendrá la anchura y la altura proporcionalmente. Si no está
bloqueado, se puede cambiar el tamaño de los grupos.

30


4. Formas (Shapes)
El tipo más común de las capas en un documento son las formas. Hay una gran variedad
de formas predeterminadas incluidas en Sketch 3.0, tales como círculos, rectángulos,
estrellas y muchas más. Algunas de estas formas tienen opciones adicionales, tales como las
esquinas redondeadas en los rectángulos y las formas de la estrella.
Para añadir una nueva forma a tu documento, simplemente “haz clic” en “Insertar> Forma” en
la barra de herramientas y elige una de las alternativas disponibles.
“Haz clic” y arrastra en cualquier parte del lienzo para insertar la forma. Mientras que estás
arrastrando el ratón para insertar el Sketch 3.0, se indicará el tamaño de la forma a
insertar. Suelta el ratón y se añadirá la forma final. Verás la actualización del inspector de
configuración y se mostrarán algunas opciones adicionales para esta forma.
Opciones adicionales
Algunas de las formas predeterminadas en Sketch 3.0 vienen con algunas opciones
adicionales interesantes. Por ejemplo, la forma de rectángulo redondeado o la estrella. Para
la forma de estrella puedes cambiar el radio y el número de puntos. Para el rectángulo
redondeado, se puede definir el radio de las esquinas.
Cómo editar Formas

El bloque básico de una forma es un punto. Los puntos están conectados por
líneas. Siempre que crees una nueva forma o edites una ya existente, se está interactuando
con los puntos directamente, y las líneas que se dibujan entre esos puntos es lo que se ve en
pantalla. A veces las líneas entre los puntos son líneas rectas (una línea) y en otras ocasiones
se doblan (una curva).
Inserta un rectángulo desde la barra de herramientas, ves a “Insertar> Forma>

Rectángulo”. Insértala en el lienzo y posteriormente haz “doble clic” en él para iniciar la edición.
Verás un tirador en cada una de las esquinas. Puedes “hacer clic” en estos puntos y arrastrarlos
para cambiar su posición. Verás que el resto de la forma cambia en consecuencia. Puedes “hacer
clic” en cualquier parte de una línea entre dos puntos para insertar un nuevo punto y, a
continuación, puede moverse de forma independiente también. Para eliminar un punto, “haz
clic” en él y pulsa la tecla de retroceso / retorno de tu teclado.

31


Si deseas líneas curvas en lugar de rectas, puedes hacer “doble clic” en un punto. Verás dos
pequeñas asas que aparecen a ambos lados del punto. Estos puntos de control controlan la
curvatura de la línea en cada lado. Piensa en estos pequeños puntos de control como si se
estuvieran tirando la línea hacia ellos...
Diferentes Modos
Hay diferentes maneras en que los puntos limitan el movimiento de sus puntos de control
y, a su vez, el tipo de las líneas que se producen entre ellos.
Durante la edición de una forma, verás que el inspector muestra cuatro modos
diferentes para el punto; recto, reflejado, desconectado y asimétrico.

32


! Recto: Si aplicas el primer modo en tu forma, obtendrás pequeños puntos de

control y, básicamente, una línea recta.
! Reflejado: Los puntos de control se reflejan entre sí. Son opuestas entre sí y se
mantienen a la misma distancia del punto principal. Si el modo de los vectores no
es recto, esta es la opción predeterminada.
! Asimétrico: La distancia entre los puntos de control y el punto principal es
independiente, pero sí se reflejen mutuamente.
! Desconectado: Los puntos de control son totalmente independientes entre sí.
Dibujo frente a Edición

En lugar de comenzar con una forma predefinida, también puedes dibujar una forma
desde cero utilizando la “Herramienta de Vector”. Haz clic en “Insertar> Vector” de la
Barra de herramientas y después “haz clic” en cualquier lugar del lienzo para agregar tu
primer punto. “Haz clic” en otro lugar para añadir el segundo.
Verás que una línea conecta ahora a ambos. Ahora “haz clic” en otro sitio, pero mantén
pulsado el ratón mientras arrastras para dibujar una curva. Puedes dibujar unas líneas más y
al “hacer clic” de nuevo en la primera línea cerrarás la forma y terminarás la edición.
La selección de puntos, la inserción de puntos en las líneas, y todo lo demás, es exactamente

lo mismo, ya sea que estés editando una forma existente o dibujando una nueva.
Cerrado vs Abierto
Un trazado puede estar cerrado o abierto. Cuando está cerrado, la última línea en
el camino conecta de nuevo a la primera. Cuando un camino está abierto, se deja un

33


espacio entre el último punto y el primero. Puedes convertir un trazado cerrado a uno
abierto y viceversa yendo a “Capa> Trazados> Cerrar trazado” en el menú.
Siempre que estés en el modo de edición de la forma, puedes añadir nuevos puntos a una
ruta, siempre y cuando la forma sea abierta.
Ten en cuenta que cada vez que se aplica un estilo de relleno a una forma, el relleno se
dibujará como si el camino estuviera cerrado.
Accesos directos
Si mantienes pulsada ⇧ antes de insertar un nuevo punto al final de un vector, se alinea a 45 °
con el punto anterior, ideal para dibujar líneas rectas
Si mantienes presionada la tecla ⌘ y “haces clic” en una línea entre dos puntos Sketch 3.0
insertará el punto exactamente en el medio de la línea.
Selección múltiple
Para seleccionar varios puntos a la vez, manten pulsada la tecla ⇧ mientras “haces clic” en
los puntos. Vas a ver que el punto seleccionado tiene un centro de color blanco, mientras
que los no seleccionados son de color gris.
Otra forma de seleccionar varios puntos es mantener pulsada ⇧ y luego “hacer clic” y
arrastrar desde un área vacía en la vista para hacer una selección rectangular. Si todavía estás
pulsando ⇧ cuando sueltas se extenderá la selección que tenías antes de arrastrar con los
puntos recién seleccionados.

34


Operaciones booleanas
Cuando una forma que necesitas no se encuentra entre las formas estándar, tendrás que
crearla tu mismo. El primer impulso podría ser la de utilizar la herramienta de vectores y
dibujar la forma de la nada. Es más sencillo utilizar “Operación booleanas”. Con las
operaciones booleanas, puedes combinar formas básicas para crear formas mucho más
complejas.
Subtrazados
Sketch 3.0 tiene operaciones booleanas dinámicas y antes de que podamos hablar de estas
en mayor detalle vamos a revisar rápidamente las formas vectoriales. La mayoría de las
formas vectoriales en Sketch 3.0 constarán de una sola serie de puntos; un camino por
así decirlo. Sin embargo, una forma puede tener tantos subtrazados como quieras y la forma
en que la forma resultante se verá depende de cómo estos se combinan.
Cuando haces una operación booleana en Sketch 3.0, se sumará la forma superior como
subtrazado de la segunda forma. Dado que las operaciones booleanas en Sketch 3.0 son
dinámicas siempre se pueden ajustar los subtrazados y si una de sus formas es un
rectángulo, se puede ajustar el radio de la esquina únicamente para este subtrazado.
Operaciones
Hay cuatro operaciones booleanas diferentes y puedes elegir uno dependiendo de tu
situación.
! Unión: El resultado de una operación de unión es un vector que es la suma de las

áreas de los dos vectores.
! Resta: El resultado de una operación de resta es un vector donde se elimina el área
de la forma superior de la persona menor de ella.
! Intersección: El resultado de una operación de intersección es un vector que
consiste en las partes donde las formas originales se superponen.

35


! Diferencia: El resultado de una operación de diferencia es un vector que es

exactamente la parte en la que no se superponían. Es el inverso de una operación de
intersección.
Lista de capas
Cuando tienes una forma con múltiples subtrazados en tu lienzo, puedes ver la forma en la
lista de capas. Al igual que con los grupos normales, verás una flecha en la izquierda y si
despliegas verás una lista de subtrazados de la forma. En el lado derecho puedes elegir una
operación booleana para cada subtrazado individualmente.
Como la lista de capas se ordena de abajo hacia arriba; el orden de las subtrazados es el
mismo. La operación booleana que elijas va a combinar la capa con la capa de abajo. El
resultado pasará al subtrazado de arriba si hay alguno.
Acoplar capas
Al acoplar una forma de Sketch 3.0, se tratará de representar los múltiples caminos
dentro de la forma como una ruta; será, por así decirlo, “acoplar” la jerarquía. Sin embargo,
hay muchos caminos que no pueden ser acoplados en uno solo. Una forma con un agujero
en su interior siempre tendrá que ser representado como dos caminos; una para el camino
exterior, y una para el camino interior.
Cuando Sketch 3.0 no puede acoplar un camino te avisará cuando intentes hacerlos. Si
persistes en el acoplamiento de todos modos, los subtrazados serán reemplazados por
diferentes subtrazados, tal vez con menos caminos.

36


En otras aplicaciones de diseño, después de aplicar una operación booleana, el resultado se

acopla. En Sketch 3.0 no ocurre así; se pueden aplicar múltiples operaciones booleanas
sin la necesidad de acoplar.
Transformar
La herramienta de transformación puede ser utilizada para distorsionar un vector existente
sesgando los puntos o mediante la creación de un efecto 3D falso. Puedes utilizar la
herramienta de transformación para transformar una o varias capas a la vez.
Selecciona una o más capas y “haz clic” en el botón “Transformar” de la Barra de

herramientas. Coge uno de las cuatro esquinas para transformar libremente la forma o tomar
un punto en el medio para mover dos esquinas al mismo tiempo para sesgar la capa.
Al transformar una forma desde una esquina te darás cuenta de que la esquina opuesta
siempre se mueve en la dirección opuesta también. Esto hace que sea fácil de aplicar efectos
de perspectiva. Sin embargo, si deseas ajustar en una sola dirección, manten presionada la
tecla ⌘ mientras arrastras.
Mascaras
Las máscaras en Sketch 3.0 se utilizan para mostrar selectivamente partes de otras capas.
Por ejemplo poniendo una máscara circular en una imagen sólo mostrará la parte del
interior del círculo.

37


Cualquier forma puede convertirse en una máscara. Para ello, selecciona la forma y ves
a “Editar> Usar” como máscara en el menú. Cualquier capa por encima de la máscara se
recorta a su contenido.
La restricción de las Máscaras

Si no quieres que se aplique la mascara a todas las capas, la mejor manera de restringir la
"influencia" de la máscara es poner la máscara y las capas que deseas recortar dentro
de su propio grupo. Cualquier cosa por encima del grupo no se recortará si la máscara se
encuentra dentro del grupo.
A veces, la agrupación no es una opción. Otra manera de detener una máscara es hacer lo
siguiente:
1. Selecciona una forma enmascarada pero que no deseas enmascarar.

2. En el menú ir a Edición> Ignorar Máscara Subyacente
Esta capa y las capas anteriores no serán enmascaradas. Eso si, ten cuidado al reordenar
capas.
Máscara con Forma

Si te parece mucho trabajo para enmascarar una imagen, hay otra opción: Selecciona una
forma y una imagen en el lienzo y ves a “Edición> Máscara” con la figura seleccionada para
usar la forma como una máscara en la imagen. Sketch 3.0 pondrá ambas capas dentro de
un nuevo grupo y convertirá la forma en una máscara. Básicamente se automatizan los
pasos indicados anteriormente.

38


Máscaras con Alpha

Por defecto, una máscara funciona mostrando su superficie y ocultando el resto. Otra forma
de trabajar con una máscara es darle un degradado, y utilizar la opacidad de ese gradiente
para determinar lo que debe ser visible y lo que no debe ser.
Este segundo modo está disponible para las máscaras de selección de su máscara y luego ir
a “Edición> Modo Máscara> Máscara Alfa”.
Tijeras
La herramienta “tijeras” se puede utilizar para cortar las líneas de una forma vectorial
existente. Selecciona una forma existente y “haz clic” en el icono de las tijeras en la barra de
herramientas o ves a “capa> Trazados> Tijeras” en la barra de menú.
A continuación, “haz clic” en la línea de la forma vectorial para cortar la misma. Cuando
hayas terminado, “haz clic” fuera de la forma o pulsa Enter / Esc para salir de la
herramienta de tijeras.
Copiar-Rotar
Esta herramienta es especial en Skecth 3.0. No está en la barra de herramientas por
defecto, pero puedes añadirla “haciendo clic derecho” en la barra de herramientas y
seleccionando Personalizar. También está disponible en el menú “Capa> Copias
trazados> Rotar”.

39


Esta herramienta toma una capa y hace copias, rotando alrededor de un punto
determinado. Tomemos el ejemplo de una flor; creas una sola hoja, a continuación, giras
una docena de copias en el centro y tendrás una flor
Selecciona una capa, activa la herramienta “Rotar Copias”, introduce el número de copias y
cierra el cuadro de diálogo. A continuación, coloca el punto central donde quieras y “haz clic”
fuera o desactiva la herramienta para salir de ella.
Splitting
Todas las formas se añaden como subtrazados de la forma original. Si prefieres tener la
forma en capas separadas, ve a “Editar> Trazados> Split” en el menú para convertirlas en
capas separadas.
Lápiz
La herramienta Lápiz permite dibujar libremente. Después de soltar el ratón, Sketch 3.0
tratará de suavizar las curvas y simplificar el camino.
Puedes encontrar el lápiz en el icono “Insertar” en la barra de herramientas o en la barra de

menú en “Insertar” también.
*Un atajo rápido para la herramienta Lápiz es la tecla 'P'.

40


Ancho de trazo
La herramienta “Ancho de trazo” te permite establecer anchos variables a tus
trazados. Selecciona un vector y aplícale un borde mediante el inspector. A continuación,
activa la herramienta “Anchura del trazo” utilizando “Capa> Trazados> Ancho de trazo” en
la Barra de menú. Ahora haz clic en el trazado para establecer un punto de ancho. Puede
arrastrar este punto fuera del trazo para que el ancho sea más grande o más pequeño.

41


5. Texto
Capas de texto
Sketch 3.0 utiliza la representación de la fuente nativa del sistema operativo y por eso, la
visualización del texto es perfecta. El beneficio de la representación de la fuente nativa es
que cuando estás haciendo un diseño de sitio web, estás seguro de que la visualización del
texto es real. Sketch 3.0 también es compatible con los estilos de texto para que
múltiples capas de texto compartan el mismo tipo de letra, tamaño, kerning, etc..
Añadir texto
Puedes añadir texto “haciendo clic” en el icono de “Texto” en la barra de herramientas. El
cursor cambia a un “cursor de texto” y entonces puedes “hacer clic” en cualquier parte del
lienzo para insertar la capa de texto en ese punto. Verás que se añade el texto y se selecciona
para que puedas empezar a escribir inmediatamente.
También puedes “hacer clic” y arrastrar para crear un cuadro de texto de un tamaño
fijo. Cuando el texto se hace demasiado grande para caber dentro de la caja, se cambiará el
tamaño hacia abajo, en lugar de un cuadro de texto normal, lo que aumenta su anchura
para adaptarse al contenido.
Cambiar el tamaño del texto

Al cambiar el tamaño de un cuadro de texto en el lienzo su tamaño del texto no cambiará,
excepto cuando se cambia el tamaño del ancho automático utilizando el controlador de
ajuste en la parte inferior.
Inspector del texto

Cuando tienes una capa de texto seleccionada, te darás cuenta de que el inspector ha
cambiado para mostrar todas las propiedades que se aplican al texto, incluida el área
de estilos de texto compartidas.

42


Debajo de esta área puedes escoger el tipo de letra y el peso. Y puedes utilizar el pequeño
botón “T” para acceder a las listas y las decoraciones, tales como subrayados y tachados. Un
poco más adelante se encuentra la separación del Carácter (kerning), de Línea (espacios
entre líneas) y de párrafo (el espacio entre retornos).
Color del texto

Cuando estás editando texto, puedes aplicar colores específicos para el texto. Puedes hacerlo
a través de la pequeña caja de color entre el tamaño de la fuente y las opciones de texto “T”.
También puedes aplicar un estilo general de llenado de la capa de texto, como un

degradado. Sin embargo, cualquier relleno aplicado aquí, se aplicará a la totalidad de la capa
de texto y anulará cualquier cosa que se establezca en el cuadro de color.
Ten en cuenta que para hacer gradientes en el texto, tenemos que convertirlo en una forma
vectorial y esto hará que se pierda el subpixel-antialiasing .
Auto vs Fijo
La propiedad de ancho (en la alineación) se puede establecer en “automático o fijo”.
Cuando se ajusta en automático, la anchura de la caja de texto se ampliará lo máximo
posible para encajar el texto que has introducido. Cuando está configurado como fijo, se
ajustará el texto a su ancho actual.

43


Rendering
Sketch 3.0 utiliza la representación de la fuente nativa del sistema operativo y por eso, el
texto se visualiza perfecto. El beneficio de la representación de la fuente nativa es que
cuando estás haciendo un diseño de sitio web la visualización del texto es real.
El sistema utiliza una técnica llamada subpixel-antialiasing para mejorar la

representación de texto y Sketch 3.0 utiliza esta técnica también. Sin embargo, hay
algunas complicaciones con esto, y para entender su por qué, tenemos que ver como
funciona la tecnología subyacente.
Subpixel-antialiasing
Una pantalla de ordenador se compone de una cuadrícula de píxeles. El problema al que se
enfrenta en la representación de texto, es que en las pantallas normales no hay suficientes
píxeles para dibujar las curvas de forma precisa. Por eso, se utiliza el anti-aliasing; se
iluminan ligeramente píxeles que sólo están parcialmente cubiertos por las curvas para dar
la apariencia de suavidad.
Antialiasing Sub-pixel va un paso más allá, teniendo en cuenta que un píxel en una
pantalla en realidad consta de tiras verticales rojas, verdes y azules. Así que en lugar de
iluminar todo el pixel, antialiasing sub-píxel ilumina sólo la parte de color rojo o azul.

44


Es por eso que si realmente ampliamos el texto en el modo de píxeles se puede ver bordes
azules y marrones a el texto. Viendo el texto en su tamaño real se obtiene un buen
resultado. Los usuarios que vienen de Windows no utilizan antialiasing sub-pixel y a
menudo piensan que el Mac hace que las fuentes “como gordas".
Cuando se produce un error

Para utilizar antialiasing sub-pixel, el texto se ha de elaborar con un color de fondo
opaco, porque el sistema necesita como se vera el resultado final. Esto entra en
conflicto con la fusión de la capa. Sketch 3.0 tiene que hacer todas las capas con
un fondo transparente. De esa manera las capas se mezclan como se esperaba y entonces el
resultado final se puede representar de nuevo en el lienzo de Sketch 3.0.
Así que esto nos plantea un problema; no podemos representar las fuentes Subpíxeles
antialiased sin un fondo opaco, y no podemos hacer con precisión la fusión de capas con
uno.
Puedes evitar esto poniendo tu texto en la parte superior de algo que sea opaco, como una
forma con un relleno o una imagen.
Exportación
Otro problema con la transparencia sucede en la exportación. En el lienzo, Sketch 3.0
puede representar el texto detrás de un fondo opaco, por lo que todo funciona bien.
Sin embargo, cuando se exporta una capa de texto a un archivo PNG y mantienes el fondo
transparente te darás cuenta de que el texto se ve diferente; porque el fondo es transparente
no se crear la capa con subpixel-antialiasing.

45


Al igual que en el caso anterior, se puede evitar esto poniendo su texto en la parte superior
de algo que sea opaco, como una forma con un relleno o una imagen. Sin embargo, el área
detrás del texto tiene que ser transparente. Simplemente no hay forma de evitar esto, por
desgracia, por lo debemos tenerlo en cuenta cuando se vaya a exportar.
Diseñar para iOS

Cuando Apple presentó el iPhone decidieron no hacer ningún texto en el dispositivo con
subpixel-antialiasing. La razón de esto se remonta a la forma en que los colores rojo,
verde y luces azules componen un píxel.
Como sabréis, el iPhone se puede girar y esto significa que las verticales rojo / verde / azul
de los píxeles de repente se encuentran “apilados” horizontalmente. Y con esto la técnica de
los subpíxeles se desmorona. Apple aún podría hacerla en modo vertical y desactivarlo en el
horizontal, pero decidieron mantener la experiencia consistente entre el Portrait y
Landscape.
Cada vez que estés diseñando una interfaz para iPhone o iPad tienes que tener esto en
cuenta; en el lienzo de Sketch 3.0 se utiliza subpixel-antialiasing, sin embargo en el
dispositivo no se representará de esta manera. Debes decirle a Sketch 3.0 que no utilice
subpixel-antialiasing, y puedes hacerlo en las Preferencias.
Ir a “Sketch 3.0 > Preferencias” en el menú, y en la ficha “General”, desactiva la opción

“Suavizar Fuentes Sub-pixel”.
El texto en contornos
Al convertir texto en contornos te darás cuenta de que el texto se hace un poco
diferente. Una vez más, esto es debido a subpixel-antialiasing. El sistema utiliza esta
técnica para el texto, no para las formas.
Estilos Compartidos
A menudo es aconsejable mantener el mismo estilo en múltiples capas de texto. Para ello, se
puede definir cualquier número de estilos de texto en el documento y las capas que se
ajustan a este estilo se mantienen siempre sincronizadas.

46


Ten en cuenta que existen Estilos de texto en función de cada documento. No puedes
compartirlos entre documentos pero están disponibles entre todas las páginas y mesas de trabajo
del documento.
Creación de Estilos
Para crear un estilo de texto, selecciona una capa de texto, y ves a “Capa> Crear estilo
compartido” en el menú. Verás que el inspector se actualiza para mostrar el nuevo estilo de
texto aplicado a la capa. Aquí también puedes darle un nombre propio.
Cualquier atributo que cambia en el texto (excepto la cadena de texto en bruto en sí) se
sincroniza automáticamente a través de las otras capas de texto con ese estilo.
Nuevas Capas
Puedes agregar una capa de texto y luego en el inspector aplicar el estilo creado
previamente. Una forma más rápida de insertar una capa de texto con un determinado
estilo de texto es ir a “Insertar> Texto con estilo” y elegir su estilo. A continuación, puedes
insertar esta capa de texto del modo habitual.

47


Texto en recorrido
Sketch 3.0 puede hacer que el texto siga un recorrido concreto, como el siguiente
ejemplo:
Hay dos cosas que necesitamos para que esto funcione; una forma vectorial y una capa de
texto. Si habilitas “Texto en recorrido”, Sketch 3.0 pondrá la capa de texto en la línea de
la forma del vector que tenga debajo de ella. Ten en cuenta que esto solo funciona si la forma
vectorial está por debajo de la capa de texto; el orden de las capas tiene que ser tal que la capa de
texto se sienta en la parte superior de la forma de vector.
La colocación de la capa de texto en el vector es tan fácil como arrastrar horizontalmente a

través de la forma.
Convertir en contornos
El texto puede ser convertido a formas utilizando “Texto> Convertir texto en contornos” en el
menú. A continuación, puedes editar los trazados y los puntos individuales como lo harías
con cualquier otra forma.

48


ADVERTENCIA
No debes vectorizar largas cadenas de texto, ya que ralentizan considerablemente el documento.
La conversión de una simple cadena de texto en contornos, da como resultado, muchos pequeños
subtrazados y calcular operaciones booleanas es muy, muy costoso para el sistema. Si es necesario,
puedes dividir el texto en tantas capas de texto como sea posible, y convertirlos uno a uno.
Ya que se pueden aplicar gradientes y otros efectos a un texto, no hay necesidad de convertir en
trazados.
Los campos de texto

Los campos de texto en el inspector no son campos de texto normales. Si pasas el ratón por
encima de ellos verás que aparecerán “flechas arriba y abajo” en la derecha del campo de
texto. Puedes “hacer clic” en esas flechas para aumentar o disminuir el valor rápidamente. Si
pulsas Mayúsculas, Sketch 3.0 incrementará o disminuirá el valor de 10 en 10.
Arriba y Abajo
Una vez que estés editando directamente los campos de texto, las flechas arriba y abajo
habrán desaparecido, pero su funcionalidad está aún disponible. Puedes utilizar las teclas de
flecha en combinación con ⌥ para lograr la función de incremento / decremento.
Matemáticas
Otra gran característica de los campos de texto es que se puede realizar cálculos en
ellos. Esto funciona para las matemáticas simples como por ejemplo, agregar 5 o / 2, pero
casi cualquier expresión es compatible.
Ajustar Valores
Para ajustar rápidamente los valores de campo de texto puedes “hacer clic” y arrastrar en la
etiqueta en cualquier campo de texto para aumentar o disminuir rápidamente su valor. Si

49


no estás seguro del valor exacto que quieres, y sólo quieres ver su efecto en el lienzo, esta es
una gran manera de hacerlo.
Eliminar “Estilo de texto”

Cuando está activo, Sketch 3.0 elimina toda fuente, párrafo y color de la información de
la capa de texto seleccionada. A menudo, cuando se copia un texto de un navegador web o
un editor de texto, un poco de información de estilo se copia también. Activa este ajuste
para no tener en cuenta esa información “extra”.

50


6. Imágenes
Sketch 3.0 tiene un buen soporte para la manipulación de imágenes. Sketch 3.0 sin
embargo, no es un editor de mapa de bits y sus herramientas de edición de imagen están
limitadas por esa razón.
Ten en cuenta que puedes convertir cualquier número de capas en un mapa de bits acoplado por
ir a Capa> Acoplar Selección de mapa de bits.
Edición de Bitmap
Para empezar a editar una imagen, selecciónala en el lienzo y “haz doble clic”. Verás la
actualización del inspector con algunas herramientas especiales. Primero tienes que
seleccionar un área en el lienzo, y luego elegir la herramienta que desees:
! Selección: Seleccionar un área rectangular en la imagen

! Varita mágica: clic + arrastrar en cualquier parte de la imagen para seleccionar un
área.

51


Ten en cuenta que puedes utilizar ⇧ para añadir a una selección ya existente, y usar ⌥
restar. Una vez hecha la selección, puedes cortar / copiar la selección o seleccionar una de
las cuatro herramientas disponibles:
! Invertir : El área que no fue seleccionada serán seleccionada ahora y viceversa

! Cortar: Corta la capa sólo para incluir el área seleccionada.
! Color: Puedes rellenar el área seleccionada con un color elegido. El selector de
color estándar aparecerá para que puedas elegir un color
! Vectorizar.
Una vez que hayas terminado la edición, “haz clic” en cualquier lugar fuera de la imagen, o
pulsa “Intro” o “Esc” para salir.
Sectores
Normalmente, cuando se cambia el tamaño de un mapa de bits este cambia de forma
proporcional en todas las direcciones. A veces sin embargo, esto no es lo que quieres. Si
estás haciendo un diseño de páginas web, por ejemplo, puedes tener una pantalla en blanco
que cambia el tamaño conforme su contenido crece.
Para hacer frente a esta situación, Sketch 3.0 presenta el “escalado de nueve cortes” en las
imágenes. Ves a “Capa> Convertir a nueve sector Imagen” y tendrás tu imagen dividida en 9
secciones. Puedes “hacer clic” + arrastrar cualquiera de los cuatro puntos del medio para
ajustar estas cajas.

52


Ajuste de color
Si deseas ajustar los colores de una imagen existente puedes utilizar “Ajuste de color” del
panel en el inspector. Puedes cambiar la saturación, brillo y contraste en este panel.
* Ten en cuenta que esto es un efecto no destructivo por lo que siempre puedes cambiar sus valores más
tarde.

53


7. Símbolos
Los símbolos son una nueva característica de Sketch 3.0 y permiten reutilizar grupos
fácilmente a través de páginas y mesas de trabajo. Los símbolos son locales de su
documento y no se pueden compartir entre los documentos.
Un símbolo, de hecho, no es más que un tipo especial de grupo. También se muestra

como un grupo en la lista de capas, pero con un color púrpura en lugar de un icono azul.
Crear nuevo símbolo

Para crear tu primer símbolo, selecciona un grupo, o un número de capas y “haz clic” en
el símbolo “Crear icono” en la Barra de herramientas, o ir a “Capa> Crear Símbolo” en
el menú.
Si las capas seleccionadas aún no eran un grupo, Sketch 3.0 las agrupará. Ahora tendrás
un icono de color púrpura en la lista de capas al que puedes dar un nuevo nombre en el
inspector.
Ahora puedes ir a “Insertar> Símbolo”, e insertar una nueva instancia de tu símbolo en el

lienzo. Del mismo modo se puede copiar y pegar o duplicar una instancia existente de un
símbolo.

54


Excluir texto
Un ejemplo común del uso de un símbolo será en el diseño de cabecera o pie de página de
una web, o elementos de interfaz comunes como botones. En todos estos casos, es posible
que desees hacer una excepción en el texto de los símbolos; cada botón debe ser igual, pero
su valor de texto debe ser diferente.
Puedes hacer esto con los símbolos, mediante la selección de la capa de texto dentro del
símbolo y seleccionando la casilla “Excluir de Symbol”. Las modificaciones realizadas en el
texto ahora ocurren solo en esa instancia del símbolo.
Organizar símbolos
Si creas una gran cantidad de símbolos en un documento es posible que desees agruparlos
de alguna manera.
Si vas a “Insertar> Símbolo> Gestionar Símbolos”, obtendrás una hoja desplegable con una
lista de todos los símbolos en el documento. Puedes cambiar el nombre o eliminarlos
directamente. Si incluyes una barra (/) en el nombre del símbolo, Sketch 3.0 tratará estos
como separadores de grupo. Por ejemplo, dos símbolos con nombre Botón /
normal y Button / presionado se agruparán en un submenú llamado Button .
* Ten en cuenta que siempre se ordenan alfabéticamente, no en el orden de creación.

55


Duplicación Símbolos
Si deseas duplicar un símbolo existente, selecciona una instancia del mismo en el lienzo y,
en el inspector “haga clic” en el símbolo y selecciona "Duplicar símbolo'.
Intercambio de Símbolos
De la misma manera se puede aplicar otro símbolo a una instancia de otro símbolo
seleccionado. En el ejemplo de un botón pulsado y un botón normal, puedes cambiar entre
los dos.

56


8. Estilos
El panel del inspector tiene todas las opciones de estilo para las capas seleccionadas.
A partir de los estilos compartidos, nos movemos hacia abajo a la Opacidad y Fusión en
general, seguido por Rellenos, Bordes, Sombras, Blur y Reflexión. Cada uno de ellos se le
ha dado su propia sección en este manual, así que no nos entretendremos mas.
Sin embargo, hay una serie de consejos y trucos de aplicación general:
Copiar y pegar Estilos

Puedes copiar y pegar estilos entre capas utilizando el menú Edición. Si no deseas que las
capas se vinculen de forma permanente, pero sí quieres compartir algunos elementos de
estilo, esta es la solución perfecta.
Alineamiento
En la parte superior del inspector hay algunos botones relacionados con la alineación. Los 6
botones de la derecha son para la alineación de las capas entre sí, o, en el caso de una sola
selección, alineando esa capa a la mesa de trabajo.
Los iconos de alineación de la derecha son para la distribución de capas horizontales como
verticales. En el caso de la distribución horizontal, la capa más a la izquierda y más a la
derecha se quedará dónde está y las capas intermedias serán espaciadas uniformemente entre
ellas.
Acceso directo a la opacidad de la Capa

Cada vez que tenga una capa seleccionada, puedes pulsar las teclas 1-9 del teclado para
ajustar la opacidad de la capa de forma rápida a 10% -90%. Al pulsar 0% lo trae de nuevo
al 100% de opacidad.

57


Rellenos
Sketch 3.0 puede rellenar las formas con un color sólido, un gradiente o un patrón (con
una imagen) o con ruido.
De izquierda a derecha las opciones de relleno son:
! Relleno sólido
! Degradado lineal
! Degradado radial
! Gradiente Circular
! Patrón de relleno
! Relleno de ruido
Adición de rellenos
Puedes pulsar el botón + a la derecha del primer botón de relleno para agregar un segundo
relleno. Una capa puede tener cualquier número de rellenos que se apilan uno encima de
otro. Cada relleno puede tener su propio modo de fusión y se puede variar la opacidad
entre ellos también.
Ten en cuenta que si el relleno superior es completamente opaco no serás capaz de ver los rellenos
que tenga por debajo, pero Sketch 3.0 seguirá presentándolos, con el consiguiente coste de
rendimiento.

58


Patrón de relleno
También puedes elegir un patrón de relleno y elegir entre uno de los “presets” o seleccionar
una imagen.
! Tile : La imagen se repite una y otra vez hasta que el área entera de la forma se
rellena
! Relleno : La imagen se estira para llenar la forma completa
Relleno de ruido
Un relleno de ruido te permite agregar diferentes niveles de grano a tu capa, haciendo los
rellenos y formas un poco más realistas, añadiendo un poco de textura de forma muy sutil.

59


Sketch 3.0 viene con de tres tipos de ruido (blanco, negro y color).
Degradados
Todas las capas excepto las capas de texto pueden tener tantos degradados como
quieras. Pueden tener diferentes espesores, colores y modos de fusión.
De izquierda a derecha las opciones de los degradados son:
! Relleno sólido
! Degradado lineal
! Degradado radial
! Gradiente Circular
Bordes
Un borde se puede dibujar en el centro, dentro o fuera del recorrido de la forma.
Si la forma no esta cerrada, automáticamente se aplicará en el centro. Después de todo, el

concepto de "dentro" o "fuera" no existe en una línea.

60


Color o Degradado
Un borde puede ser un color sólido o un degradado. Se puede cambiar entre los dos tipos
utilizando el cuadro de color de cada relleno, y que cambian de un color plano a uno de los
tipos de degradados disponibles.
La edición de un degradado de borde funciona exactamente de la misma manera que un

relleno de degradado.
Líneas discontinuas
Las formas tienen algunas opciones avanzadas para sus bordes. Ve en la sección de Bordes
del Inspector y haz clic en el icono del engranaje. Un “popover” mostrará las opciones
adicionales, incluyendo cuatro campos en la parte inferior para la configuración de las líneas
de trazos.
Por ejemplo, un patrón de tablero de 4-2 dibujará el trazo de cuatro píxeles, con una hueco de
dos píxeles, dibuja cuatro píxeles más y así sucesivamente. Un patrón de puntos de 5-4-3-2
dibujará un trazo de 5 píxeles, un hueco de 4, entonces un trazo de 3 píxeles, un espacio de dos,
y luego comenzar de nuevo.
Desenfoque
Hay cuatro formas en las que Sketch 3.0 puede desenfocar sus capas y se pueden escoger
estos modos en el encabezado de la sección de Desenfoque.

61


! Gaussian Blur: Desenfoca la capa uniformemente.

! Desenfoque de movimiento: Desenfoca en una sola dirección, dando la ilusión
de movimiento.
! Desenfoque de zoom: Desenfoca de un punto hacia fuera.
! Fondo Borroso: Desenfoca el contenido de la capa
“Fondo Borroso” se añadió después de que Apple presentara iOS7 para dar a los diseñadores una
manera fácil de reproducir este efecto.
Rendimiento
Ten en cuenta que el desenfoque es un efecto muy costoso de hacer - especialmente el
desenfoque de fondo - y cuanto más grande es la capa y el desenfoque, más memoria y
potencia de procesamiento va a necesitar.
Si tienes que decidir entre el uso de “Fondo borroso” y “Desenfoque normal”, utiliza este
último.
Reflexión
La “Reflexión” le dará a tu capa la impresión como si estuviera de pie sobre una mesa de
cristal. Puedes utilizar el control deslizante para cambiar la intensidad de la reflexión. El
segundo deslizador determinar la distancia entre el objeto original y la reflexión.
Ten en cuenta que utilizando el efecto de reflexión, el sistema hará que el objeto se
represente dos veces, por lo que habrá implicaciones de rendimiento.
Estilos Compartidos
Puedes crear un nuevo estilo al seleccionar una forma y crear un nuevo estilo en el menú
desplegable. Puedes crear tantos estilos como quieras y puedes cambiar entre estilos
existentes utilizando el panel.
Si cambias algo en un estilo compartido se refleja de inmediato en todos los demás.

62


Color
En Sketch 3.0 encontramos el selector de color directamente en el inspector. Para verlo,
selecciona una forma, y “haz clic” en el botón de color.
El selector de color se basa en el modelo de color HSB, con la saturación y el brillo en el eje
horizontal y vertical, respectivamente, y luego HUE en el control deslizante debajo de
ella. Mas abajo se puede cambiar la opacidad del color.
Puedes cambiar su color mediante los campos de texto debajo del selector de color o
arrastrando los pequeños indicadores en el selector de color. Al ajustar la saturación y el
brillo, puedes restringir movimiento a un eje, manteniendo pulsado Mayúsculas.
Colores HSB
A continuación se puede ver el valor HEX del color y los valores de color RGBA. Ten en
cuenta que puedes cambiar a los valores de color HSBA “haciendo clic” en las etiquetas
RGB.
Colores Comunes
Debajo del selector de color y los campos de texto, verás una fila con “Preajustes de
color”. Esta fila de “presets” se rellena automáticamente por Sketch 3.0; analiza el
documento y recoge los colores más utilizados y los pone ahí.
Esto facilita la reutilización de los colores comunes sin tener que crear “presets”
manualmente.
Degradados
Para dar a una forma un relleno de degradado, debes seleccionarlo y, a continuación, “hacer
clic” en el botón de relleno y el inspector mostrará la herramienta de color. En la parte
superior del panel de color se puede elegir entre un color, distintos gradientes, relleno de
patrón o ruido.
Los gradientes disponibles son degradados lineales, radiales o circulares.

63


Si escoges un gradiente lineal, verás dos o más puntos conectados por una línea de
superposición de su capa. Cada punto en la línea representa un nivel de color de la
pendiente y el espacio entre las paradas se dibuja en una transición suave de los colores.
Para cambiar el color de una de las paradas, “haga clic” en él en el lienzo. Verás que el
selector de color del inspector actualiza al color de esa parada. Elige un nuevo valor en este
selector de color y verás el resultado actualizado inmediatamente.
Para insertar un punto entre los puntos, “haz clic” en la mitad de una línea y verás que otra
parada se agrega. Puedes mover las paradas entre el punto inicial y final para determinar la
suavidad de la pendiente y se puede mover el primer y último punto para cambiar la
dirección del gradiente.
Para eliminar un nivel de color, selecciónalo en el lienzo y pulsa la tecla “Supr” o “Retroceso”
en el teclado.
Degradados radiales
Si has seleccionado un degradado radial antes del primer punto de la línea será el centro de
la pendiente y el último determinará el tamaño de la gradiente.
Te darás cuenta que hay otro punto en el círculo más amplio que puedes arrastrar para
cambiar el degradado circular en uno ovalado.
Los gradientes circulares

Los gradientes circulares van en dirección de las agujas del reloj alrededor del punto central
de una capa. Puedes añadir paradas de color donde quieras “haciendo clic” en la línea y la
eliminación / arrastrando los puntos funciona como lo haría el mismo que para los
gradientes lineales.
Gradiente Bar
Algo nuevo en Sketch 3.0 es la “Barra de degradado” de edición más tradicional en el
inspector. Verás el gradiente que va de izquierda a derecha, con paradas adicionales en el
medio.

64


Accesos directos
También nuevo en Sketch 3.0 son varios atajos para los puntos de posicionamiento
rápido. Puede pulsar las teclas 1-9 en cualquier parada, excepto la primera o la última, para
colocarlo en el 10% -90% de la línea. Así presionando 5 pondrá la parada siempre
exactamente en el centro de la línea.
Si deseas colocar la parada en el medio justo entre la parada antes y después, presiona la
tecla '=' - tecla del teclado.
También puedes utilizar la tecla TAB para cambiar rápidamente entre paradas de color y
puedes utilizar las teclas de flecha para mover las paradas alrededor de la izquierda. Usa la
tecla de mayúsculas para amplificar el efecto.
Degradados en Bordes
Sketch 3.0 también puede hacer que un gradiente en un borde y esto funciona parecido
a un relleno de degradado. En su lugar, “haz clic” en el botón de color del borde y repite el
procedimiento.

65


9. Importación
Sketch 3.0 tiene soporte de importación de varios formatos de archivo. Para importarlos,
simplemente arrastra y suelta archivos al icono de Sketch 3.0, o directamente en un
documento abierto.
Formatos de archivo admitidos

! JPG : Un formato de uso común para las fotos, pero no admite la transparencia
! PNG : Si el dibujo contiene píxeles transparentes ésta será la mejor opción
! TIFF: Soporta transparencia, pero el tamaño del archivo es más grande.
! SVG : Sketch 3.0 soporta la importación de archivos SVG, pero ten en cuenta
que la cobertura puede no ser del 100%, porque SVG tiene algunos componentes
que Sketch 3.0 no soporta
! PDF y EPS: Sketch 3.0 soporta la importación de archivos PDF y EPS, pero
como pasa con los archivos SVG, tiene algunos componentes que Sketch 3.0 no
soporta y por lo que no se mostrará.
Formatos no admitidos
La siguiente lista incluye los formatos de archivo más utilizados para el diseño gráfico, pero
que no están soportados actualmente en Sketch 3.0:
! PSD: Sketch 3.0 sólo puede importar archivos psd como mapas de bits acoplados.
! AI: Sketch 3.0 sólo puede importar .ai archivos como mapas de bits acoplados.

66


10. Exportación
Para exportar tu trabajo, elige “Archivo> Exportar...” en el Menú, o “haz clic” en el botón
“Exportar” en la Barra de herramientas.
* El lienzo de dibujo es de tamaño infinito. Esto significa que cuando quieras exportar tu diseño
tienes que decirle a Sketch 3.0 qué parte te interesa exportar.
Al hacer clic en el botón “Exportar” en la Barra de herramientas, Sketch 3.0 abrirá

una lista de todas las capas exportables en el lienzo; mesas de trabajo, secciones y capas
regulares. Puedes exportar todos o algunos de ellos a partir de ahí.
Capas o secciones
La exportación de una capa significa que no hay otros elementos en el lienzo que se
exportarán con esta capa. Si hay una capa en la parte superior o de un fondo por debajo de
la capa, no se incluirán en la exportación.
Este método es muy útil para exportar iconos u objetos similares de un gran proyecto, pero
menos útil para exportar toda la composición. Para eso tenemos las secciones o las mesas de
trabajo.
Exportación de capas
Si has decidido que tienes que exportar una sola capa, puedes hacerlo en el
inspector. Selecciona la capa (o grupo) que deseas exportar y “haz clic” en “Hacer
exportable” en la parte inferior izquierda del inspector.
Verás que el inspector se actualiza para mostrar que quieres exportar una imagen, en
tamaño original, sin el sufijo, y por defecto en formato PNG.
Puedes “hacer clic” en el icono + para agregar otro tamaño de exportación. Por defecto este
exportará a doble tamaño con un sufijo @ 2x, pero se puede cambiar a lo que quieras. Por
ejemplo si el diseño ya está en @ 2x, puedes dar a tu tamaño de exportación 1 x '@ 2x'
sufijo y crea un segundo tamaño de exportación a 0.5x sin sufijo.
Ten en cuenta que Sketch 30 soporta la exportación a tamaños arbitrarios, por lo que si
estás diseñando para android y necesitas exportación 1.5x, también es posible.

67


Lista de capas
En la lista de capas se encuentra un pequeño icono de un “cuchillo”. Esto es para indicar
que esta capa es exportable. La próxima vez que “hagas clic” en “Exportar” en la Barra
de herramientas, esta nueva capa exportable aparecerá allí también, entre las secciones.
*Recuerda que también puedes exportar directamente las capas de la lista de capas, sin tener que
hacer capas exportables o secciones. Si arrastras cualquier capa de la lista en el Finder o
cualquier otra aplicación, Sketch 3.0 lo exportará en formato PNG. Si mantienes presionada la
tecla de opción, lo exportará como PDF.
Secciones
Las secciones de Sketch 3.0 te permiten exportar un área definida en el lienzo en un solo
archivo. Un documento Sketch 3.0 puede tener tantas secciones como quieras y cada una
va a exportar un archivo diferente.
Las secciones de Sketch 3.0 son tratadas como capas normales. Si temporalmente no
deseas ser molestado por las secciones en tu lienzo, puedes desactivarlas en la parte inferior
de la lista de capas usando el pequeño “cuchillo”.
Adición de secciones
Puedes agregar una sección yendo a “Insertar> División” en la Barra de herramientas y
luego haciendo clic + arrastrar en cualquier lugar en el lienzo para definir el área. Si usas la
herramienta de corte, también puedes “hacer clic” en una capa y Sketch 3.0 creará una
nueva sección exactamente alrededor de esa capa.
Nombrar las secciones

Puedes dar a cada una de tus secciones su propio nombre, y este es el nombre que se
utilizará al guardar la imagen en el ordenador.
Un buen truco es incluir una barra (un '/') para crear subcarpetas. Por ejemplo, si nombras a tu
sección foo/bar.png, Skecth 3.0 primero crea una carpeta con el nombre "foo" y luego crea una
imagen denominada 'bar.png'.

68


Múltiples Tamaños
En Sketch 3.0 se puede exportar varias imágenes de una sola sección.
Si estás haciendo diseños para iOS, tendrás que exportar imágenes simples y a doble de
resolución para cada icono. Con las secciones de Sketch 3.0, esto es fácil. Simplemente “haz
clic” en el icono “+” en el inspector de añadir un segundo tamaño.
Cada tamaño puede tener su propia escala personalizada, el formato y el sufijo. Se requiere
el sufijo porque normalmente el nombre del archivo se deriva del nombre de la sección,
pero con dos tamaños exportables, necesita sufijo uno de ellos. Por defecto, el segundo
tamaño que se agrega es un tamaño de 2x con un sufijo @ 2x de acuerdo con la convención
de iOS.
No obstante, no está restringido a la exportación sólo 2x; puedes exportar a cualquier

resolución o tamaño con cualquier sufijo que desees. Si diseñas en doble resolución, por
ejemplo, puedes darle a tu tamaño 1x un sufijo @ 2x y tenga su segunda tamaño sea al 0.5x
Sólo Contenido del grupo

En Sketch 3.0, cada sección tiene una casilla de verificación: “Contenido del grupo
exportación”. Cuando se activa esta opción en lugar de exportar todo en el lienzo, la
sección ahora sólo exportará las capas que hay dentro de su propio grupo, descartando
cualquier capa superpuesta fuera de esta, o cualquier capa de fondo que haya detrás.
Recorte
La última opción disponible en cada sección es la de “Recorte”. Con esta opción puedes
definir los pixeles transparentes que se exportaran con cada sección.
Por ejemplo: Definiste una sección en algún lugar de tu documento de 30 por 40 píxeles, pero
contiene un único óvalo que está a sólo 15x15 píxeles. En lugar de cambiar el tamaño de la
sección para encajar exactamente en torno a este óvalo, utiliza “Recortar” y Sketch 3.0 recortará
los píxeles transparentes en tu sección 30x40 hasta que dejar una imagen de 15x15 pequeña.

69


Formatos de archivo
Formatos de archivos compatibles para la exportación
! JPG: Un formato de uso común para las fotos, pero no admite la transparencia
! PNG: Si el dibujo contiene píxeles transparentes ésta será la mejor opción
! TIFF: Soporta transparencia, pero el tamaño del archivo es más grande.
! PDF o EPS: Para preservar los objetos vectoriales. Tenga en cuenta que los
gradientes transparentes no son compatibles con el estándar PDF.
! SVG: Es bastante bueno en las formas vectoriales y en el soporte de texto, sin
embargo, las sombras no son compatibles.
Sketch 3.0 no soporta los siguientes formatos de archivo para la exportación:
! PSD: formato de archivo de Photoshop no se admite para la exportación. Si tienes

acceso a Adobe Creative Suite, puedes exportar tu trabajo como PDF e importarlo a
Illustrator. A partir de ahí, exporta el proyecto como un archivo PSD.
! AI: Los archivos de Illustrator no son compatibles, pero Illustrator puede abrir
archivos PDF o SVG exportados de Sketch 3.0.
Atributos CSS
Sketch 3.0 tiene una característica muy interesante para ayudar a los diseñadores web a
pasar los diseños de una maqueta estática a HTML real.
Si seleccionas cualquier número de elementos en el lienzo, a continuación, puedes ir

a “Edición> Copiar atributos de CSS” en el Menú. Sketch 3.0 creará declaraciones CSS
para los bordes, rellenos, gradientes, sombras y estilos de texto utilizados en los objetos
seleccionados.
Sketch 3.0 transfiere sus gradientes de gradientes CSS también. Como la sintaxis de
gradientes requiere tiempo, la transferencia de CSS es realmente muy útil.

70


11. Rendimiento
Sketch 3.0 puede tratar fácilmente con dibujos bastante complejos, pero si terminas con
un documento muy grande es posible que desees saber algunas cosas acerca de lo que está
afectando el desempeño de Sketch 3.0:
Desenfoques
Desenfocar capas es costoso. Sketch 3.0 tiene que convertir la capa en un mapa de bits
“fuera de la pantalla” (que es costoso), y luego aplicar un desenfoque (que es muy
costoso). Cuanto mayor sea el radio de desenfoque el costoso para el sistema
Para un radio de desenfoque de 1px, Sketch 3.0 tiene que examinar cada píxel alrededor
de cada píxel; que lo convierte en 9 píxeles a ser examinados por píxel para calcular el nuevo
valor promedio. Al aumenta el radio de desenfoque a 2 píxeles aumenta exponencialmente.
* Ten en cuenta que fondo borroso es aún más costoso que el desenfoque normal. Si todo lo que
estamos tratando de hacer es desenfocar una imagen, utiliza el desenfoque normal, y no utilices el
fondo borroso.
Sombras
Lo mismo ocurre con las sombras. El rendering de las sombras en capas es costoso, y más
sombras significan más retrasos. Las Sombras interiores con propagación son especialmente
costosas.
No usar varias páginas

Sketch 3.0 puede manejar fácilmente una docena de mesas de trabajo en una página, pero
sí que se combina con grandes sombras y desenfoques o incluso más mesas de trabajo, las
cosas se ralentizarán. Una solución fácil es poner algunas mesas de trabajo en otra página.
El texto en contornos
Las operaciones booleanas son cálculos matemáticos muy complejos para llevar a cabo por
el sistema. Si tienes una sombra con unos cuantos subtrazados, cada uno con operaciones
booleanas, el rendimiento del sistema se puede resentir.

71


Es por esto que se debe tener cuidado con el texto vectorizado. Puedes aplicar gradientes
directamente a los textos sin la necesidad de vectorizar los mismos, así que tenlo en cuenta.

72


12. Accesos directos

Sketch 3.0 algunos atajos útiles que será bueno saber para optimizar su tiempo de trabajo.
Accesos directos generales

! ^ + H: controladores de selección Toggle
! ^ + L: guías de alineación Toggle
! ^ + G: Cambiar cuadrícula
! Espacio: Herramientas de mano
! Intro: Editar capa seleccionada
! ⌘ + 3: Vaya a las capas seleccionadas
! ⌘ + 2: Zoom en las capas seleccionadas
! Z: Herramienta Zoom. Mantenga pulsada la tecla y haga clic o arrastre un área con
el ratón. Zoom inversa usando Z + alt + clic.
! Escapar: Salga de la herramienta actual, anule la selección de todas las capas o
volver en el inspector
! Tab / Shift-tab: Ciclo a través de capas en el grupo actual
Inserción de capas
! R: Inserte un rectángulo
! O: Inserte un óvalo
! L: Insertar una línea
! U: Inserte un rectángulo redondeado
! T: Inserte una capa de texto
! V: capa vectorial
! P: herramienta Lápiz
Mover y redimensionar Capas

! ⌥ + Arrastrar: duplicar una capa
! ⌥ + Hover: distancia de visualización entre otras capas
! ⌥ + Cambiar el tamaño: cambiar el tamaño de los dos extremos
! Shift + Redimensionar: preservar la relación de aspecto Estos son los atajos algo
ocultos, pero muchos más se listan en el menú, por supuesto. Dominar los atajos de
teclado realmente le ayudará a aumentar la velocidad a la que usted trabaja.

73


13. Recursos
Sketch3appsources.com
sketchtips.tumblr.com
sketchdesign.io/
oozled.com/resources/sketch
aegeank.com/sketchactive/
brilliantsketch.com/
matterkit.io/
sketchresources.com
sketchtips.tumblr.com
sketchmine.co
sketchgems.com
sketchappsources.com
sketchshortcuts.com
teehanlax.com
tapsplusapps.com
speckyboy.com
yo.pixxel.co
hackingui.com
wanderingpixel.com
uifaces.com

74


14. Sobre el autor

Iván Blanco es Consultor de experiencia de usuario (UX) y Diseñador de
productos digitales desde hace mas de 15 años.
Actualmente trabaja en Nurun Spain como User Experience Strategist.
www.ivanblanco.es
https://www.linkedin.com/in/ivanblanco
Es Coorganizador de UxAcademy, un grupo de Meetup dirigido a todos aquellos

apasionados de UX (User Experience). Un lugar donde compartir experiencias, adquirir
nuevas habilidades y aprender los unos de los otros de esta disciplina en constante
evolución.

75


15. Bibliografía
Documentación oficial Bohemiancoding:
http://bohemiancoding.com/sketch/support/documentation/

76


77

Manualsketch3 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manualsketch3 PDF

Cargado por

Copyright:

Formatos disponibles

Diseño

de interfaces con Sketch 3.0

Diseño de interfaces con Sketch 3.0

Autor: Iván Blanco Lorenzo

© 2014. Iván Blanco Lorenzo

Título del libro: Diseño de interfaces con Sketch 3.0

Añadir capas ......................................................................................................................................................... 25

Ancho de trazo .................................................................................................................................................... 41

Intercambio de Símbolos .................................................................................................................................. 56

Secciones ............................................................................................................................................................... 68

- Plantillas de diseño web y iOS de serie

Lo primero que ves al entrar en el programa es un lienzo infinito. No hay ninguna

Sketch 3.0 es una herramienta muy potente y fácil de entender. Sustituye

¿Por qué utilizar Sketch 3.0?

- Símbolos, para la reutilización de los elementos en tu diseño. Los

- Estilos de texto y estilos de capa, rediseñada y unificada para una mejor

- Nuevo diseño del inspector, que te da un acceso más rápido a todo

- Recortes automáticos y capas de exportación directa

- Exportación de múltiples resoluciones al mismo tiempo, a cualquier escala.

- Modo de Presentación. Permite visualizar tu trabajo a pantalla completa,

Construido para Mac , Sketch admite las versiones de OS X y Auto Save , lo

Compatibilidad: OS X 10.8 o posterior, procesador de 64 bits

1. La Barra de herramientas en la parte superior contiene las acciones más

No hay paneles flotantes. El inspector cambiará para mostrar las herramientas

Puedes ver el lienzo, tanto en una visión independiente de la resolución donde se

* Ten en cuenta que Page Up / Page Down cambia entre páginas.

Si te importa el aspecto de cada píxel individual en el documento, entonces este modo es

Opción “Acércate a una selección”

Opción “Amplía al lienzo - Anterior Posición”

Forzando la Previsualización de píxeles

Reglas, guías, cuadrículas

Pulsa en “Ver> Cuadrícula” para activar la rejilla, y personalizarla en “Configuración”.

Al agregar un nuevo relleno, aparecerá un “popover” donde se puede elegir el color:

Puedes activar o desactivar cada relleno desmarcando la casilla de verificación de su

El siguiente módulo es para la edición de capas; rotación, transformación, combinación

El botón “Exportar” (el último icono de la Barra de herramientas) te permite exportar

Personalizar la barra de herramientas

Las Herramientas y accesos directos adicionales se pueden agregar a la Barra de

Añadir mesas de trabajo

Selecciona un valor preestablecido para insertarla en el lienzo, o “haz clic” en la cabecera de

Las Mesas de trabajo se muestran con un fondo blanco en la lista de capas.

Símbolos y Estilos Compartidos

Los “Estilos compartidos” se utilizan para mantener un estilo consistente

3. Las Capas en Sketch 3.0

Los grupos y mesas de trabajo se utilizan en Sketch 3.0 para mantener su

Selección de varias capas

Para restringir el movimiento a un eje determinado, manten presionada la tecla ⇧ cuando

A medida que mueve (o cambia el tamaño) de su capa, Sketch 3.0 alinea

Cambiar el tamaño de las capas

Si además mantienes pulsada la tecla Shift (⇧) se redimensionará la capa

La organización adecuada de capas puede ayudar en la Exportación.

Si mantienes presionada la tecla de mayúsculas, podrás extender tu selección como se describe en

Si sólo vas a usar grupos como un componente organizacional en la lista de capas y no

Cómo editar Formas

Inserta un rectángulo desde la barra de herramientas, ves a “Insertar> Forma>

! Recto: Si aplicas el primer modo en tu forma, obtendrás pequeños puntos de

Dibujo frente a Edición

La selección de puntos, la inserción de puntos en las líneas, y todo lo demás, es exactamente

! Unión: El resultado de una operación de unión es un vector que es la suma de las

! Diferencia: El resultado de una operación de diferencia es un vector que es

En otras aplicaciones de diseño, después de aplicar una operación booleana, el resultado se

Selecciona una o más capas y “haz clic” en el botón “Transformar” de la Barra de

La restricción de las Máscaras