Manualsketch3 PDF

Diseo
de interfaces con Sketch 3.0

Diseo de interfaces
con Sketch 3.0
Ivn Blanco Lorenzo

1

Diseo de interfaces con Sketch 3.0

Reservados todos los derechos. No se permite la reproduccin total o parcial de esta obra,
ni su incorporacin a un sistema informtico, ni su transmisin en cualquier forma o por
cualquier medio (electrnico, mecnico, fotocopia, grabacin u otros) sin autorizacin
previa y por escrito de los titulares del copyright. La infraccin de dichos derechos puede
constituir un delito contra la propiedad intelectual.
Autor: Ivn Blanco Lorenzo

Primera edicin: 2014
2014. Ivn Blanco Lorenzo

2014. Bohemiancoding
http://bohemiancoding.com/sketch/support/documentation/
Ttulo del libro: Diseo de interfaces con Sketch 3.0

Derechos Reservados, (C)2014

2


ndice
1. Introduccin ....................................................................................................................................................... 8
2. La Interfaz ........................................................................................................................................................ 11
Lienzo .................................................................................................................................................................... 11
Zoom en el Lienzo ........................................................................................................................................ 13
Pxel zoom ....................................................................................................................................................... 13
Opcin Acrcate a una seleccin ........................................................................................................... 13
Opcin Ampla al lienzo - Anterior Posicin ..................................................................................... 13
Opcin Retina ................................................................................................................................................ 13
Diseo de cuadrcula .................................................................................................................................... 14
Forzando la Previsualizacin de pxeles ................................................................................................... 14
Reglas, guas, cuadrculas ............................................................................................................................. 14
Medicin ........................................................................................................................................................... 15
Inspector de configuracin ............................................................................................................................... 17
a. Atributos generales ................................................................................................................................ 17
b. Atributos Estilo ..................................................................................................................................... 18
Barra de herramientas ........................................................................................................................................ 20
Personalizar la barra de herramientas ....................................................................................................... 20
Pginas ................................................................................................................................................................... 20
Mesas de trabajo ................................................................................................................................................. 21
Aadir mesas de trabajo ............................................................................................................................... 21
Rejillas y Reglas .............................................................................................................................................. 21
Plantillas ........................................................................................................................................................... 22
Mesas de trabajo ............................................................................................................................................. 22
Impresin ......................................................................................................................................................... 22
Lista de capas ....................................................................................................................................................... 22
Varias pginas ................................................................................................................................................. 22
Mesas de trabajo ............................................................................................................................................. 23
Mscaras ........................................................................................................................................................... 23
Operaciones booleanas ................................................................................................................................. 23
Smbolos y Estilos Compartidos ................................................................................................................ 24
3. Las Capas en Sketch 3.0 ............................................................................................................................... 25

3


Aadir capas ......................................................................................................................................................... 25

Opciones avanzadas ............................................................................................................................................. 26
Seleccin de Capas ............................................................................................................................................. 26
Mover capas ......................................................................................................................................................... 27
Objetos duplicados ............................................................................................................................................. 28
Cambiar el tamao de las capas ...................................................................................................................... 28
Edicin de Capas ................................................................................................................................................ 29
Agrupacin de Contenido ................................................................................................................................ 29
Grupos de capas .................................................................................................................................................. 29
Click-Through .................................................................................................................................................... 30
Redimensionar Proporcionalmente ............................................................................................................... 30
4. Formas (Shapes) .............................................................................................................................................. 31
Opciones adicionales ......................................................................................................................................... 31
Cmo editar Formas .......................................................................................................................................... 31
Diferentes Modos ............................................................................................................................................... 32
Dibujo frente a Edicin .................................................................................................................................... 33
Cerrado vs Abierto ............................................................................................................................................. 33
Accesos directos ................................................................................................................................................... 34
Seleccin mltiple .............................................................................................................................................. 34
Operaciones booleanas ...................................................................................................................................... 35
Subtrazados .......................................................................................................................................................... 35
Operaciones ......................................................................................................................................................... 35
Lista de capas ....................................................................................................................................................... 36
Acoplar capas ....................................................................................................................................................... 36
Transformar ......................................................................................................................................................... 37
Mascaras ................................................................................................................................................................ 37
La restriccin de las Mscaras .......................................................................................................................... 38
Mscara con Forma ............................................................................................................................................ 38
Mscaras con Alpha ........................................................................................................................................... 39
Tijeras .................................................................................................................................................................... 39
Copiar-Rotar ........................................................................................................................................................ 39
Splitting ................................................................................................................................................................. 40
Lpiz ....................................................................................................................................................................... 40

4


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

5. Texto .................................................................................................................................................................. 42
Capas de texto ..................................................................................................................................................... 42
Aadir texto ......................................................................................................................................................... 42
Cambiar el tamao 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
Exportacin .......................................................................................................................................................... 45
Disear para iOS ................................................................................................................................................ 46
El texto en contornos ........................................................................................................................................ 46
Estilos Compartidos ........................................................................................................................................... 46
Creacin de Estilos ............................................................................................................................................. 47
Nuevas Capas ...................................................................................................................................................... 47
Texto en recorrido .............................................................................................................................................. 48
Convertir en contornos ..................................................................................................................................... 48
Los campos de texto ........................................................................................................................................... 49
Arriba y Abajo ................................................................................................................................................. 49
Matemticas .................................................................................................................................................... 49
Ajustar Valores ............................................................................................................................................... 49
Eliminar Estilo de texto ................................................................................................................................ 50
6. Imgenes ........................................................................................................................................................... 51
Edicin de Bitmap ............................................................................................................................................. 51
Sectores .................................................................................................................................................................. 52
Ajuste de color ..................................................................................................................................................... 53
7. Smbolos ........................................................................................................................................................... 54
Crear nuevo smbolo ......................................................................................................................................... 54
Excluir texto ......................................................................................................................................................... 55
Organizar smbolos ............................................................................................................................................ 55
Duplicacin Smbolos ....................................................................................................................................... 56

5


Intercambio de Smbolos .................................................................................................................................. 56

8. Estilos ................................................................................................................................................................. 57
Copiar y pegar Estilos ........................................................................................................................................ 57
Alineamiento ........................................................................................................................................................ 57
Acceso directo a la opacidad de la Capa ....................................................................................................... 57
Rellenos ................................................................................................................................................................. 58
Adicin de rellenos ............................................................................................................................................. 58
Patrn de relleno ................................................................................................................................................. 59
Relleno de ruido .................................................................................................................................................. 59
Degradados ........................................................................................................................................................... 60
Bordes .................................................................................................................................................................... 60
Color o Degradado ............................................................................................................................................ 61
Lneas discontinuas ............................................................................................................................................ 61
Desenfoque ........................................................................................................................................................... 61
Rendimiento ........................................................................................................................................................ 62
Reflexin ............................................................................................................................................................... 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. Importacin ..................................................................................................................................................... 66
Formatos de archivo admitidos ....................................................................................................................... 66
Formatos no admitidos ..................................................................................................................................... 66
10. Exportacin ..................................................................................................................................................... 67
Capas o secciones ................................................................................................................................................ 67
Exportacin de capas ......................................................................................................................................... 67
Lista de capas ....................................................................................................................................................... 68

6


Secciones ............................................................................................................................................................... 68
Adicin de secciones .......................................................................................................................................... 68
Nombrar las secciones ....................................................................................................................................... 68
Mltiples Tamaos ............................................................................................................................................ 69
Slo Contenido del grupo ................................................................................................................................ 69
Recorte .................................................................................................................................................................. 69
Formatos de archivo .......................................................................................................................................... 70
Atributos CSS ...................................................................................................................................................... 70
11. Rendimiento ................................................................................................................................................... 71
Desenfoques ......................................................................................................................................................... 71
Sombras ................................................................................................................................................................. 71
No usar varias pginas ....................................................................................................................................... 71
El texto en contornos ........................................................................................................................................ 71
12. Accesos directos .............................................................................................................................................. 73
Accesos directos generales ................................................................................................................................. 73
Insercin de capas ............................................................................................................................................... 73
Mover y redimensionar Capas ........................................................................................................................ 73
13. Recursos ........................................................................................................................................................... 74
14. Sobre el autor .................................................................................................................................................. 75
15. Bibliografa ...................................................................................................................................................... 76

7


1. Introduccin
Sketch 3.0 es una aplicacin profesional para crear grficos vectoriales e interfaces
digitales, desarrollada por Bohemian Coding y disponible nicamente para ordenadores
Mac.
Sketch 3.0 es una solucin de diseo mucho ms ligera y rpida que otras
alternativas como Photoshop o Illustrator. Sketch 3.0 es una aplicacin muy ligera
(apenas 24 MB de espacio en disco), en comparacin con los 1GB de Photoshop.
Dispone de todas las opciones para crear desde cero desde un simple smbolo o icono hasta
toda la interfaz de una aplicacin mvil o una pgina web:
- Plantillas de diseo web y iOS de serie

- Permite copiar los Estilos CSS al portapapeles (incluyendo gradientes)
- Permite definir en el lienzo reas de exportacin, como imgenes.
- Cuadrcula de 960 por defecto, con soporte para opciones de cuadrcula ms
avanzados
- Permite crear varias pginas dentro de un solo documento
- Diseo para Web Responsive Design gracias a las Mesas de trabajo
- Y mucho ms
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 tamao debe ser tu lienzo. No tienes que
aprender sobre DPI, unidades, tamaos de lienzo Todo esto slo importa una vez que
hayas realizado tu diseo.
Sketch 3.0 tiene soporte para estilos de mapa de bits bsicos (por ejemplo, correcciones
de color) pero no puede hacer correccin de fotos o dibujar con pinceles.
Sketch 3.0 es una herramienta muy potente y fcil de entender. Sustituye

perfectamente a programas como Adobe Photoshop, Illustrator o Fireworks
para la mayora de las tareas de diseo digital.

8


Por qu utilizar Sketch 3.0?

1. Herramientas muy potentes y una interfaz sencilla y elegante, en
un solo paquete.
2. El diseo vectorial es, actualmente, la mejor manera de disear sitios web,
iconos o interfaces y el lienzo de trabajo es infinito.
3. Es una aplicacin de una sola ventana, y lo que necesitas esta siempre a
tu alcance. Es una aplicacin especfica para diseadores de interfaz.
4. Dispone de Estilos de texto, reutilizables en todo el proyecto.
5. Dispone de Herramientas de exportacin muy tiles si diseas APP
mviles
6. Puedes ver el lienzo, tanto en una visin independiente de la resolucin
donde se tiene una precisin infinita, o puedes activar la Previsualizacin de
pxeles y sabrs exactamente cmo se ve tu diseo tras la exportacin.
7. Representacin 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 VERSIN 3:
- Smbolos, para la reutilizacin de los elementos en tu diseo. Los

Smbolos permiten reutilizar grupos enteros de contenido en varios lugares en su
diseo. Piensa en los elementos de interfaz como botones, encabezados y pies de pgina.
Cambia una vez, y se actualizan en todo el documento.
- Estilos de texto y estilos de capa, rediseada y unificada para una mejor

experiencia. Los Estilos de capa se actualizan automticamente en todas las capas
asociadas. Los Estilos de texto compartidos para compartir informacin de fuente y de
prrafo entre las capas de texto
- Nuevo diseo del inspector, que te da un acceso ms rpido a todo
- Recortes automticos y capas de exportacin directa
- Exportacin de mltiples resoluciones al mismo tiempo, a cualquier escala.

Las Mesas de trabajo y las reas de recorte permiten exportar mltiples imgenes de un
solo documento
- Modo de Presentacin. Permite visualizar tu trabajo a pantalla completa,

ocultando todos los controles (perfecto para ensear tus diseos).

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 diseo minimalista y es altamente personalizable. Est
creada pensando en la eficiencia del diseador.
1. La Barra de herramientas en la parte superior contiene las acciones ms

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 dems. De esa manera siempre tienes un
punto de vista completamente despejada del lienzo.
Lienzo
El lienzo de dibujo es de tamao infinito. Puedes desplazarte por donde quieras en
cualquier direccin, 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 diseo de interfaces mviles, muchos diseadores
crean una mesa de trabajo para cada pantalla en la aplicacin y las ponen en el orden del
flujo de interaccin.
Puedes ver el lienzo, tanto en una visin independiente de la resolucin donde se

tiene una precisin infinita, o puedes activar la vista previa de pxeles y sabrs
exactamente cmo 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 pxeles, presentar una
falta de definicin, ya es un efecto basado en pxeles.
Navegar por el lienzo es fcil. Puedes utilizar la rueda de desplazamiento del ratn
para desplazarte por l. Tambin puedes mantener pulsada la barra espaciadora y hacer clic
y arrastrar para desplazarte por el lienzo.
Si no has seleccionado ningn objeto, puede utilizar las teclas de flecha para moverte por el
lienzo tambin.
* Ten en cuenta que Page Up / Page Down cambia entre pginas.

12


Zoom en el Lienzo
Aparte de que hay varios accesos directos en el men Ver para acercar y alejar el
contenido especfico, tambin puedes mantener pulsada la tecla y utilizar la rueda de
desplazamiento del ratn para acercar y alejar el lienzo.
Por ltimo, puedes utilizar la tecla "Z" para ampliar rpidamente un rea en particular. Haz
clic + arrastrar en cualquier lugar en el lienzo para ampliar la vista en esa zona.
Pxel zoom
Puedes ver tu diseo de dos maneras. Estos modos pueden activarse y desactivarse en el
men Ver, haga clic en Mostrar / Ocultar cuadrcula de pxeles.
Ten en cuenta que cuando ests en el 100% de zoom (tamao real) no hay diferencia entre
ambos modos, pero lo vas a ver cundo te acerques.
Si te importa el aspecto de cada pxel individual en el documento, entonces este modo es

para ti. Lo que se ve es bsicamente el equivalente de la primera exportacin a PNG.
Si no te preocupa esto, entonces la vista por defecto es el mejor; cuando te acerques vers
que todo sigue con curvas suaves.
Opcin Acrcate a una seleccin
Si haces zoom a travs de Ver> Acercar / Alejar comandos, por defecto el zoom ser en el
centro del lienzo. Al activar la casilla de verificacin Acrcate a una seleccin el zoom se
har en las capas seleccionadas.
Opcin Ampla al lienzo - Anterior Posicin
Usando esta opcin, el zoom cambiar a la posicin que tena en el lienzo antes de empezar
a acercarse.
Opcin Retina
Las pantallas Retina para Mac y iOS utilizan cuatro pxeles fsicos para representar un pxel
tradicional. La nueva pantalla Retina del MacBook Pro tiene cuatro veces ms pxeles que
los modelos ms antiguos, para mostrar los objetos en el mismo tamao de
pantalla. Utilizan estos pxeles adicionales para proporcionar ms detalle a las fuentes,
imgenes, etc.

13


Por defecto Sketch 3.0 hace lo mismo; los pxeles adicionales se utilizan para
proporcionar ms detalle, pero el tamao fsico del dibujo sigue siendo el
mismo. Si no deseas este comportamiento y realmente quieres que cada pxel fsico sea
representado como un pxel, desactiva la opcin de Retina en el lienzo.
Diseo de cuadrcula
Las columnas del diseo de la cuadricula se pueden llenar, ya sea con un color (Rellenar
cuadrcula), o se pueden dibujar los bordes de las columnas (Outline Stroke)
Forzando la Previsualizacin de pxeles
A veces encontrars que no se puede desactivar la vista previa de pxeles. Esto es porque el
efecto de desenfoque tiene que trabajar en datos de pxeles. Esto significa que la nica
manera que tiene Sketch 3.0 para mostrar estos efectos es rasterizando sus
vectores. Por lo tanto la Visin independiente de la resolucin ya no es aplicable,
por lo que se muestra el efecto en Vista previa de pxeles.
Reglas, guas, cuadrculas
Estas caractersticas en Sketch 3.0 ayudan a posicionar las capas en la posicin exacta que
uno quiere; ya sea en una cuadrcula, lneas o entre las propias capas.

14


Guas
Por defecto, las guas automticas estn activadas en el lienzo. Ten en cuenta que se pueden
activar con el mando (^) + 'L'. Cuando haya cambio de tamao o muevas alguna capa,
Sketch 3.0 tratar de ayudarte a alinear con otras capas automticamente. Cuando
Sketch 3.0 encaje su capa en otra, vers una lnea roja que muestra exactamente lo que
est ajustando.
Reglas
Sketch 3.0 tiene reglas, que estn 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 aadir guas manuales. Para
mover una gua, tienes que agarrarla dentro de la regla, y entonces puedes arrastrarla. Para
quitar una gua, arrstrala fuera de la vista y vers que desaparece con un puf.
Cuadrcula
Pulsa en Ver> Cuadrcula para activar la rejilla, y personalizarla en Configuracin.

Sketch 3.0 es compatible con dos tipos de rejillas; una cuadrcula normal /estndar
y una cuadricula de diseo. Dependiendo del tipo de trabajo que haces en Sketch
3.0 es posible que desees utilizar uno u otro. La diferencia es fcil de ver:
La cuadricula bsica tiene ajustes para el tamao de los cuadrados y con qu

frecuencia desea que aparezca una lnea ms gruesa. El tamao de la cuadrcula por
defecto es 20 pxeles y lneas gruesas cada 10 plazas.
En la cuadrcula de diseo se puede cambiar el ancho total de la "pgina" y el
nmero de columnas. Tambin se puede ajustar la altura de las "filas" y el tamao
de las columnas. Existen ajustes adicionales para el relleno.
Sketch 3.0 har todo lo posible para colocar la cuadrcula de diseo en el centro de su mesa de
trabajo, pero despus de cambiar el tamao de la mesa de trabajo, esto puede cambiar. En ese
caso se pulsa el botn 'Center' para centrar la cuadrcula en la mesa de trabajo con facilidad.
Medicin
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 Opcin / Alt () en el teclado, Sketch 3.0 calcular
la distancia entre la capa que has seleccionado y la capa que est flotando.
Adems, al mover un objeto Sketch 3.0 te mostrar la distancia a otros objetos cuando es
igual a otras distancias existentes:
Tamao
De la misma manera, si cambias el tamao de una capa, Sketch 3.0 te ayudar al indicar
otras capas que tienen la misma anchura o altura.

16


Inspector de configuracin
El Inspector de la derecha te permite ajustar la configuracin de la capa actual, o las
opciones para la herramienta actual.
Cuando tienes una capa seleccionada, vers que el inspector est dividido en
secciones:
a. Atributos generales
Los estilos generales de capa estn en la parte superior; la posicin, el tamao, la opacidad,
la mezcla y (dependiendo del tipo de capa) algunas opciones especiales, como el radio de la
esquina de un rectngulo o el nmero de puntos de una forma poligonal.

17


b. Atributos Estilo
Los atributos de relleno tienen cada uno su propia seccin. Para agregar un nuevo relleno,
simplemente haz clic en el icono + en el ttulo de la seccin:
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 verificacin de su

izquierda. Cuando uno o ms rellenos estn apagados, puedes eliminarlos haciendo clic
en el icono de papelera que aparece en el ttulo de la seccin:
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 diseos. El primer conjunto de herramientas, en la barra de
herramientas por defecto, son para aadir nuevas capas, formas, imgenes, smbolos y ms.
Las opciones Agrupar y Desagrupar son tiles para mantener tu documento organizado.
El siguiente mdulo es para la edicin de capas; rotacin, transformacin, combinacin

de capas usando operaciones booleanas y mover capas hacia atrs / hacia delante en la lista
de capas.
El botn Exportar (el ltimo icono de la Barra de herramientas) te permite exportar

tu diseo a uno o varios archivos bitmap o basados en vectores.
A diferencia de muchas otras aplicaciones de diseo, 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...".
Pginas
Un documento puede tener cualquier nmero de pginas. Los smbolos y los estilos
compartidos trabajan a travs de las pginas, pero no entre documentos.
Otra razn para el uso de mltiples pginas tiene que ver con el rendimiento. Sketch
3.0 puede manejar fcilmente una docena de mesas de trabajo en la pgina, pero en
funcin de su contenido, el tamao y el nmero de ellos, puede que te resulte beneficioso
dividir el trabajo en mltiples pginas.

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 ests haciendo un diseo para web, es posible que quieras disear para diferentes tamaos
de pantalla. Puedes definir cada tamao de pantalla en una mesa de trabajo. Si ests
haciendo iconos es posible que desees limitar a cualquiera de los tamaos 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 estn
"abiertos"; nunca tendrs que hacer doble clic para ver su contenido, y no cambia el tamao
para adaptarse a los contenidos en el interior.
Aadir 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 tamaos de mesa de trabajo
comunes a las pantallas de iOS y otros tamaos 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. Tambin puedes
agregar tus propias configuraciones en la parte inferior del inspector.
Si despus de haber insertado una mesa de trabajo, deseas insertar ms mesas de trabajo de
ese tipo, puedes pulsar cmd + D hasta que tengas el nmero 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
arrstralo), o cambiar su posicin o el tamao en el inspector.
Rejillas y Reglas
Las Mesas de trabajo actan como sus propios lienzo dentro del lienzo infinito, cada
Mesa de trabajo tiene sus propias reglas y cuadrculas opcionales, lo cual es especialmente
til si ests combinando las mesas de trabajo de tamao mltiple en un lienzo; una para
cada punto de ruptura en un diseo 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" vers que existe una mesa de trabajo para cada uno de los tamaos
comunes.
Mesas de trabajo
Las Mesas de trabajo en Sketch 3.0 tambin pueden ser exportadas directamente. Slo
tienes que aadir un tamao de exportacin a la mesa de trabajo y la prxima vez hacer clic
en Exportar, Sketch 3.0 incluir las mesas de trabajo tambin.
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 automticamente.
Impresin
Las Mesas de trabajo y las Secciones en Sketch 3.0 se pueden imprimir. Ves
a Archivo> Imprimir, y obtendrs una lista de las mesas de trabajo, o secciones si no tienes
mesas de trabajo. El cuadro de dilogo de impresin estndar aparecer y sers capaz de
imprimir.
Ten en cuenta que existen tamaos 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 pgina
actual y muestra una pequea vista previa de cada uno. Tambin puedes ver cul est
bloqueada, invisible, tiene una mscara, o esta marcada para la exportacin. Aqu puedes
cambiar el orden de capas y seleccionar Operaciones Boleanas para crear subtrazados de
una forma. Tambin puedes agrupar capas o cambiar el nombre de las mismas para
mantener tu documento organizado.
Varias pginas
Sketch 3.0 tiene soporte para mltiples pginas y tu puedes agregar / quitar o cambiar a
otras pginas usando la pequea ventana emergente que hay por encima de la lista de capas
(tambin puedes usar las teclas Re Pg / Av Pg del teclado). La lista de capas siempre
muestra las capas de slo la pgina actual.

22


Mesas de trabajo
Las Mesas de trabajo se muestran con un fondo blanco en la lista de capas.
Mscaras
Las capas que tienen una mscara aplicada mostrarn un pequeo punto en la lista de
capas antes de su nombre y de su vista previa. La capa a la que se le aplica la mscara es la
primera capa por debajo de ella y sin un punto.
Operaciones booleanas
Las formas pueden contener mltiples 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 operacin booleana aplicada a ella que dicta la forma en que se combina. La lista
de capas es una buena manera de obtener una visin general de cmo los subtrazados
trabajan juntos para lograr el resultado final.

23


Smbolos y Estilos Compartidos
Los Smbolos son un tipo especial de grupo, que puede existir en un documento
en varios lugares. Estn identificados por el icono de la carpeta prpura en la Lista de
capas (en contraposicin 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 prpura en lugar de la sombra gris oscuro.

24


3. Las Capas en Sketch 3.0

Las capas son los bloques bsicos de construccin de contenido en Sketch
3.0.
A diferencia de otras aplicaciones, no existe una distincin 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 tambin son tratados como capas.
Para empezar a aadir 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 aplicacin.
Aadir capas
La forma ms sencilla de aadir una capa es escoger una de las opciones existentes en la
Barra de herramientas. Haz clic en la forma de rectngulo y vers que el cursor
cambia a un cursor en forma de cruz con un pequeo cuadrado en la parte superior
derecha.
Ahora haz clic en el lienzo y arrastra. Cuando se suelta el ratn se insertar la forma y ya
puedes comenzar a manipularlo.

25


Opciones avanzadas
Como se puede ver, el proceso de insercin es fcil, pero hay algunos atajos ocultos que le dan un
cierto control adicional. Por ejemplo, puedes mantener pulsada la tecla de maysculas () para
hacer una nueva forma cuadrada.
Del mismo modo, puedes mantener la tecla de opcin () para poner el centro de la nueva
forma en el punto de su ratn (en lugar de la parte superior-izquierda).
Si decides que has colocado el origen de la nueva forma ligeramente descuadrada, mantn
presionada la barra espaciadora. Mientras que la barra espaciadora est pulsada podrs
arrastrar el origen de la forma en lugar de cambiar su tamao.
Seleccin de Capas
La Seleccin de capas en Sketch 3.0 es muy sencilla; basta con hacer clic sobre la
capa. Una vez que se selecciona la capa, deberas ver 8 pequeos tiradores; uno en cada
esquina y una en cada borde.
Nota: Si no ves estos tiradores, pero ests seguro de que has seleccionado la capa, es posible
que hayas ocultado accidentalmente los controles de seleccin. Para activarlos, ves
a Ver> Mostrar seleccin en el men.
Seleccin de varias capas

Para seleccionar varias capas, mantn pulsada la tecla de maysculas () en el teclado. Si
haces clic en otra capa, preservar su seleccin original tambin. Si mantienes y haces
clic en una capa ya seleccionada, se anular la seleccin.
Haz clic + arrastrar desde un rea vaca del lienzo para seleccionar todo lo que cabe en el
rectngulo. Una vez ms, si tienes o presionado, ampliars la seleccin o podrs anular
la seleccin de todos los objetos ya seleccionados.
Si mantienes pulsada la tecla alt (), podrs seleccionar las capas que se encuentran dentro
de los lmites del rectngulo. Compara las imgenes de abajo. A la izquierda: +
arrastrar. Derecha: + arrastre con .

26


Capas superpuestas
Para que sea ms fcil seleccionar una capa que est bajo otra capa, puedes hacer clic en el
botn derecho y seleccionar 'Recogida de capa "en el men. Aparecer una lista con cada
capa que se encuentra bajo el puntero del ratn.
Un atajo para esto es . Cuando se mantenga pulsado, Sketch 3.0 seleccionar la segunda
capa debajo del ratn en lugar de la primera. Si hay varias capas superpuestas y desea seleccionar
la tercera entonces tendrs que ir a travs del men contextual, como se describe ms arriba, pero
en algunos casos esto puede ser un truco muy conveniente.
Mover capas
Puedes mover una capa seleccionada y moverla con el ratn.
Para restringir el movimiento a un eje determinado, manten presionada la tecla cuando

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

automticamente su capa a las capas adyacentes.
Si esto no ocurre, es posible que tengas desactivadas las guas de capa. Para activarlas ves a Ver>
Guas 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 continuacin, 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
opcin, se pegar directamente en la parte superior del original.
Cambiar el tamao de las capas

Los 8 tiradores no slo indican la seleccin; tambin se puede usar para cambiar el tamao
de una capa. Coge cualquiera de los tiradores y arrstralos para cambiar el tamao de la
capa.
Si adems mantienes pulsada la tecla Shift () se redimensionar la capa

proporcionalmente manteniendo la anchura y la altura en la misma proporcin.
Para cambiar el tamao (slo la anchura o la altura de una capa) usa los controladores de
tamao de los lados de la capa. Para cambiar el tamao en ambas dimensiones, utiliza los de las
esquinas.
Si mantienes pulsada la tecla Alt () se cambiar de tamao desde la mitad hacia fuera en
lugar de desde la esquina opuesta.
Tambin puede cambiar el tamao de la capa a travs del teclado. Para ajustes
que necesiten de pxeles precisos, el teclado suele ser ms fcil que usar el ratn.
Para ello, mantn 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 Maysculas cambia el incremento 1px a 10px lugar.
Escalado de propiedades
Al cambiar el tamao 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 tamao de
50x50).

28


Para cambiar el tamao de una capa y sus propiedades de una sola vez, utiliza Editar>
Escala en lugar del men en su lugar.
Edicin de Capas
Para editar una capa, haz doble clic en el lienzo o haz clic en el botn Editar en la barra
de herramientas.
Ten en cuenta que puedes salir de la edicin de capa haciendo clic fuera de la capa o
pulsando Return o Escape.
Agrupacin de Contenido
Adems de la capa bsica, como formas, imgenes y texto, Sketch 3.0 tiene algunos tipos
especiales de capas que son realmente tiles en la organizacin y la presentacin de su
exportacin.
La organizacin adecuada de capas puede ayudar en la Exportacin.
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 tamao como una sola capa y, sin embargo todava se
puede entrar en el grupo y cambiar las capas individuales.
Se crea un grupo seleccionando una o ms 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. Tambin
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 jerarqua de grupos.

29


Para ahorrar mucho haciendo doble clic mientras se desciende ms y ms en la jerarqua del
grupo, en su lugar puedes mantener presionada la tecla y seleccionar esa capa.
Si mantienes presionada la tecla de maysculas, podrs extender tu seleccin como se describe en

la seccin 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 ,
podrs seleccionar directamente las capas anidadas en grupos.
Si slo 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 tamao de los grupos.

30


4. Formas (Shapes)
El tipo ms comn de las capas en un documento son las formas. Hay una gran variedad
de formas predeterminadas incluidas en Sketch 3.0, tales como crculos, rectngulos,
estrellas y muchas ms. Algunas de estas formas tienen opciones adicionales, tales como las
esquinas redondeadas en los rectngulos y las formas de la estrella.
Para aadir 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 ests
arrastrando el ratn para insertar el Sketch 3.0, se indicar el tamao de la forma a
insertar. Suelta el ratn y se aadir la forma final. Vers la actualizacin del inspector de
configuracin y se mostrarn 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 rectngulo redondeado o la estrella. Para
la forma de estrella puedes cambiar el radio y el nmero de puntos. Para el rectngulo
redondeado, se puede definir el radio de las esquinas.
Cmo editar Formas

El bloque bsico de una forma es un punto. Los puntos estn conectados por
lneas. Siempre que crees una nueva forma o edites una ya existente, se est interactuando
con los puntos directamente, y las lneas que se dibujan entre esos puntos es lo que se ve en
pantalla. A veces las lneas entre los puntos son lneas rectas (una lnea) y en otras ocasiones
se doblan (una curva).
Inserta un rectngulo desde la barra de herramientas, ves a Insertar> Forma>

Rectngulo. Insrtala en el lienzo y posteriormente haz doble clic en l para iniciar la edicin.
Vers un tirador en cada una de las esquinas. Puedes hacer clic en estos puntos y arrastrarlos
para cambiar su posicin. Vers que el resto de la forma cambia en consecuencia. Puedes hacer
clic en cualquier parte de una lnea entre dos puntos para insertar un nuevo punto y, a
continuacin, puede moverse de forma independiente tambin. Para eliminar un punto, haz
clic en l y pulsa la tecla de retroceso / retorno de tu teclado.

31


Si deseas lneas curvas en lugar de rectas, puedes hacer doble clic en un punto. Vers dos
pequeas asas que aparecen a ambos lados del punto. Estos puntos de control controlan la
curvatura de la lnea en cada lado. Piensa en estos pequeos puntos de control como si se
estuvieran tirando la lnea 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 lneas que se producen entre ellos.
Durante la edicin de una forma, vers que el inspector muestra cuatro modos
diferentes para el punto; recto, reflejado, desconectado y asimtrico.

32


! Recto: Si aplicas el primer modo en tu forma, obtendrs pequeos puntos de

control y, bsicamente, una lnea 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 opcin predeterminada.
! Asimtrico: 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 Edicin

En lugar de comenzar con una forma predefinida, tambin puedes dibujar una forma
desde cero utilizando la Herramienta de Vector. Haz clic en Insertar> Vector de la
Barra de herramientas y despus haz clic en cualquier lugar del lienzo para agregar tu
primer punto. Haz clic en otro lugar para aadir el segundo.
Vers que una lnea conecta ahora a ambos. Ahora haz clic en otro sitio, pero mantn
pulsado el ratn mientras arrastras para dibujar una curva. Puedes dibujar unas lneas ms y
al hacer clic de nuevo en la primera lnea cerrars la forma y terminars la edicin.
La seleccin de puntos, la insercin de puntos en las lneas, y todo lo dems, es exactamente

lo mismo, ya sea que ests editando una forma existente o dibujando una nueva.
Cerrado vs Abierto
Un trazado puede estar cerrado o abierto. Cuando est cerrado, la ltima lnea 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 ests en el modo de edicin de la forma, puedes aadir 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 lneas rectas
Si mantienes presionada la tecla y haces clic en una lnea entre dos puntos Sketch 3.0
insertar el punto exactamente en el medio de la lnea.
Seleccin mltiple
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 vaca en la vista para hacer una seleccin rectangular. Si todava ests
pulsando cuando sueltas se extender la seleccin que tenas antes de arrastrar con los
puntos recin seleccionados.

34


Operaciones booleanas
Cuando una forma que necesitas no se encuentra entre las formas estndar, tendrs que
crearla tu mismo. El primer impulso podra ser la de utilizar la herramienta de vectores y
dibujar la forma de la nada. Es ms sencillo utilizar Operacin booleanas. Con las
operaciones booleanas, puedes combinar formas bsicas para crear formas mucho ms
complejas.
Subtrazados
Sketch 3.0 tiene operaciones booleanas dinmicas y antes de que podamos hablar de estas
en mayor detalle vamos a revisar rpidamente las formas vectoriales. La mayora de las
formas vectoriales en Sketch 3.0 constarn 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 cmo estos se combinan.
Cuando haces una operacin 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
dinmicas siempre se pueden ajustar los subtrazados y si una de sus formas es un
rectngulo, 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
situacin.
! Unin: El resultado de una operacin de unin es un vector que es la suma de las

reas de los dos vectores.
! Resta: El resultado de una operacin de resta es un vector donde se elimina el rea
de la forma superior de la persona menor de ella.
! Interseccin: El resultado de una operacin de interseccin es un vector que
consiste en las partes donde las formas originales se superponen.

35


! Diferencia: El resultado de una operacin de diferencia es un vector que es

exactamente la parte en la que no se superponan. Es el inverso de una operacin de
interseccin.
Lista de capas
Cuando tienes una forma con mltiples subtrazados en tu lienzo, puedes ver la forma en la
lista de capas. Al igual que con los grupos normales, vers una flecha en la izquierda y si
despliegas vers una lista de subtrazados de la forma. En el lado derecho puedes elegir una
operacin 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 operacin 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 mltiples caminos
dentro de la forma como una ruta; ser, por as decirlo, acoplar la jerarqua. 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 sern reemplazados por
diferentes subtrazados, tal vez con menos caminos.

36


En otras aplicaciones de diseo, despus de aplicar una operacin booleana, el resultado se

acopla. En Sketch 3.0 no ocurre as; se pueden aplicar mltiples operaciones booleanas
sin la necesidad de acoplar.
Transformar
La herramienta de transformacin puede ser utilizada para distorsionar un vector existente
sesgando los puntos o mediante la creacin de un efecto 3D falso. Puedes utilizar la
herramienta de transformacin para transformar una o varias capas a la vez.
Selecciona una o ms capas y haz clic en el botn 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 dars cuenta de que la esquina opuesta
siempre se mueve en la direccin opuesta tambin. Esto hace que sea fcil de aplicar efectos
de perspectiva. Sin embargo, si deseas ajustar en una sola direccin, manten presionada la
tecla mientras arrastras.
Mascaras
Las mscaras en Sketch 3.0 se utilizan para mostrar selectivamente partes de otras capas.
Por ejemplo poniendo una mscara circular en una imagen slo mostrar la parte del
interior del crculo.

37


Cualquier forma puede convertirse en una mscara. Para ello, selecciona la forma y ves
a Editar> Usar como mscara en el men. Cualquier capa por encima de la mscara se
recorta a su contenido.
La restriccin de las Mscaras

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

2. En el men ir a Edicin> Ignorar Mscara Subyacente
Esta capa y las capas anteriores no sern enmascaradas. Eso si, ten cuidado al reordenar
capas.
Mscara con Forma

Si te parece mucho trabajo para enmascarar una imagen, hay otra opcin: Selecciona una
forma y una imagen en el lienzo y ves a Edicin> Mscara con la figura seleccionada para
usar la forma como una mscara en la imagen. Sketch 3.0 pondr ambas capas dentro de
un nuevo grupo y convertir la forma en una mscara. Bsicamente se automatizan los
pasos indicados anteriormente.

38


Mscaras con Alpha

Por defecto, una mscara funciona mostrando su superficie y ocultando el resto. Otra forma
de trabajar con una mscara 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 mscaras de seleccin de su mscara y luego ir
a Edicin> Modo Mscara> Mscara Alfa.
Tijeras
La herramienta tijeras se puede utilizar para cortar las lneas 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 continuacin, haz clic en la lnea 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 aadirla haciendo clic derecho en la barra de herramientas y
seleccionando Personalizar. Tambin 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 continuacin, giras
una docena de copias en el centro y tendrs una flor
Selecciona una capa, activa la herramienta Rotar Copias, introduce el nmero de copias y
cierra el cuadro de dilogo. A continuacin, coloca el punto central donde quieras y haz clic
fuera o desactiva la herramienta para salir de ella.
Splitting
Todas las formas se aaden 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.
Lpiz
La herramienta Lpiz permite dibujar libremente. Despus de soltar el ratn, Sketch 3.0
tratar de suavizar las curvas y simplificar el camino.
Puedes encontrar el lpiz en el icono Insertar en la barra de herramientas o en la barra de

men en Insertar tambin.
*Un atajo rpido para la herramienta Lpiz 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 aplcale un borde mediante el inspector. A continuacin,
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 ms grande o ms pequeo.

41


5. Texto
Capas de texto
Sketch 3.0 utiliza la representacin de la fuente nativa del sistema operativo y por eso, la
visualizacin del texto es perfecta. El beneficio de la representacin de la fuente nativa es
que cuando ests haciendo un diseo de sitio web, ests seguro de que la visualizacin del
texto es real. Sketch 3.0 tambin es compatible con los estilos de texto para que
mltiples capas de texto compartan el mismo tipo de letra, tamao, kerning, etc..
Aadir texto
Puedes aadir 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. Vers que se aade el texto y se selecciona
para que puedas empezar a escribir inmediatamente.
Tambin puedes hacer clic y arrastrar para crear un cuadro de texto de un tamao
fijo. Cuando el texto se hace demasiado grande para caber dentro de la caja, se cambiar el
tamao hacia abajo, en lugar de un cuadro de texto normal, lo que aumenta su anchura
para adaptarse al contenido.
Cambiar el tamao del texto

Al cambiar el tamao de un cuadro de texto en el lienzo su tamao del texto no cambiar,
excepto cuando se cambia el tamao del ancho automtico utilizando el controlador de
ajuste en la parte inferior.
Inspector del texto

Cuando tienes una capa de texto seleccionada, te dars 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 pequeo
botn T para acceder a las listas y las decoraciones, tales como subrayados y tachados. Un
poco ms adelante se encuentra la separacin del Carcter (kerning), de Lnea (espacios
entre lneas) y de prrafo (el espacio entre retornos).
Color del texto

Cuando ests editando texto, puedes aplicar colores especficos para el texto. Puedes hacerlo
a travs de la pequea caja de color entre el tamao de la fuente y las opciones de texto T.
Tambin 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 alineacin) se puede establecer en automtico o fijo.
Cuando se ajusta en automtico, la anchura de la caja de texto se ampliar lo mximo
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 representacin de la fuente nativa del sistema operativo y por eso, el
texto se visualiza perfecto. El beneficio de la representacin de la fuente nativa es que
cuando ests haciendo un diseo de sitio web la visualizacin del texto es real.
El sistema utiliza una tcnica llamada subpixel-antialiasing para mejorar la

representacin de texto y Sketch 3.0 utiliza esta tcnica tambin. Sin embargo, hay
algunas complicaciones con esto, y para entender su por qu, tenemos que ver como
funciona la tecnologa subyacente.
Subpixel-antialiasing
Una pantalla de ordenador se compone de una cuadrcula de pxeles. El problema al que se
enfrenta en la representacin de texto, es que en las pantallas normales no hay suficientes
pxeles para dibujar las curvas de forma precisa. Por eso, se utiliza el anti-aliasing; se
iluminan ligeramente pxeles que slo estn parcialmente cubiertos por las curvas para dar
la apariencia de suavidad.
Antialiasing Sub-pixel va un paso ms all, teniendo en cuenta que un pxel en una

pantalla en realidad consta de tiras verticales rojas, verdes y azules. As que en lugar de
iluminar todo el pixel, antialiasing sub-pxel ilumina slo la parte de color rojo o azul.

44


Es por eso que si realmente ampliamos el texto en el modo de pxeles se puede ver bordes
azules y marrones a el texto. Viendo el texto en su tamao 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 fusin 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 Subpxeles
antialiased sin un fondo opaco, y no podemos hacer con precisin la fusin 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.
Exportacin
Otro problema con la transparencia sucede en la exportacin. En el lienzo, Sketch 3.0
puede representar el texto detrs 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 dars 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
detrs 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.
Disear para iOS

Cuando Apple present el iPhone decidieron no hacer ningn texto en el dispositivo con
subpixel-antialiasing. La razn de esto se remonta a la forma en que los colores rojo,
verde y luces azules componen un pxel.
Como sabris, el iPhone se puede girar y esto significa que las verticales rojo / verde / azul
de los pxeles de repente se encuentran apilados horizontalmente. Y con esto la tcnica de
los subpxeles se desmorona. Apple an podra hacerla en modo vertical y desactivarlo en el
horizontal, pero decidieron mantener la experiencia consistente entre el Portrait y
Landscape.
Cada vez que ests diseando 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 opcin

Suavizar Fuentes Sub-pixel.
El texto en contornos
Al convertir texto en contornos te dars cuenta de que el texto se hace un poco
diferente. Una vez ms, esto es debido a subpixel-antialiasing. El sistema utiliza esta
tcnica para el texto, no para las formas.
Estilos Compartidos
A menudo es aconsejable mantener el mismo estilo en mltiples capas de texto. Para ello, se
puede definir cualquier nmero 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 funcin de cada documento. No puedes
compartirlos entre documentos pero estn disponibles entre todas las pginas y mesas de trabajo
del documento.
Creacin de Estilos
Para crear un estilo de texto, selecciona una capa de texto, y ves a Capa> Crear estilo
compartido en el men. Vers que el inspector se actualiza para mostrar el nuevo estilo de
texto aplicado a la capa. Aqu tambin puedes darle un nombre propio.
Cualquier atributo que cambia en el texto (excepto la cadena de texto en bruto en s) se

sincroniza automticamente a travs 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 ms rpida de insertar una capa de texto con un determinado
estilo de texto es ir a Insertar> Texto con estilo y elegir su estilo. A continuacin, 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 lnea 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 colocacin de la capa de texto en el vector es tan fcil como arrastrar horizontalmente a

travs de la forma.
Convertir en contornos
El texto puede ser convertido a formas utilizando Texto> Convertir texto en contornos en el
men. A continuacin, puedes editar los trazados y los puntos individuales como lo haras
con cualquier otra forma.

48


ADVERTENCIA
No debes vectorizar largas cadenas de texto, ya que ralentizan considerablemente el documento.
La conversin de una simple cadena de texto en contornos, da como resultado, muchos pequeos
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 ratn por
encima de ellos vers que aparecern flechas arriba y abajo en la derecha del campo de
texto. Puedes hacer clic en esas flechas para aumentar o disminuir el valor rpidamente. Si
pulsas Maysculas, Sketch 3.0 incrementar o disminuir el valor de 10 en 10.
Arriba y Abajo
Una vez que ests editando directamente los campos de texto, las flechas arriba y abajo
habrn desaparecido, pero su funcionalidad est an disponible. Puedes utilizar las teclas de
flecha en combinacin con para lograr la funcin de incremento / decremento.
Matemticas
Otra gran caracterstica de los campos de texto es que se puede realizar clculos en
ellos. Esto funciona para las matemticas simples como por ejemplo, agregar 5 o / 2, pero
casi cualquier expresin es compatible.
Ajustar Valores
Para ajustar rpidamente los valores de campo de texto puedes hacer clic y arrastrar en la
etiqueta en cualquier campo de texto para aumentar o disminuir rpidamente su valor. Si

49


no ests seguro del valor exacto que quieres, y slo 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, prrafo y color de la informacin 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 informacin de estilo se copia tambin. Activa este ajuste
para no tener en cuenta esa informacin extra.

50


6. Imgenes
Sketch 3.0 tiene un buen soporte para la manipulacin de imgenes. Sketch 3.0 sin
embargo, no es un editor de mapa de bits y sus herramientas de edicin de imagen estn
limitadas por esa razn.
Ten en cuenta que puedes convertir cualquier nmero de capas en un mapa de bits acoplado por
ir a Capa> Acoplar Seleccin de mapa de bits.
Edicin de Bitmap
Para empezar a editar una imagen, seleccinala en el lienzo y haz doble clic. Vers la
actualizacin del inspector con algunas herramientas especiales. Primero tienes que
seleccionar un rea en el lienzo, y luego elegir la herramienta que desees:
! Seleccin: Seleccionar un rea rectangular en la imagen

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

51


Ten en cuenta que puedes utilizar para aadir a una seleccin ya existente, y usar
restar. Una vez hecha la seleccin, puedes cortar / copiar la seleccin o seleccionar una de
las cuatro herramientas disponibles:
! Invertir : El rea que no fue seleccionada sern seleccionada ahora y viceversa

! Cortar: Corta la capa slo para incluir el rea seleccionada.
! Color: Puedes rellenar el rea seleccionada con un color elegido. El selector de
color estndar aparecer para que puedas elegir un color
! Vectorizar.
Una vez que hayas terminado la edicin, haz clic en cualquier lugar fuera de la imagen, o
pulsa Intro o Esc para salir.
Sectores
Normalmente, cuando se cambia el tamao 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
ests haciendo un diseo de pginas web, por ejemplo, puedes tener una pantalla en blanco
que cambia el tamao conforme su contenido crece.
Para hacer frente a esta situacin, Sketch 3.0 presenta el escalado de nueve cortes en las
imgenes. Ves a Capa> Convertir a nueve sector Imagen y tendrs 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 saturacin, brillo y contraste en este panel.
* Ten en cuenta que esto es un efecto no destructivo por lo que siempre puedes cambiar sus valores ms
tarde.

53


7. Smbolos
Los smbolos son una nueva caracterstica de Sketch 3.0 y permiten reutilizar grupos
fcilmente a travs de pginas y mesas de trabajo. Los smbolos son locales de su
documento y no se pueden compartir entre los documentos.
Un smbolo, de hecho, no es ms que un tipo especial de grupo. Tambin se muestra

como un grupo en la lista de capas, pero con un color prpura en lugar de un icono azul.
Crear nuevo smbolo

Para crear tu primer smbolo, selecciona un grupo, o un nmero de capas y haz clic en
el smbolo Crear icono en la Barra de herramientas, o ir a Capa> Crear Smbolo en
el men.
Si las capas seleccionadas an no eran un grupo, Sketch 3.0 las agrupar. Ahora tendrs
un icono de color prpura en la lista de capas al que puedes dar un nuevo nombre en el
inspector.
Ahora puedes ir a Insertar> Smbolo, e insertar una nueva instancia de tu smbolo en el

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

54


Excluir texto
Un ejemplo comn del uso de un smbolo ser en el diseo de cabecera o pie de pgina de
una web, o elementos de interfaz comunes como botones. En todos estos casos, es posible
que desees hacer una excepcin en el texto de los smbolos; cada botn debe ser igual, pero
su valor de texto debe ser diferente.
Puedes hacer esto con los smbolos, mediante la seleccin de la capa de texto dentro del
smbolo y seleccionando la casilla Excluir de Symbol. Las modificaciones realizadas en el
texto ahora ocurren solo en esa instancia del smbolo.
Organizar smbolos
Si creas una gran cantidad de smbolos en un documento es posible que desees agruparlos
de alguna manera.
Si vas a Insertar> Smbolo> Gestionar Smbolos, obtendrs una hoja desplegable con una
lista de todos los smbolos en el documento. Puedes cambiar el nombre o eliminarlos
directamente. Si incluyes una barra (/) en el nombre del smbolo, Sketch 3.0 tratar estos
como separadores de grupo. Por ejemplo, dos smbolos con nombre Botn /
normal y Button / presionado se agruparn en un submen llamado Button .
* Ten en cuenta que siempre se ordenan alfabticamente, no en el orden de creacin.

55


Duplicacin Smbolos
Si deseas duplicar un smbolo existente, selecciona una instancia del mismo en el lienzo y,
en el inspector haga clic en el smbolo y selecciona "Duplicar smbolo'.
Intercambio de Smbolos
De la misma manera se puede aplicar otro smbolo a una instancia de otro smbolo
seleccionado. En el ejemplo de un botn pulsado y un botn 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 Fusin en
general, seguido por Rellenos, Bordes, Sombras, Blur y Reflexin. Cada uno de ellos se le
ha dado su propia seccin en este manual, as que no nos entretendremos mas.
Sin embargo, hay una serie de consejos y trucos de aplicacin general:
Copiar y pegar Estilos

Puedes copiar y pegar estilos entre capas utilizando el men Edicin. Si no deseas que las
capas se vinculen de forma permanente, pero s quieres compartir algunos elementos de
estilo, esta es la solucin perfecta.
Alineamiento
En la parte superior del inspector hay algunos botones relacionados con la alineacin. Los 6
botones de la derecha son para la alineacin de las capas entre s, o, en el caso de una sola
seleccin, alineando esa capa a la mesa de trabajo.
Los iconos de alineacin de la derecha son para la distribucin de capas horizontales como
verticales. En el caso de la distribucin horizontal, la capa ms a la izquierda y ms a la
derecha se quedar dnde est y las capas intermedias sern 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 rpida 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 slido, un gradiente o un patrn (con
una imagen) o con ruido.
De izquierda a derecha las opciones de relleno son:
! Relleno slido
! Degradado lineal
! Degradado radial
! Gradiente Circular
! Patrn de relleno
! Relleno de ruido
Adicin de rellenos
Puedes pulsar el botn + a la derecha del primer botn de relleno para agregar un segundo
relleno. Una capa puede tener cualquier nmero de rellenos que se apilan uno encima de
otro. Cada relleno puede tener su propio modo de fusin y se puede variar la opacidad
entre ellos tambin.
Ten en cuenta que si el relleno superior es completamente opaco no sers capaz de ver los rellenos
que tenga por debajo, pero Sketch 3.0 seguir presentndolos, con el consiguiente coste de
rendimiento.

58


Patrn de relleno
Tambin puedes elegir un patrn 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 ms realistas, aadiendo 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 fusin.
De izquierda a derecha las opciones de los degradados son:
! Relleno slido
! 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, automticamente se aplicar en el centro. Despus de todo, el

concepto de "dentro" o "fuera" no existe en una lnea.

60


Color o Degradado
Un borde puede ser un color slido 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 edicin de un degradado de borde funciona exactamente de la misma manera que un

relleno de degradado.
Lneas discontinuas
Las formas tienen algunas opciones avanzadas para sus bordes. Ve en la seccin 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 configuracin de las lneas
de trazos.
Por ejemplo, un patrn de tablero de 4-2 dibujar el trazo de cuatro pxeles, con una hueco de
dos pxeles, dibuja cuatro pxeles ms y as sucesivamente. Un patrn de puntos de 5-4-3-2
dibujar un trazo de 5 pxeles, un hueco de 4, entonces un trazo de 3 pxeles, 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 seccin de Desenfoque.

61


! Gaussian Blur: Desenfoca la capa uniformemente.

! Desenfoque de movimiento: Desenfoca en una sola direccin, dando la ilusin
de movimiento.
! Desenfoque de zoom: Desenfoca de un punto hacia fuera.
! Fondo Borroso: Desenfoca el contenido de la capa
Fondo Borroso se aadi despus de que Apple presentara iOS7 para dar a los diseadores una
manera fcil 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 ms grande es la capa y el desenfoque, ms memoria y
potencia de procesamiento va a necesitar.
Si tienes que decidir entre el uso de Fondo borroso y Desenfoque normal, utiliza este
ltimo.
Reflexin
La Reflexin le dar a tu capa la impresin como si estuviera de pie sobre una mesa de
cristal. Puedes utilizar el control deslizante para cambiar la intensidad de la reflexin. El
segundo deslizador determinar la distancia entre el objeto original y la reflexin.
Ten en cuenta que utilizando el efecto de reflexin, 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 dems.

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 botn de color.
El selector de color se basa en el modelo de color HSB, con la saturacin 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 pequeos indicadores en el selector de color. Al ajustar la saturacin y el
brillo, puedes restringir movimiento a un eje, manteniendo pulsado Maysculas.
Colores HSB
A continuacin 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, vers una fila con Preajustes de
color. Esta fila de presets se rellena automticamente por Sketch 3.0; analiza el
documento y recoge los colores ms utilizados y los pone ah.
Esto facilita la reutilizacin de los colores comunes sin tener que crear presets
manualmente.
Degradados
Para dar a una forma un relleno de degradado, debes seleccionarlo y, a continuacin, hacer
clic en el botn 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
patrn o ruido.
Los gradientes disponibles son degradados lineales, radiales o circulares.

63


Si escoges un gradiente lineal, vers dos o ms puntos conectados por una lnea de
superposicin de su capa. Cada punto en la lnea representa un nivel de color de la
pendiente y el espacio entre las paradas se dibuja en una transicin suave de los colores.
Para cambiar el color de una de las paradas, haga clic en l en el lienzo. Vers que el
selector de color del inspector actualiza al color de esa parada. Elige un nuevo valor en este
selector de color y vers el resultado actualizado inmediatamente.
Para insertar un punto entre los puntos, haz clic en la mitad de una lnea y vers 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
direccin del gradiente.
Para eliminar un nivel de color, seleccinalo 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 lnea ser el centro de
la pendiente y el ltimo determinar el tamao de la gradiente.
Te dars cuenta que hay otro punto en el crculo ms amplio que puedes arrastrar para
cambiar el degradado circular en uno ovalado.
Los gradientes circulares

Los gradientes circulares van en direccin de las agujas del reloj alrededor del punto central
de una capa. Puedes aadir paradas de color donde quieras haciendo clic en la lnea y la
eliminacin / arrastrando los puntos funciona como lo hara el mismo que para los
gradientes lineales.
Gradiente Bar
Algo nuevo en Sketch 3.0 es la Barra de degradado de edicin ms tradicional en el
inspector. Vers el gradiente que va de izquierda a derecha, con paradas adicionales en el
medio.

64


Accesos directos
Tambin nuevo en Sketch 3.0 son varios atajos para los puntos de posicionamiento
rpido. Puede pulsar las teclas 1-9 en cualquier parada, excepto la primera o la ltima, para
colocarlo en el 10% -90% de la lnea. As presionando 5 pondr la parada siempre
exactamente en el centro de la lnea.
Si deseas colocar la parada en el medio justo entre la parada antes y despus, presiona la
tecla '=' - tecla del teclado.
Tambin puedes utilizar la tecla TAB para cambiar rpidamente entre paradas de color y
puedes utilizar las teclas de flecha para mover las paradas alrededor de la izquierda. Usa la
tecla de maysculas para amplificar el efecto.
Degradados en Bordes
Sketch 3.0 tambin puede hacer que un gradiente en un borde y esto funciona parecido
a un relleno de degradado. En su lugar, haz clic en el botn de color del borde y repite el
procedimiento.

65


9. Importacin
Sketch 3.0 tiene soporte de importacin 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 comn para las fotos, pero no admite la transparencia
! PNG : Si el dibujo contiene pxeles transparentes sta ser la mejor opcin
! TIFF: Soporta transparencia, pero el tamao del archivo es ms grande.
! SVG : Sketch 3.0 soporta la importacin 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 importacin 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 ms utilizados para el diseo grfico, pero
que no estn soportados actualmente en Sketch 3.0:
! PSD: Sketch 3.0 slo puede importar archivos psd como mapas de bits acoplados.
! AI: Sketch 3.0 slo puede importar .ai archivos como mapas de bits acoplados.

66


10. Exportacin
Para exportar tu trabajo, elige Archivo> Exportar... en el Men, o haz clic en el botn
Exportar en la Barra de herramientas.
* El lienzo de dibujo es de tamao infinito. Esto significa que cuando quieras exportar tu diseo
tienes que decirle a Sketch 3.0 qu parte te interesa exportar.
Al hacer clic en el botn 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 exportacin de una capa significa que no hay otros elementos en el lienzo que se
exportarn con esta capa. Si hay una capa en la parte superior o de un fondo por debajo de
la capa, no se incluirn en la exportacin.
Este mtodo es muy til para exportar iconos u objetos similares de un gran proyecto, pero
menos til para exportar toda la composicin. Para eso tenemos las secciones o las mesas de
trabajo.
Exportacin 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.
Vers que el inspector se actualiza para mostrar que quieres exportar una imagen, en
tamao original, sin el sufijo, y por defecto en formato PNG.
Puedes hacer clic en el icono + para agregar otro tamao de exportacin. Por defecto este
exportar a doble tamao con un sufijo @ 2x, pero se puede cambiar a lo que quieras. Por
ejemplo si el diseo ya est en @ 2x, puedes dar a tu tamao de exportacin 1 x '@ 2x'
sufijo y crea un segundo tamao de exportacin a 0.5x sin sufijo.
Ten en cuenta que Sketch 30 soporta la exportacin a tamaos arbitrarios, por lo que si
ests diseando para android y necesitas exportacin 1.5x, tambin es posible.

67


Lista de capas
En la lista de capas se encuentra un pequeo icono de un cuchillo. Esto es para indicar
que esta capa es exportable. La prxima vez que hagas clic en Exportar en la Barra
de herramientas, esta nueva capa exportable aparecer all tambin, entre las secciones.
*Recuerda que tambin 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 aplicacin, Sketch 3.0 lo exportar en formato PNG. Si mantienes presionada la
tecla de opcin, 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 pequeo cuchillo.
Adicin de secciones
Puedes agregar una seccin yendo a Insertar> Divisin 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, tambin puedes hacer clic en una capa y Sketch 3.0 crear una
nueva seccin 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
seccin foo/bar.png, Skecth 3.0 primero crea una carpeta con el nombre "foo" y luego crea una
imagen denominada 'bar.png'.

68


Mltiples Tamaos
En Sketch 3.0 se puede exportar varias imgenes de una sola seccin.
Si ests haciendo diseos para iOS, tendrs que exportar imgenes simples y a doble de
resolucin para cada icono. Con las secciones de Sketch 3.0, esto es fcil. Simplemente haz
clic en el icono + en el inspector de aadir un segundo tamao.
Cada tamao 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 seccin,
pero con dos tamaos exportables, necesita sufijo uno de ellos. Por defecto, el segundo
tamao que se agrega es un tamao de 2x con un sufijo @ 2x de acuerdo con la convencin
de iOS.
No obstante, no est restringido a la exportacin slo 2x; puedes exportar a cualquier

resolucin o tamao con cualquier sufijo que desees. Si diseas en doble resolucin, por
ejemplo, puedes darle a tu tamao 1x un sufijo @ 2x y tenga su segunda tamao sea al 0.5x
Slo Contenido del grupo

En Sketch 3.0, cada seccin tiene una casilla de verificacin: Contenido del grupo
exportacin. Cuando se activa esta opcin en lugar de exportar todo en el lienzo, la
seccin ahora slo exportar las capas que hay dentro de su propio grupo, descartando
cualquier capa superpuesta fuera de esta, o cualquier capa de fondo que haya detrs.
Recorte
La ltima opcin disponible en cada seccin es la de Recorte. Con esta opcin puedes
definir los pixeles transparentes que se exportaran con cada seccin.
Por ejemplo: Definiste una seccin en algn lugar de tu documento de 30 por 40 pxeles, pero
contiene un nico valo que est a slo 15x15 pxeles. En lugar de cambiar el tamao de la
seccin para encajar exactamente en torno a este valo, utiliza Recortar y Sketch 3.0 recortar
los pxeles transparentes en tu seccin 30x40 hasta que dejar una imagen de 15x15 pequea.

69


Formatos de archivo
Formatos de archivos compatibles para la exportacin
! JPG: Un formato de uso comn para las fotos, pero no admite la transparencia
! PNG: Si el dibujo contiene pxeles transparentes sta ser la mejor opcin
! TIFF: Soporta transparencia, pero el tamao del archivo es ms grande.
! PDF o EPS: Para preservar los objetos vectoriales. Tenga en cuenta que los
gradientes transparentes no son compatibles con el estndar 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 exportacin:
! PSD: formato de archivo de Photoshop no se admite para la exportacin. 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 caracterstica muy interesante para ayudar a los diseadores web a
pasar los diseos de una maqueta esttica a HTML real.
Si seleccionas cualquier nmero de elementos en el lienzo, a continuacin, puedes ir

a Edicin> 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 tambin. Como la sintaxis de
gradientes requiere tiempo, la transferencia de CSS es realmente muy til.

70


11. Rendimiento
Sketch 3.0 puede tratar fcilmente 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 desempeo 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 pxel alrededor
de cada pxel; que lo convierte en 9 pxeles a ser examinados por pxel para calcular el nuevo
valor promedio. Al aumenta el radio de desenfoque a 2 pxeles aumenta exponencialmente.
* Ten en cuenta que fondo borroso es an ms 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 ms
sombras significan ms retrasos. Las Sombras interiores con propagacin son especialmente
costosas.
No usar varias pginas

Sketch 3.0 puede manejar fcilmente una docena de mesas de trabajo en una pgina, pero
s que se combina con grandes sombras y desenfoques o incluso ms mesas de trabajo, las
cosas se ralentizarn. Una solucin fcil es poner algunas mesas de trabajo en otra pgina.
El texto en contornos
Las operaciones booleanas son clculos matemticos 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 seleccin Toggle
! ^ + L: guas de alineacin Toggle
! ^ + G: Cambiar cuadrcula
! 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 ratn. Zoom inversa usando Z + alt + clic.
! Escapar: Salga de la herramienta actual, anule la seleccin de todas las capas o
volver en el inspector
! Tab / Shift-tab: Ciclo a travs de capas en el grupo actual
Insercin de capas
! R: Inserte un rectngulo
! O: Inserte un valo
! L: Insertar una lnea
! U: Inserte un rectngulo redondeado
! T: Inserte una capa de texto
! V: capa vectorial
! P: herramienta Lpiz
Mover y redimensionar Capas

! + Arrastrar: duplicar una capa
! + Hover: distancia de visualizacin entre otras capas
! + Cambiar el tamao: cambiar el tamao de los dos extremos
! Shift + Redimensionar: preservar la relacin de aspecto Estos son los atajos algo
ocultos, pero muchos ms 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

Ivn Blanco es Consultor de experiencia de usuario (UX) y Diseador de
productos digitales desde hace mas de 15 aos.
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
evolucin.

75


15. Bibliografa
Documentacin 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

Diseo

de interfaces con Sketch 3.0

Diseo de interfaces con Sketch 3.0

Autor: Ivn Blanco Lorenzo

2014. Ivn Blanco Lorenzo

Ttulo del libro: Diseo de interfaces con Sketch 3.0

Aadir capas ......................................................................................................................................................... 25

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

Intercambio de Smbolos .................................................................................................................................. 56

- Plantillas de diseo 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 fcil de entender. Sustituye

Por qu utilizar Sketch 3.0?

- Smbolos, para la reutilizacin de los elementos en tu diseo. Los

- Estilos de texto y estilos de capa, rediseada y unificada para una mejor

- Nuevo diseo del inspector, que te da un acceso ms rpido a todo

- Recortes automticos y capas de exportacin directa

- Exportacin de mltiples resoluciones al mismo tiempo, a cualquier escala.

- Modo de Presentacin. 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 ms

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

Puedes ver el lienzo, tanto en una visin independiente de la resolucin donde se

* Ten en cuenta que Page Up / Page Down cambia entre pginas.

Si te importa el aspecto de cada pxel individual en el documento, entonces este modo es

Opcin Acrcate a una seleccin

Opcin Ampla al lienzo - Anterior Posicin

Forzando la Previsualizacin de pxeles

Reglas, guas, cuadrculas

Pulsa en Ver> Cuadrcula para activar la rejilla, y personalizarla en Configuracin.

La cuadricula bsica tiene ajustes para el tamao de los cuadrados y con qu

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

Puedes activar o desactivar cada relleno desmarcando la casilla de verificacin de su

El siguiente mdulo es para la edicin de capas; rotacin, transformacin, combinacin

El botn 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

Aadir 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.

Smbolos 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

Seleccin de varias capas

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

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

Cambiar el tamao de las capas

Si adems mantienes pulsada la tecla Shift () se redimensionar la capa

La organizacin adecuada de capas puede ayudar en la Exportacin.

Si mantienes presionada la tecla de maysculas, podrs extender tu seleccin como se describe en

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

Cmo editar Formas

Inserta un rectngulo desde la barra de herramientas, ves a Insertar> Forma>

! Recto: Si aplicas el primer modo en tu forma, obtendrs pequeos puntos de

Dibujo frente a Edicin

La seleccin de puntos, la insercin de puntos en las lneas, y todo lo dems, es exactamente

! Unin: El resultado de una operacin de unin es un vector que es la suma de las

! Diferencia: El resultado de una operacin de diferencia es un vector que es

En otras aplicaciones de diseo, despus de aplicar una operacin booleana, el resultado se

Selecciona una o ms capas y haz clic en el botn Transformar de la Barra de

La restriccin de las Mscaras