Diapositivas correspondientes al workshop impartido en Bilbao el día 9 de mayo de 2015. Índice de contenidos: Introducción. ¿Sketch? ¿Por qué Sketch? ¿Alternativas? ¿Carencias? Primer contacto con la interfaz. No te asustes. Sketch no muerde. Jerarquía y organización de contenidos. Importación de contenidos y compatibilidad. Navegando por nuestro documento. Medidas, guías, rejillas… Trabajando con vectores en Sketch. Trabajando con bitmap en Sketch. Trabajando con texto. Máscaras. Estilos y símbolos. Exportación de material like a pro. Plugins, recursos a go-go. Webs de referencia para Sketch lovers. Práctica final: cacharreando con Sketch. Buenas prácticas.

2. Armando Sotoca
@Skeku
www.criteriondg.info + www.thestaterkit.info
Formador en video2brain/lynda.com/LinkedIn
Visual designer en [Q]Interactiva
Autor de contenidos en Tuts+

3. infocriterion@gmail.com
Pasad sin llamar a la puerta. Intento responder… En serio que lo intento :P

4. ¿ ?
I. Introducción

5. Entorno de diseño digital creado por Bohemian Coding,
específicamente desarrollado para entornos MAC.
I. Introducción Qué

6. I. Introducción Por qué
1. Contexto: diseño multidispositivo.
2. Necesidad de un entorno UI design adaptado.
3. ¿Oportunidad de mercado?

7. I. Introducción Sketch es…
1. Simple. Minimalista.
2. Versátil.
3. Ágil.

8. I. Introducción Sketch NO es…
1. Para print design.
2. Infalible.
3. Mágico.

9. I. Introducción Alternativas
Adobe Photoshop
Adobe Fireworks
Adobe Illustrator
Adobe InDesign

10. I. Introducción Alternativas - Menciones especiales
Macaw

11. I. Introducción Alternativas - Menciones especiales
Affinity Designer

12. I. Introducción Alternativas - Menciones especiales
Webflow

13. “You don't want to waste your brain power on programs, you
should use your power in creating and thinking great solutions.”
- Mahdi Al-Farra, diseñador digital
I. Introducción Pausa para frase lapidaria

14. OBVIO.

15. Me siento cómodo con mi flujo de trabajo actual, pero estoy
abierto a nuevas metodologías.
I. Introducción Situación actual
- Un tipo profesional.

16. I. Introducción Situación actual
- Un tipo profesional diciendo la verdad.
Me siento cómodo con mi flujo de trabajo actual, pero estoy
abierto a nuevas metodologías.
Si no me cuesta mucho trabajo y esfuerzo hacerlo, claro.

17. I. Introducción ¿Qué tiene Sketch que ofrecerme?
1. Curva de aprendizaje mínima.
2. Interfaz limpia y sencilla. Lienzo infinito.
3. Infinidad de plantillas para no partir de cero. Creación de retículas.
4. Jerarquía mediante artboards y páginas.
5. Estilos de texto, símbolos.
6. Múltiples opciones de exportación. Multi-exportación.
7. Estilos CSS. Control de versiones.
8. Gran soporte por parte de la comunidad y extensión mediante plugins.

18. I. Introducción ¿Qué NO tiene Sketch que ofrecerme?
1. Gestión de modos de color. No CMYK, sorry.
2. Edición avanzada de contenido bitmap.
3. Compatibilidad PSD.
4. Disponibilidad en entornos Windows.
5. Estabilidad 100%, libre de cuelgues o bugs.

19. ¿Preguntas?

20. En Sketch nos vamos a encontrar tres zonas de opciones
principales, además del lienzo o área de trabajo.
II. Interfaz Introducción al uso de Sketch

21. II. Interfaz Introducción a la UI de Sketch
Barra de herramientas principal.
Área de gestión de artboards, páginas y capas.
Área de opciones generales, alineación, estilo y exportación. El “inspector”.

22. II. Interfaz Introducción a la UI de Sketch
Comando + opción + (1,2,3) para mostrar y ocultar.

23. II. Interfaz Introducción a la UI de Sketch
El lienzo en Sketch es infinito. Puedo empezar a importar o
crear contenido en un área de trabajo sin límites.

24. II. Interfaz Introducción a la UI de Sketch
Dos modos de visión: normal y “pixel”.

25. IV. Guías y medidas
Tip: Podemos
personalizar la barra
de herramientas.

26. III. Jerarquía
¿Cómo se organizan los contenidos en Sketch?

27. III. Jerarquía
Páginas - Artboards - Grupos de capas - Capas

28. III. Jerarquía Capas
Una capa es la unidad mínima de contenido dentro de un
documento de Sketch. Podemos crear de manera opcional
grupos de capas.

29. III. Jerarquía Capas

30. III. Jerarquía
Páginas - Artboards - Grupos de capas - Capas

31. III. Jerarquía Artboards
Una artboard o mesa de trabajo es un marco de dimensiones
fijas sobre la que poder trabajar. Estructura jerárquica opcional
pero necesaria para imprimir. Podemos añadir múltiples mesas
de trabajo al lienzo sobre el que estemos trabajando.

32. III. Jerarquía Artboards

33. III. Jerarquía
Páginas - Artboards - Grupos de capas - Capas

34. III. Jerarquía Páginas
Una página es la estructura jerárquica de más alto nivel dentro
de Sketch. Es el equivalente a un “documento nuevo”. Podemos
añadir múltiples páginas a un documento de Sketch.

35. III. Jerarquía Páginas

36. IV. Guías y medidas
Reglas, guías y cuadrículas en Sketch

37. IV. Guías y medidas
En Sketch tenemos “smart guides” o guías inteligentes, reglas,
creación de rejillas y retículas personalizadas y medición de
distancias entre elementos.

38. IV. Guías y medidas
Si usamos mesas de trabajo, cada mesa de trabajo puede tener
una rejilla personalizada. Estas rejillas son especialmente
interesantes para diseño de apps y webs.

39. IV. Guías y medidas

40. IV. Guías y medidas

41. IV. Guías y medidas

42. IV. Guías y medidas
Tip: Resetear posición
de reglas haciendo
doble clic en el
“cuadrado blanco”
entre ellas.

43. IV. Guías y medidas
Tip: Cada mesa de
trabajo tiene su propia
cuadrícula
personalizada.

44. IV. Guías y medidas
Sketch nos pone fácil la medición de distancias entre
elementos, así como la creación de elementos de tamaños
similares y de posicionamientos equidistantes.
Medidas y distancias

45. WHAT?

46. 1. Al crear un elemento o una mesa de trabajo vemos sus dimensiones.
2. Con la tecla Opción/Alt podemos medir distancias.
3. Al modificar las dimensiones de un objeto, nos muestra la similitud con otros.
4. Guías “imantadas” al colocar elementos equidistantes entre sí.
IV. Guías y medidas Medidas y distancias

47. V. Trabajo vectorial en Sketch
Trabajando con vectores

48. V. Trabajo vectorial en Sketch Formas básicas

49. V. Trabajo vectorial en Sketch Herramienta vector y lápiz

50. V. Trabajo vectorial en Sketch Edición
Doble clic para entrar en modo edición / Botón edit

51. V. Trabajo vectorial en Sketch Edición
Recto: líneas rectas entre el punto seleccionado
y los adyacentes.

52. V. Trabajo vectorial en Sketch Edición
Espejo: La modificación en uno de los tiradores
se “refleja” en el contrario.

53. V. Trabajo vectorial en Sketch Edición
Desconectado: Los tiradores son
independientes.

54. V. Trabajo vectorial en Sketch Edición
Asimétrico: Los tiradores se “reflejan” pero la
distancia es independiente.

55. V. Trabajo vectorial en Sketch Edición
Corners: Para redondear los vértices de los
puntos seleccionados.

56. V. Trabajo vectorial en Sketch Edición
Redondeo de píxel: Control total del aspecto
de nuestros trazados.

57. V. Trabajo vectorial en Sketch Opciones de estilo vectorial
1. Bordes redondeados.
2. Modos de fusión.
3. Múltiples bordes.
4. Múltiples rellenos.
5. Múltiples sombras.
6. Efectos de difuminado y desenfoque.

58. V. Trabajo vectorial en Sketch Operaciones buleanas
A veces las formas básicas se nos quedan cortas. El primer
“arrebato” es dibujar lo que necesitamos pero las operaciones
buleanas nos permiten combinar formas vectoriales de manera
no destructiva y reversible.

59. V. Trabajo vectorial en Sketch Operaciones buleanas

60. V. Trabajo vectorial en Sketch
Unión: suma de las dos
áreas de trazados.
Operaciones buleanas

61. V. Trabajo vectorial en Sketch
Resta: elimina el área de la
forma superior de la
inferior.
Operaciones buleanas

62. V. Trabajo vectorial en Sketch
Intersección: resultado del
área superpuesta de los
trazados.
Operaciones buleanas

63. V. Trabajo vectorial en Sketch
Diferencia: inverso de la
operación de intersección.
Operaciones buleanas

64. V. Trabajo vectorial en Sketch Operaciones buleanas
Al usar operaciones buleanas, creamos subtrazados que
siguen siendo totalmente independientes y editables.

65. V. Trabajo vectorial en Sketch Operaciones buleanas
Tip: Si vemos algo
“raro” al usar
operaciones buleanas,
probamos esto.

66. V. Trabajo vectorial en Sketch Transformaciones y operaciones extra
1. Escala.
2. Rotación.
3. Transformación.
4. Tijera.
5. Rotar copias.
6. Flatten y Split.
7. Crear copias en rejilla.

67. V. Trabajo vectorial en Sketch Operaciones buleanas
Tip: La herramienta
“Scale” también escala
proporcionalmente los
estilos aplicados.

68. VI. Trabajo bitmap en Sketch
Trabajando con bitmaps

69. VI. Trabajo bitmap en Sketch Importar imágenes

70. VI. Trabajo bitmap en Sketch Edición
Doble clic para entrar en modo edición / Botón edit

71. Podemos hacer una
selección rectangular o
mediante la “varita
mágica”.
VI. Trabajo bitmap en Sketch Edición
Y luego recortar, rellenar
de color, vectorizar…

72. También tenemos a
nuestra disposición
ajustes sencillos de color
y herramientas de
transformación básicas.
VI. Trabajo bitmap en Sketch Edición

73. V. Trabajo vectorial en Sketch Operaciones buleanas
Cualquier contenido
dentro de Sketch
puede convertirse a
bitmap.

74. VII. Máscaras
Máscaras

75. VII. Máscaras Creación de máscaras
Dos objetos seleccionados - botón Mask

76. VII. Máscaras Creación de máscaras
Se crea automáticamente un
grupo y el elemento por
encima hace las veces de
máscara.

77. VII. Máscaras Creación de máscaras
Si añadimos objetos al
grupo, se enmascaran
automáticamente.

78. VII. Máscaras Creación de máscaras
Podemos “obviar” la
máscara mediante la opción
Ignore Underlying Mask.

79. VII. Máscaras Creación de máscaras
Hay dos tipos de máscara
disponibles: Outline y
Alpha.

80. VIII. Texto
Trabajando con texto en Sketch

81. VIII. Texto
La representación de texto en Sketch utiliza el motor nativo del
sistema. De esta forma mostramos el texto de una manera
mucho más fiel a su visualización en el navegador.

82. Suavizado subpixel
Detalles de “calidad”
VIII. Texto

83. Suavizado subpixel
Detalles de “calidad”
VIII. Texto

84. Suavizado subpixel
Detalles de “calidad”
VIII. Texto

85. Suavizado subpixel
Detalles de “calidad”
VIII. Texto

86. VIII. Texto
1. Tipo de letra.
2. Peso.
3. Opciones adicionales + color + tamaño.
4. Alineación.
5. Tipo de ancho de caja.
6. Espaciados.
Estilo

87. VIII. Texto Algunas anotaciones extra
1. Puedo editar texto fácilmente aún habiendo aplicado transformaciones.
2. No puedo usar texto como máscara.
3. Puedo convertir el texto a trazado.
4. No puedo hacer fluir texto dentro de un trazado.
5. Sí puedo unir texto a un trazado.

88. Tip: Podemos arrastrar
capas de texto de un
trazado a otro y usar
Paths - Reverse order
para modificar el
efecto visual.
VIII. Texto Unir texto a trazado

89. Una gran forma de ser organizados y productivos cuando
trabajamos con texto es creando estilos de texto por ejemplo
para encabezados, párrafos, citas, etc.
VIII. Texto Estilos de texto

90. Estilos de texto: podemos aplicar
automáticamente cambios de estilo
a diferentes capas de texto.
VIII. Texto Estilos de texto
Los estilos de texto se comparten
entre páginas de un mismo
documento.

91. Tip: da nombres representativos a
los estilos de texto y crea una
nomenclatura que entienda todo el
equipo de trabajo.
VIII. Texto Estilos de texto
H1 /
H2 /
H3 /
p /
blockquote /

92. Un segundo…

93. Si Sketch tiene la capacidad de crear estilos para textos, ¿hay
algo similar para estilos de elementos? ¿Y símbolos?

94. SÍ.

95. Fuck yeah.

96. IX. Estilos y símbolos
Uso de estilos y símbolos

97. IX. Estilos y símbolos
Los estilos y símbolos nos permiten reutilizar componentes o
estilos visuales y agilizar nuestro flujo de trabajo
considerablemente.

98. IX. Estilos y símbolos
Los símbolos son introducidos en Sketch 3 y nos permiten
reutilizar contenido en diferentes páginas y mesas de trabajo
de un mismo documento.
Símbolos

99. IX. Estilos y símbolos Símbolos
Los símbolos son
reconocibles por el
cambio de color del
icono de grupo en la
lista de capas.

100. IX. Estilos y símbolos Símbolos
Tip: Si usamos los símbolos es útil saber que
podemos excluir el contenido de capas de
texto.

101. IX. Estilos y símbolos Símbolos
Tip: Si usamos / en el nombre del símbolo,
creamos jerarquía.

102. IX. Estilos y símbolos Símbolos
Tip: Podemos sustituir instancias de símbolos.
Si hay capas de texto dentro, tienen el mismo
nombre y activamos la opción correspondiente,
nos sirve para cambiar de “estado los botones”.

103. IX. Estilos y símbolos
Los estilos, al igual que los estilos de texto nos permiten
vincular el aspecto visual de diferentes elementos.
Estilos

104. IX. Estilos y símbolos Atención, pregunta:
¿Cuántos estilos y símbolos podríamos tener aquí?

105. X. Exportación
Exportación de contenidos
(probablemente la mejor característica de Sketch)

106. Hacemos clic directamente en el botón exportar. Se creará una
“sección” o área de recorte que indica a Sketch un área de
exportación.
Exportación simple de elementosX. Exportación

107. Exportación simple de elementosX. Exportación
Trim Transparent Pixels recortará el área de
exportación si “sobran píxels transparentes”.
Por ejemplo un área de recorte de 80x80 con un
icono de 32x32 exportaría una imagen de 32x32
si activamos esta opción.

108. Exportación simple de elementosX. Exportación
Background Color nos permite dar un color
definido al área transparente dentro del recorte.

109. Exportación simple de elementosX. Exportación
Size: factor multiplicador que nos permite
escalar el tamaño del contenido a exportar. 1x
equivale al tamaño original.
Podemos añadir sufijos al nombre de la imagen
exportada y definir su formato. @2x por ejemplo.
Los formatos compatibles
son .png, .jpg, .tiff, .pdf, .eps, .svg

110. Exportación simple de elementosX. Exportación
Tip: podemos jugar con el factor multiplicador
tanto como queramos: 100x, 1,75x… Incluso
podemos usar los parámetros “w” para anchura
y “h” para altura.
Ejemplo: size de 60w exportará el contenido
con un ancho de 60px y un alto proporcional.

111. Exportación simple de elementosX. Exportación
Tip: Podemos renombrar el nombre
del área de recorte, añadir / y así
crear jerarquía de carpetas al
exportar.

112. Si tengo al menos una mesa de trabajo y hago clic en Exportar,
Sketch entenderá que quieres exportar ese contenido y no el
que tengas sobre el lienzo.
Exportación selectivaX. Exportación

113. X. Exportación Exportación selectiva
La exportación por defecto de una mesa de trabajo no crea un
área de recorte automáticamente. Si añadimos nuevas mesas
de trabajo, haremos clic en el icono “+”.

114. X. Exportación
Puedo seleccionar cualquier objeto
de mi documento y hacer clic en la
opción Make Exportable.
Exportación selectiva
Puedo seleccionar varios objetos a
la vez y hacer la misma operación,
siendo objetos exportables de
manera individual.

115. X. Exportación
Se añadirá automáticamente la
opción de poder exportar el objeto
individualmente.
Exportación selectiva
Esta opción no añade una área de
recorte, hace al objeto
“directamente exportable”.

116. X. Exportación Exportación selectiva
Puedo optar por añadir áreas de
recorte automáticamente mediante
la opción del menú principal.
Tip: Para usarla con elementos
dentro de un grupo, usar la tecla
comando.

117. Export Group Contents Only hace que las áreas de recorte
dentro de un grupo ignoren el resto de contenido
Exportación selectivaX. Exportación

118. X. Exportación
Podemos realizar exportación
múltiple de un sólo objeto
exportable o de una área de recorte.
Exportación selectiva múltiple

119. X. Exportación Exportación directa
Podemos arrastrar objetos hacia el escritorio o por ejemplo el
programa de correo para exportar directamente en
formato .png (.pdf pulsando la tecla alt).

120. X. Exportación Exportación propiedades CSS
Tan sencillo como clic
derecho et voilá!

121. X. Exportación Algunas consideraciones
1. Make Exportable para exportar iconos o elementos sueltos.
2. Áreas de recorte para exportar documentos completos.
3. Exportar PDF con degradados a transparente da problemas.
4. Exportar PDF con transparencia da problemas en Vista previa.
5. Las áreas de recorte pueden variar 1px en tamaño si el objeto no está
posicionado en coordenadas sin decimales.
6. Puedo colocar un artboard debajo de otros artboards para exportar flujos
completos de pantalla

122. XI. Importación
Importación de contenidos

123. XI. Importación
1. JPG.
2. PNG.
3. TIFF.
4. SVG.
5. PDF.
6. EPS.
7. PSD y AI* (sólo como contenido bitmap).

124. XII. Plugins
Extendiendo Sketch

125. XII. Plugins
Extender las funcionalidades
o automatizaciones en
Sketch es tan sencillo como
descargar plugins y
colocarlos en su carpeta
correspondiente….

126. XII. Plugins
…o descargar Sketch Toolbox, un gestor/buscador de plugins
independiente.

127. XII. Plugins
Sketch Measure
https://github.com/utom/sketch-measure
Plugins a tener en cuenta. Muy en cuenta.
Para añadir anotaciones rápidas sobre mediciones y propiedades.

128. XII. Plugins
Notebook
https://github.com/marcosvidal/Sketch-Notebook
Plugins a tener en cuenta. Muy en cuenta.
Para añadir anotaciones y comentarios en general.

129. XII. Plugins
Sketch Commands
https://github.com/bomberstudios/sketch-commands
Plugins a tener en cuenta. Muy en cuenta.
Varios procesos de automatización y exportación.

130. XII. Plugins
Style Inventory
https://github.com/getflourish/Sketch-Style-Inventory
Plugins a tener en cuenta. Muy en cuenta.
Creación automatizada de guías de estilo.

131. XII. Plugins
Content Generator y Day Player
https://github.com/timuric/Content-generator-sketch-plugin +
https://github.com/tylergaw/day-player
Plugins a tener en cuenta. Muy en cuenta.
Generar contenido “dummy”.

132. XII. Plugins
Para todo lo demás.

133. XII+I. Links imprescindibles
Linkitos

134. XII+I. Links imprescindibles
Sketch App Sources
http://www.sketchappsources.com/
Sketch Talk
http://sketchtalk.io/
Sketch Subreddit
http://www.reddit.com/r/sketchapp/
Sketch official newsletter
https://bohemian.curated.co/

135. THE END
¡Muchas gracias!