Diseño de interfaces con Sketch 3 - ivanblanco.es · El inspector de la derecha te permite ajustar las propiedades de la capa seleccionada. 4. El lienzo de trabajo está en el medio

Diseño de interfaces con Sketch 3.0

1

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


2

Diseño de interfaces con Sketch 3.0 Reservados todos los derechos. No se permite la reproducción total o parcial de esta obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier forma o por cualquier medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de los titulares del copyright. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual. Autor: Iván Blanco Lorenzo Primera edición: 2014 © 2014. Iván Blanco Lorenzo © 2014. Bohemiancoding http://bohemiancoding.com/sketch/support/documentation/ Título del libro: Diseño de interfaces con Sketch 3.0 Derechos Reservados, (C)2014


3

Índice 1. Introducción ....................................................................................................................................................... 8

2. La Interfaz ........................................................................................................................................................ 11

Lienzo .................................................................................................................................................................... 11

Zoom en el Lienzo ........................................................................................................................................ 13

Píxel zoom ....................................................................................................................................................... 13

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

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

Opción Retina ................................................................................................................................................ 13

Diseño de cuadrícula .................................................................................................................................... 14

Forzando la Previsualización de píxeles ................................................................................................... 14

Reglas, guías, cuadrículas ............................................................................................................................. 14

Medición ........................................................................................................................................................... 15

Inspector de configuración ............................................................................................................................... 17

a. Atributos generales ................................................................................................................................ 17

b. Atributos Estilo ..................................................................................................................................... 18

Barra de herramientas ........................................................................................................................................ 20

Personalizar la barra de herramientas ....................................................................................................... 20

Páginas ................................................................................................................................................................... 20

Mesas de trabajo ................................................................................................................................................. 21

Añadir mesas de trabajo ............................................................................................................................... 21

Rejillas y Reglas .............................................................................................................................................. 21

Plantillas ........................................................................................................................................................... 22

Mesas de trabajo ............................................................................................................................................. 22

Impresión ......................................................................................................................................................... 22

Lista de capas ....................................................................................................................................................... 22

Varias páginas ................................................................................................................................................. 22

Mesas de trabajo ............................................................................................................................................. 23

Máscaras ........................................................................................................................................................... 23

Operaciones booleanas ................................................................................................................................. 23

Símbolos y Estilos Compartidos ................................................................................................................ 24

3. Las Capas en Sketch 3.0 ............................................................................................................................... 25


4

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

Opciones avanzadas ............................................................................................................................................. 26

Selección de Capas ............................................................................................................................................. 26

Mover capas ......................................................................................................................................................... 27

Objetos duplicados ............................................................................................................................................. 28

Cambiar el tamaño de las capas ...................................................................................................................... 28

Edición de Capas ................................................................................................................................................ 29

Agrupación de Contenido ................................................................................................................................ 29

Grupos de capas .................................................................................................................................................. 29

Click-Through .................................................................................................................................................... 30

Redimensionar Proporcionalmente ............................................................................................................... 30

4. Formas (Shapes) .............................................................................................................................................. 31

Opciones adicionales ......................................................................................................................................... 31

Cómo editar Formas .......................................................................................................................................... 31

Diferentes Modos ............................................................................................................................................... 32

Dibujo frente a Edición .................................................................................................................................... 33

Cerrado vs Abierto ............................................................................................................................................. 33

Accesos directos ................................................................................................................................................... 34

Selección múltiple .............................................................................................................................................. 34

Operaciones booleanas ...................................................................................................................................... 35

Subtrazados .......................................................................................................................................................... 35

Operaciones ......................................................................................................................................................... 35

Lista de capas ....................................................................................................................................................... 36

Acoplar capas ....................................................................................................................................................... 36

Transformar ......................................................................................................................................................... 37

Mascaras ................................................................................................................................................................ 37

La restricción de las Máscaras .......................................................................................................................... 38

Máscara con Forma ............................................................................................................................................ 38

Máscaras con Alpha ........................................................................................................................................... 39

Tijeras .................................................................................................................................................................... 39

Copiar-Rotar ........................................................................................................................................................ 39

Splitting ................................................................................................................................................................. 40

Lápiz ....................................................................................................................................................................... 40


5

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

5. Texto .................................................................................................................................................................. 42

Capas de texto ..................................................................................................................................................... 42

Añadir texto ......................................................................................................................................................... 42

Cambiar el tamaño del texto ........................................................................................................................... 42

Inspector del texto .............................................................................................................................................. 42

Color del texto ..................................................................................................................................................... 43

Auto vs Fijo .......................................................................................................................................................... 43

Rendering ............................................................................................................................................................. 44

Subpixel-antialiasing .......................................................................................................................................... 44

Cuando se produce un error ............................................................................................................................ 45

Exportación .......................................................................................................................................................... 45

Diseñar para iOS ................................................................................................................................................ 46

El texto en contornos ........................................................................................................................................ 46

Estilos Compartidos ........................................................................................................................................... 46

Creación de Estilos ............................................................................................................................................. 47

Nuevas Capas ...................................................................................................................................................... 47

Texto en recorrido .............................................................................................................................................. 48

Convertir en contornos ..................................................................................................................................... 48

Los campos de texto ........................................................................................................................................... 49

Arriba y Abajo ................................................................................................................................................. 49

Matemáticas .................................................................................................................................................... 49

Ajustar Valores ............................................................................................................................................... 49

Eliminar “Estilo de texto” ................................................................................................................................ 50

6. Imágenes ........................................................................................................................................................... 51

Edición de Bitmap ............................................................................................................................................. 51

Sectores .................................................................................................................................................................. 52

Ajuste de color ..................................................................................................................................................... 53

7. Símbolos ........................................................................................................................................................... 54

Crear nuevo símbolo ......................................................................................................................................... 54

Excluir texto ......................................................................................................................................................... 55

Organizar símbolos ............................................................................................................................................ 55

Duplicación Símbolos ....................................................................................................................................... 56


6

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

8. Estilos ................................................................................................................................................................. 57

Copiar y pegar Estilos ........................................................................................................................................ 57

Alineamiento ........................................................................................................................................................ 57

Acceso directo a la opacidad de la Capa ....................................................................................................... 57

Rellenos ................................................................................................................................................................. 58

Adición de rellenos ............................................................................................................................................. 58

Patrón de relleno ................................................................................................................................................. 59

Relleno de ruido .................................................................................................................................................. 59

Degradados ........................................................................................................................................................... 60

Bordes .................................................................................................................................................................... 60

Color o Degradado ............................................................................................................................................ 61

Líneas discontinuas ............................................................................................................................................ 61

Desenfoque ........................................................................................................................................................... 61

Rendimiento ........................................................................................................................................................ 62

Reflexión ............................................................................................................................................................... 62

Estilos Compartidos ........................................................................................................................................... 62

Color ...................................................................................................................................................................... 63

Colores HSB ........................................................................................................................................................ 63

Colores Comunes ............................................................................................................................................... 63

Degradados ........................................................................................................................................................... 63

Degradados radiales ........................................................................................................................................... 64

Los gradientes circulares ................................................................................................................................... 64

Gradiente Bar ...................................................................................................................................................... 64

Accesos directos ................................................................................................................................................... 65

Degradados en Bordes ....................................................................................................................................... 65

9. Importación ..................................................................................................................................................... 66

Formatos de archivo admitidos ....................................................................................................................... 66

Formatos no admitidos ..................................................................................................................................... 66

10. Exportación ..................................................................................................................................................... 67

Capas o secciones ................................................................................................................................................ 67

Exportación de capas ......................................................................................................................................... 67

Lista de capas ....................................................................................................................................................... 68


7

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

Adición de secciones .......................................................................................................................................... 68

Nombrar las secciones ....................................................................................................................................... 68

Múltiples Tamaños ............................................................................................................................................ 69

Sólo Contenido del grupo ................................................................................................................................ 69

Recorte .................................................................................................................................................................. 69

Formatos de archivo .......................................................................................................................................... 70

Atributos CSS ...................................................................................................................................................... 70

11. Rendimiento ................................................................................................................................................... 71

Desenfoques ......................................................................................................................................................... 71

Sombras ................................................................................................................................................................. 71

No usar varias páginas ....................................................................................................................................... 71

El texto en contornos ........................................................................................................................................ 71

12. Accesos directos .............................................................................................................................................. 73

Accesos directos generales ................................................................................................................................. 73

Inserción de capas ............................................................................................................................................... 73

Mover y redimensionar Capas ........................................................................................................................ 73

13. Recursos ........................................................................................................................................................... 74

14. Sobre el autor .................................................................................................................................................. 75

15. Bibliografía ...................................................................................................................................................... 76


8

1. Introducción Sketch 3.0 es una aplicación profesional para crear gráficos vectoriales e interfaces digitales, desarrollada por Bohemian Coding y disponible únicamente para ordenadores Mac.

Sketch 3.0 es una solución de diseño mucho más l igera y rápida que otras alternativas como Photoshop o Illustrator. Sketch 3.0 es una aplicación muy ligera (apenas 24 MB de espacio en disco), en comparación con los 1GB de Photoshop. Dispone de todas las opciones para crear desde cero desde un simple símbolo o icono hasta toda la interfaz de una aplicación móvil o una página web:

- Plantillas de diseño web y iOS de serie - Permite copiar los Estilos CSS al portapapeles (incluyendo gradientes) - Permite definir en el lienzo áreas de exportación, como imágenes. - Cuadrícula de 960 por defecto, con soporte para opciones de cuadrícula más avanzados - Permite crear varias páginas dentro de un solo documento - Diseño para Web Responsive Design gracias a las Mesas de trabajo - Y mucho más…

Lo primero que ves al entrar en el programa es un lienzo infinito. No hay ninguna ventana que pregunte las unidades a utilizar o qué tamaño debe ser tu lienzo. No tienes que aprender sobre DPI, unidades, tamaños de lienzo… Todo esto sólo importa una vez que hayas realizado tu diseño. Sketch 3.0 tiene soporte para estilos de mapa de bits básicos (por ejemplo, correcciones de color) pero no puede hacer corrección de fotos o dibujar con pinceles.

Sketch 3.0 es una herramienta muy potente y fácil de entender. Sustituye perfectamente a programas como Adobe Photoshop, Il lustrator o Fireworks para la mayoría de las tareas de diseño digital.


9

¿Por qué utilizar Sketch 3.0?

1. Herramientas muy potentes y una interfaz sencil la y elegante, en un solo paquete.

2. El diseño vectorial es, actualmente, la mejor manera de diseñar sitios web, iconos o interfaces y el l ienzo de trabajo es infinito.

3. Es una aplicación de una sola ventana, y lo que necesitas esta siempre a tu alcance. Es una aplicación específica para diseñadores de interfaz.

4. Dispone de Esti los de texto, reutilizables en todo el proyecto. 5. Dispone de Herramientas de exportación muy útiles si diseñas APP

móviles 6. Puedes ver el lienzo, tanto en una visión independiente de la resolución

donde se tiene una precisión infinita, o puedes activar la Previsualización de píxeles y sabrás exactamente cómo se ve tu diseño tras la exportación.

7. Representación nativa de las fuentes, por lo que puedes estar seguro de que el texto siempre se ve real al 100%.

8. Optimizado para pantallas Retina y no Retina

MEJORAS EN LA VERSIÓN 3: - Símbolos, para la reutil ización de los elementos en tu diseño. Los Símbolos permiten reutilizar grupos enteros de contenido en varios lugares en su diseño. Piensa en los elementos de interfaz como botones, encabezados y pies de página. Cambia una vez, y se actualizan en todo el documento. - Esti los de texto y esti los de capa, rediseñada y unificada para una mejor experiencia. Los Estilos de capa se actualizan automáticamente en todas las capas asociadas. Los Estilos de texto compartidos para compartir información de fuente y de párrafo entre las capas de texto - Nuevo diseño del inspector, que te da un acceso más rápido a todo - Recortes automáticos y capas de exportación directa - Exportación de múltiples resoluciones al mismo tiempo, a cualquier escala. Las Mesas de trabajo y las Áreas de recorte permiten exportar múltiples imágenes de un solo documento - Modo de Presentación. Permite visualizar tu trabajo a pantalla completa, ocultando todos los controles (perfecto para enseñar tus diseños).


10

Construido para Mac , Sketch admite las versiones de OS X y Auto Save , lo que te permite centrarte en tu trabajo.

Compatibil idad: OS X 10.8 o posterior, procesador de 64 bits


11

2. La Interfaz La interfaz de Sketch 3.0 tiene un diseño minimalista y es altamente personalizable. Está creada pensando en la eficiencia del diseñador.

1. La Barra de herramientas en la parte superior contiene las acciones más importantes (se puede personalizar con las acciones que desees).

2. El panel de la izquierda contiene todas las capas del documento. 3. El inspector de la derecha te permite ajustar las propiedades de la capa

seleccionada. 4. El l ienzo de trabajo está en el medio.

No hay paneles f lotantes. El inspector cambiará para mostrar las herramientas que necesitas en cada momento, y oculta todo lo demás. De esa manera siempre tienes un punto de vista completamente despejada del lienzo.

Lienzo

El l ienzo de dibujo es de tamaño infinito. Puedes desplazarte por donde quieras en cualquier dirección, por lo que tienes total libertad sobre la forma de configurar tu área de trabajo.


12

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

Puedes ver el lienzo, tanto en una visión independiente de la resolución donde se tiene una precisión infinita, o puedes activar la vista previa de píxeles y sabrás exactamente cómo se verá cada pixel cuando sea exportado a un formato de mapa de bits (como JPG o PNG).

Ten en cuenta que algunos efectos como el desenfoque, en modo de vista Previa de píxeles, presentará una

falta de definición, ya es un efecto basado en píxeles.

Navegar por el l ienzo es fácil . Puedes utilizar la rueda de desplazamiento del ratón para desplazarte por él. También puedes mantener pulsada la barra espaciadora y hacer clic y arrastrar para desplazarte por el lienzo.

Si no has seleccionado ningún objeto, puede utilizar las teclas de flecha para moverte por el lienzo también.

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


13

Zoom en el Lienzo

Aparte de que hay varios accesos directos en el menú “Ver” para acercar y alejar el contenido específico, también puedes mantener pulsada la tecla ⌘ y utilizar la rueda de desplazamiento del ratón para acercar y alejar el lienzo.

Por último, puedes utilizar la tecla "Z" para ampliar rápidamente un área en particular. Haz clic + arrastrar en cualquier lugar en el lienzo para ampliar la vista en esa zona.

Píxel zoom Puedes ver tu diseño de dos maneras. Estos modos pueden activarse y desactivarse en el menú “Ver”, haga clic en “Mostrar / Ocultar cuadrícula de píxeles”.

Ten en cuenta que cuando estás en el 100% de zoom (tamaño real) no hay diferencia entre ambos modos, pero lo vas a ver cuándo te acerques.

Si te importa el aspecto de cada píxel individual en el documento, entonces este modo es para ti. Lo que se ve es básicamente el equivalente de la primera exportación a PNG.

Si no te preocupa esto, entonces la vista por defecto es el mejor; cuando te acerques verás que todo sigue con curvas suaves.

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

Si haces zoom a través de “Ver> Acercar / Alejar comandos”, por defecto el zoom será en el centro del lienzo. Al activar la casilla de verificación “Acércate a una selección“ el zoom se hará en las capas seleccionadas.

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

Usando esta opción, el zoom cambiará a la posición que tenía en el lienzo antes de empezar a acercarse.

Opción Retina Las pantallas Retina para Mac y iOS utilizan cuatro píxeles físicos para representar un píxel “tradicional”. La nueva pantalla Retina del MacBook Pro tiene cuatro veces más píxeles que los modelos más antiguos, para mostrar los objetos en el mismo tamaño de pantalla. Utilizan estos píxeles adicionales para proporcionar más detalle a las fuentes, imágenes, etc.


14

Por defecto Sketch 3.0 hace lo mismo; los píxeles adicionales se util izan para proporcionar más detalle, pero el tamaño físico del dibujo sigue siendo el mismo. Si no deseas este comportamiento y realmente quieres que cada píxel físico sea representado como un píxel, desactiva la opción de “Retina en el l ienzo”.

Diseño de cuadrícula

Las columnas del diseño de la cuadricula se pueden llenar, ya sea con un color (Rellenar cuadrícula), o se pueden dibujar los bordes de las columnas (Outline Stroke)

.

Forzando la Previsualización de píxeles

A veces encontrarás que no se puede desactivar la vista previa de píxeles. Esto es porque el “efecto de desenfoque” tiene que trabajar en datos de píxeles. Esto significa que la única manera que tiene Sketch 3.0 para mostrar estos efectos es rasterizando sus vectores. Por lo tanto la Visión independiente de la resolución ya no es aplicable, por lo que se muestra el efecto en Vista previa de píxeles.

Reglas, guías, cuadrículas Estas características en Sketch 3.0 ayudan a posicionar las capas en la posición exacta que uno quiere; ya sea en una cuadrícula, líneas o entre las propias capas.


15

Guías

Por defecto, las guías automáticas están activadas en el lienzo. Ten en cuenta que se pueden activar con el mando (^) + 'L'. Cuando haya cambio de tamaño o muevas alguna capa, Sketch 3.0 tratará de ayudarte a alinear con otras capas automáticamente. Cuando Sketch 3.0 encaje su capa en otra, verás una línea roja que muestra exactamente lo que está ajustando.

Reglas

Sketch 3.0 tiene reglas, que están ocultas por defecto. Como hemos dicho antes, Sketch 3.0 tiene un lienzo infinito y por eso los reglas no son fijas; se puede agarrar y arrastrar las reglas en torno a definir su propio origen “cero”.

Puedes “hacer doble clic” en cualquier lugar de la regla para añadir guías manuales. Para mover una guía, tienes que “agarrarla” dentro de la regla, y entonces puedes arrastrarla. Para quitar una guía, arrástrala fuera de la vista y verás que desaparece con un “puf”.

Cuadrícula

Pulsa en “Ver> Cuadrícula” para activar la rejilla, y personalizarla en “Configuración”. Sketch 3.0 es compatible con dos tipos de rejillas; una cuadrícula normal /estándar y una cuadricula de diseño. Dependiendo del tipo de trabajo que haces en Sketch 3.0 es posible que desees utilizar uno u otro. La diferencia es fácil de ver:

• La cuadricula básica tiene ajustes para el tamaño de los cuadrados y con qué frecuencia desea que aparezca una línea más gruesa. El tamaño de la cuadrícula por defecto es 20 píxeles y líneas gruesas cada 10 plazas.

• En la cuadrícula de diseño se puede cambiar el ancho total de la "página" y el número de columnas. También se puede ajustar la altura de las "filas" y el tamaño de las columnas. Existen ajustes adicionales para el relleno.

Sketch 3.0 hará todo lo posible para colocar la cuadrícula de diseño en el centro de su mesa de trabajo, pero después de cambiar el tamaño de la mesa de trabajo, esto puede cambiar. En ese caso se pulsa el botón 'Center' para centrar la cuadrícula en la mesa de trabajo con facilidad.

Medición Sketch 3.0 cuenta con excelentes herramientas integradas para asegurarte que tu contenido está alineado correctamente. Es una gran ayuda para representar las “cotas” de un


16

interfaz. Las “cotas” son de gran ayuda para los desarrolladores, ya que les proporcionamos todas las medidas exactas de los elementos en pixeles.

Distancia

Cuando se mantiene pulsada la tecla Opción / Alt (⌥) en el teclado, Sketch 3.0 calculará la distancia entre la capa que has seleccionado y la capa que está flotando.

Además, al mover un objeto Sketch 3.0 te mostrará la distancia a otros objetos cuando es igual a otras distancias existentes:

Tamaño

De la misma manera, si cambias el tamaño de una capa, Sketch 3.0 te ayudará al indicar otras capas que tienen la misma anchura o altura.


17

Inspector de configuración

El Inspector de la derecha te permite ajustar la configuración de la capa actual, o las opciones para la herramienta actual.

Cuando tienes una capa seleccionada, verás que el inspector está dividido en secciones:

a. Atributos generales

Los estilos generales de capa están en la parte superior; la posición, el tamaño, la opacidad, la mezcla y (dependiendo del tipo de capa) algunas opciones especiales, como el radio de la esquina de un rectángulo o el número de puntos de una forma poligonal.


18

b. Atributos Esti lo

Los atributos de relleno tienen cada uno su propia sección. Para agregar un nuevo relleno, simplemente haz clic en el icono “+” en el título de la sección:

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


19

Puedes activar o desactivar cada relleno desmarcando la casilla de verificación de su izquierda. Cuando uno o más rellenos están “apagados”, puedes eliminarlos “haciendo clic“ en el icono de papelera que aparece en el título de la sección:

Para cambiar las opciones de un relleno o un borde, haz clic en el icono del “engranaje”:


20

Barra de herramientas

La “Barra de herramientas” contiene todas las herramientas que necesitas para hacer tus diseños. El primer conjunto de herramientas, en la barra de herramientas por defecto, son para añadir nuevas capas, formas, imágenes, símbolos y más.

Las opciones “Agrupar” y “Desagrupar” son útiles para mantener tu documento organizado.

El siguiente módulo es para la edición de capas; rotación, transformación, combinación de capas usando operaciones booleanas y mover capas “hacia atrás / hacia delante” en la lista de capas.

El botón “Exportar” (el último icono de la Barra de herramientas) te permite exportar tu diseño a uno o varios archivos bitmap o basados en vectores.

A diferencia de muchas otras aplicaciones de diseño, Sketch 3.0 no tiene una caja de herramientas con las herramientas comunes, sino que se encuentran en la Barra de herramientas.

Personalizar la barra de herramientas

Las Herramientas y accesos directos adicionales se pueden agregar a la Barra de herramientas haciendo clic derecho y seleccionando "Personalizar barra de herramientas...".

Páginas

Un documento puede tener cualquier número de páginas. Los símbolos y los estilos compartidos trabajan a través de las páginas, pero no entre documentos.

Otra razón para el uso de múltiples páginas tiene que ver con el rendimiento. Sketch 3.0 puede manejar fácilmente una docena de mesas de trabajo en la página, pero en función de su contenido, el tamaño y el número de ellos, puede que te resulte beneficioso dividir el trabajo en múltiples páginas.


21

Mesas de trabajo

Las “Mesas de trabajo” te permiten crear marcos fi jos sobre el “l ienzo infinito” de Sketch 3.0, pero son completamente opcionales.

Si estás haciendo un diseño para web, es posible que quieras diseñar para diferentes tamaños de pantalla. Puedes definir cada tamaño de pantalla en una mesa de trabajo. Si estás haciendo iconos es posible que desees limitar a cualquiera de los tamaños de los iconos por defecto; puede crear una mesa de trabajo para cada uno.

Las “Mesas de trabajo” son como un tipo especial de grupo. Siempre están "abiertos"; nunca tendrás que hacer doble clic para ver su contenido, y no cambia el tamaño para adaptarse a los contenidos en el interior.

Añadir mesas de trabajo

Para crear una mesa de trabajo, selecciona “Insertar> Mesa de trabajo” de la Barra de herramientas o menú. El inspector te mostrará algunos tamaños de mesa de trabajo comunes a las pantallas de iOS y otros tamaños prestablecidos.

Selecciona un valor preestablecido para insertarla en el lienzo, o “haz clic” en la cabecera de un grupo de “presets” de la mesa de trabajo para insertar todos a la vez. También puedes agregar tus propias configuraciones en la parte inferior del inspector.

Si después de haber insertado una mesa de trabajo, deseas insertar más mesas de trabajo de ese tipo, puedes pulsar “cmd + D” hasta que tengas el número de mesas de trabajo que deseas.

Sketch 3.0 no permite seleccionar mesas de trabajo sobre el lienzo si tienen contenido en su interior, pero se puede seleccionar una mesa de trabajo en la lista de capas y luego puedes arrastrarlo por el lienzo (haz clic sobre el nombre de la mesa de trabajo en el lienzo y arrástralo), o cambiar su posición o el tamaño en el inspector.

Reji l las y Reglas

Las Mesas de trabajo actúan como sus propios lienzo dentro del “lienzo infinito”, cada Mesa de trabajo tiene sus propias reglas y cuadrículas opcionales, lo cual es especialmente útil si estás combinando las mesas de trabajo de tamaño múltiple en un lienzo; una para cada “punto de ruptura” en un diseño responsive, por ejemplo.


22

Plantil las

Un buen ejemplo de uso de las mesas de trabajo se puede ver en las plantillas que presenta Sketch 3.0 por defecto. Ir a “Archivo> Nuevo desde” plantilla en el menú. Si escoges la plantilla "Mac App Icon" verás que existe una mesa de trabajo para cada uno de los tamaños comunes.

Mesas de trabajo Las “Mesas de trabajo” en Sketch 3.0 también pueden ser exportadas directamente. Sólo tienes que añadir un tamaño de exportación a la mesa de trabajo y la próxima vez hacer clic en “Exportar”, Sketch 3.0 incluirá las mesas de trabajo también.

Cuando haces clic en “Exportar”, por primera vez, y tienes algunas mesas de trabajo en tu lienzo, Sketch 3.0 asumirá que deseas exportarlas y las hará exportables automáticamente.

Impresión Las Mesas de trabajo y las Secciones en Sketch 3.0 se pueden imprimir. Ves a “Archivo> Imprimir”, y obtendrás una lista de las mesas de trabajo, o secciones si no tienes mesas de trabajo. El cuadro de diálogo de impresión estándar aparecerá y serás capaz de imprimir. Ten en cuenta que existen tamaños de mesa de trabajo por defecto para A4 A5 y formatos de papel A6.

Lista de capas

La lista de capas contiene una lista de todas las capas (incluyendo “secciones”) en la página actual y muestra una pequeña vista previa de cada uno. También puedes ver cuál está bloqueada, invisible, tiene una máscara, o esta marcada para la exportación. Aquí puedes cambiar el orden de capas y seleccionar “Operaciones Boleanas” para crear subtrazados de una forma. También puedes agrupar capas o cambiar el nombre de las mismas para mantener tu documento organizado.

Varias páginas

Sketch 3.0 tiene soporte para múltiples páginas y tu puedes agregar / quitar o cambiar a otras páginas usando la pequeña ventana emergente que hay por encima de la lista de capas (también puedes usar las teclas Re Pág / Av Pág del teclado). La l ista de capas siempre muestra las capas de sólo la página actual.


23

Mesas de trabajo

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

Máscaras

Las capas que tienen una máscara aplicada mostrarán un pequeño punto en la lista de capas antes de su nombre y de su vista previa. La capa a la que se le aplica la máscara es la primera capa por debajo de ella y sin un punto.

Operaciones booleanas

Las formas pueden contener múltiples subtrazados. Si es así, se muestran como un grupo en la lista de capas, con una flecha para mostrar las sub-rutas. Cada sub-ruta de acceso puede tener una operación booleana aplicada a ella que dicta la forma en que se combina. La lista de capas es una buena manera de obtener una visión general de cómo los subtrazados trabajan juntos para lograr el resultado final.


24

Símbolos y Esti los Compartidos

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

Los “Esti los compartidos” se util izan para mantener un esti lo 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 “Esti lo compartido”, su vista previa se muestra en un color púrpura en lugar de la sombra gris oscuro.


25

3. Las Capas en Sketch 3.0 Las capas son los bloques básicos de construcción de contenido en Sketch 3.0. A diferencia de otras aplicaciones, no existe una distinción entre las capas y los objetos; cada objeto esta siempre en su propia capa.

Los grupos y mesas de trabajo se util izan en Sketch 3.0 para mantener su contenido organizado y también son tratados como capas.

Para empezar a añadir nuevas capas al documento, “haz clic” en el icono “Insertar la barra de herramientas” o ves al menú “Insertar” en el menú global de la aplicación.

Añadir capas

La forma más sencilla de añadir una capa es escoger una de las opciones existentes en la

Barra de herramientas. “Haz clic” en la forma de rectángulo y verás que el cursor

cambia a un cursor en forma de cruz con un pequeño cuadrado en la parte superior

derecha.

Ahora “haz clic” en el lienzo y arrastra. Cuando se suelta el ratón se insertará la forma y ya

puedes comenzar a manipularlo.


26

Opciones avanzadas

Como se puede ver, el proceso de inserción es fácil, pero hay algunos atajos ocultos que le dan un cierto control adicional. Por ejemplo, puedes mantener pulsada la tecla de mayúsculas (⇧) para hacer una nueva forma cuadrada. Del mismo modo, puedes mantener la tecla de opción (⌥) para poner el centro de la nueva forma en el punto de su ratón (en lugar de la parte superior-izquierda). Si decides que has colocado el origen de la nueva forma ligeramente descuadrada, mantén presionada la barra espaciadora. Mientras que la barra espaciadora esté pulsada podrás arrastrar el origen de la forma en lugar de cambiar su tamaño.

Selección de Capas

La “Selección de capas” en Sketch 3.0 es muy sencilla; basta con “hacer clic” sobre la capa. Una vez que se selecciona la capa, deberías ver 8 pequeños tiradores; uno en cada esquina y una en cada borde.

Nota: Si no ves estos tiradores, pero estás seguro de que has seleccionado la capa, es posible que hayas ocultado accidentalmente los controles de selección. Para activarlos, ves a “Ver> Mostrar selección” en el menú.

Selección de varias capas

Para seleccionar varias capas, mantén pulsada la tecla de mayúsculas (⇧) en el teclado. Si “haces clic” en otra capa, preservará su selección original también. Si mantienes ⇧ y haces clic en una capa ya seleccionada, se anulará la selección.

“Haz clic” + arrastrar desde un área vacía del lienzo para seleccionar todo lo que cabe en el rectángulo. Una vez más, si tienes o ⇧ ⌘ presionado, ampliarás la selección o podrás anular la selección de todos los objetos ya seleccionados.

Si mantienes pulsada la tecla alt (⌥), podrás seleccionar las capas que se encuentran dentro de los límites del rectángulo. Compara las imágenes de abajo. A la izquierda: ⇧ + arrastrar. Derecha: ⇧ + arrastre con ⌥.


27

Capas superpuestas

Para que sea más fácil seleccionar una capa que está bajo otra capa, puedes hacer clic en el botón derecho y seleccionar 'Recogida de capa "en el menú. Aparecerá una lista con cada capa que se encuentra bajo el puntero del ratón.

Un atajo para esto es “⌥”. Cuando se mantenga pulsado, Sketch 3.0 seleccionará la segunda capa debajo del ratón en lugar de la primera. Si hay varias capas superpuestas y desea seleccionar la tercera entonces tendrás que ir a través del menú contextual, como se describe más arriba, pero en algunos casos esto puede ser un truco muy conveniente.

Mover capas

Puedes mover una capa seleccionada y moverla con el ratón.

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

A medida que mueve (o cambia el tamaño) de su capa, Sketch 3.0 alinea automáticamente su capa a las capas adyacentes.

Si esto no ocurre, es posible que tengas desactivadas las guías de capa. Para activarlas ves a “Ver> Guías Mostrar Capa” en el menú.

Si mantienes presionada la tecla ⌥ antes de empezar a arrastrar, creas una copia de la capa, dejando la capa original en su lugar. (Si a continuación, presionas inmediatamente cmd + D


28

(duplicado) de nuevo Sketch 3.0 insertará otra capa duplicada con el mismo desplazamiento de su primer duplicado.)

Objetos duplicados

Por defecto, Sketch 3.0 coloca un objeto duplicado a 10px del original. Si desactivas esta opción, se pegará directamente en la parte superior del original.

Cambiar el tamaño de las capas

Los 8 tiradores no sólo indican la selección; también se puede usar para cambiar el tamaño de una capa. Coge cualquiera de los tiradores y arrástralos para cambiar el tamaño de la capa.

Si además mantienes pulsada la tecla Shift (⇧) se redimensionará la capa proporcionalmente manteniendo la anchura y la altura en la misma proporción.

Para cambiar el tamaño (sólo la anchura o la altura de una capa) usa los controladores de tamaño de los lados de la capa. Para cambiar el tamaño en ambas dimensiones, utiliza los de las esquinas.

Si mantienes pulsada la tecla Alt (⌥) se cambiará de tamaño desde la mitad hacia fuera en lugar de desde la esquina opuesta.

También puede cambiar el tamaño de la capa a través del teclado. Para ajustes que necesiten de píxeles precisos, el teclado suele ser más fácil que usar el ratón.

Para ello, mantén presionada la tecla ⌘ y utiliza las teclas de flecha del teclado. ⌘ → aumentará la anchura de la capa por 1px tan ⌘ ← disminuirá por uno. Del mismo modo, ⌘ ↓ y ⌘ ↑ aumentará y disminuirá la altura 1px respectivamente. Si mantienes pulsada la tecla Mayúsculas cambia el incremento 1px a 10px lugar.

Escalado de propiedades

Al cambiar el tamaño de una capa, ciertas propiedades no se escalan como la capa (un trazo 1px en una forma 10x10 permanecerá un trazo 1px cuando la capa se cambia el tamaño de 50x50).


29

Para cambiar el tamaño de una capa y sus propiedades de una sola vez, utiliza Editar> Escala en lugar del menú en su lugar.

Edición de Capas

Para editar una capa, haz “doble clic” en el lienzo o haz clic en el botón “Editar” en la barra de herramientas.

Ten en cuenta que puedes salir de la edición de capa haciendo clic fuera de la capa o pulsando Return o Escape.

Agrupación de Contenido

Además de la capa básica, como formas, imágenes y texto, Sketch 3.0 tiene algunos tipos especiales de capas que son realmente útiles en la organización y la presentación de su exportación.

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

Grupos de capas

Los grupos son una forma muy interesante de evitar modificaciones accidentales.

Las capas del documento se pueden agrupar de forma que aparezcan como una sola capa. Puedes mover y cambiar el tamaño como una sola capa y, sin embargo todavía se puede entrar en el grupo y cambiar las capas individuales.

Se crea un grupo seleccionando una o más capas. Luego “haz clic” en el icono del grupo en la barra de herramientas y Sketch 3.0 creará un nuevo grupo con esas capas. También puedes arrastrar objetos entre los grupos en la lista de capas.

Puedes hacer “doble clic” en un grupo para ver su contenido y seleccionar sus capas. Hay situaciones en las que quieres seleccionar una capa de inmediato, aunque esté enterrada profundamente dentro de una jerarquía de grupos.


30

Para ahorrar mucho haciendo “doble clic” mientras se desciende más y más en la jerarquía del grupo, en su lugar puedes mantener presionada la tecla ⌘ y seleccionar esa capa.

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

Click-Through

De forma predeterminada una capa interior de un grupo no se puede seleccionar directamente, sin antes hacer “doble clic” en el grupo. Si mantienes presionada la tecla ⌘, podrás seleccionar directamente las capas anidadas en grupos.

Si sólo vas a usar grupos como un componente organizacional en la lista de capas y no quieres tener que hacer doble clic todo el tiempo, puedes habilitar este comportamiento en el inspector e incluso ajustarlo en las preferencias globales donde se puede definir este comportamiento para los nuevos grupos. Por defecto, el “clic-through” está desactivado para las nuevas capas, pero se puede activar. A partir de entonces, cualquier grupo que crees lo tiene activado.

Redimensionar Proporcionalmente

Las proporciones (anchura / altura) de los nuevos grupos se pueden bloquear. Si está bloqueado, Sketch 3.0 mantendrá la anchura y la altura proporcionalmente. Si no está bloqueado, se puede cambiar el tamaño de los grupos.


31

4. Formas (Shapes) El tipo más común de las capas en un documento son las formas. Hay una gran variedad de formas predeterminadas incluidas en Sketch 3.0, tales como círculos, rectángulos, estrellas y muchas más. Algunas de estas formas tienen opciones adicionales, tales como las esquinas redondeadas en los rectángulos y las formas de la estrella.

Para añadir una nueva forma a tu documento, simplemente “haz clic” en “Insertar> Forma” en la barra de herramientas y elige una de las alternativas disponibles.

“Haz clic” y arrastra en cualquier parte del lienzo para insertar la forma. Mientras que estás arrastrando el ratón para insertar el Sketch 3.0, se indicará el tamaño de la forma a insertar. Suelta el ratón y se añadirá la forma final. Verás la actualización del inspector de configuración y se mostrarán algunas opciones adicionales para esta forma.

Opciones adicionales

Algunas de las formas predeterminadas en Sketch 3.0 vienen con algunas opciones adicionales interesantes. Por ejemplo, la forma de rectángulo redondeado o la estrella. Para la forma de estrella puedes cambiar el radio y el número de puntos. Para el rectángulo redondeado, se puede definir el radio de las esquinas.

Cómo editar Formas

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

Inserta un rectángulo desde la barra de herramientas, ves a “Insertar> Forma> Rectángulo”. Insértala en el lienzo y posteriormente haz “doble clic” en él para iniciar la edición.

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


32

Si deseas líneas curvas en lugar de rectas, puedes hacer “doble clic” en un punto. Verás dos pequeñas asas que aparecen a ambos lados del punto. Estos puntos de control controlan la curvatura de la línea en cada lado. Piensa en estos pequeños puntos de control como si se estuvieran tirando la línea hacia ellos...

Diferentes Modos

Hay diferentes maneras en que los puntos limitan el movimiento de sus puntos de control y, a su vez, el tipo de las líneas que se producen entre ellos.

Durante la edición de una forma, verás que el inspector muestra cuatro modos diferentes para el punto; recto, reflejado, desconectado y asimétrico.


33

! Recto: Si aplicas el primer modo en tu forma, obtendrás pequeños puntos de control y, básicamente, una línea recta.

! Reflejado: Los puntos de control se reflejan entre sí. Son opuestas entre sí y se mantienen a la misma distancia del punto principal. Si el modo de los vectores no es recto, esta es la opción predeterminada.

! Asimétrico: La distancia entre los puntos de control y el punto principal es independiente, pero sí se reflejen mutuamente.

! Desconectado: Los puntos de control son totalmente independientes entre sí.

Dibujo frente a Edición

En lugar de comenzar con una forma predefinida, también puedes dibujar una forma desde cero utilizando la “Herramienta de Vector”. Haz clic en “Insertar> Vector” de la Barra de herramientas y después “haz clic” en cualquier lugar del lienzo para agregar tu primer punto. “Haz clic” en otro lugar para añadir el segundo.

Verás que una línea conecta ahora a ambos. Ahora “haz clic” en otro sitio, pero mantén pulsado el ratón mientras arrastras para dibujar una curva. Puedes dibujar unas líneas más y al “hacer clic” de nuevo en la primera línea cerrarás la forma y terminarás la edición.

La selección de puntos, la inserción de puntos en las líneas, y todo lo demás, es exactamente lo mismo, ya sea que estés editando una forma existente o dibujando una nueva.

Cerrado vs Abierto

Un trazado puede estar cerrado o abierto. Cuando está cerrado, la última línea en el camino conecta de nuevo a la primera. Cuando un camino está abierto, se deja un


34

espacio entre el último punto y el primero. Puedes convertir un trazado cerrado a uno abierto y viceversa yendo a “Capa> Trazados> Cerrar trazado” en el menú.

Siempre que estés en el modo de edición de la forma, puedes añadir nuevos puntos a una ruta, siempre y cuando la forma sea abierta.

Ten en cuenta que cada vez que se aplica un estilo de relleno a una forma, el relleno se dibujará como si el camino estuviera cerrado.

Accesos directos

Si mantienes pulsada ⇧ antes de insertar un nuevo punto al final de un vector, se alinea a 45 ° con el punto anterior, ideal para dibujar líneas rectas

Si mantienes presionada la tecla ⌘ y “haces clic” en una línea entre dos puntos Sketch 3.0 insertará el punto exactamente en el medio de la línea.

Selección múltiple

Para seleccionar varios puntos a la vez, manten pulsada la tecla ⇧ mientras “haces clic” en los puntos. Vas a ver que el punto seleccionado tiene un centro de color blanco, mientras que los no seleccionados son de color gris.

Otra forma de seleccionar varios puntos es mantener pulsada ⇧ y luego “hacer clic” y arrastrar desde un área vacía en la vista para hacer una selección rectangular. Si todavía estás pulsando ⇧ cuando sueltas se extenderá la selección que tenías antes de arrastrar con los puntos recién seleccionados.


35

Operaciones booleanas

Cuando una forma que necesitas no se encuentra entre las formas estándar, tendrás que crearla tu mismo. El primer impulso podría ser la de utilizar la herramienta de vectores y dibujar la forma de la nada. Es más sencillo utilizar “Operación booleanas”. Con las operaciones booleanas, puedes combinar formas básicas para crear formas mucho más complejas.

Subtrazados

Sketch 3.0 tiene operaciones booleanas dinámicas y antes de que podamos hablar de estas en mayor detalle vamos a revisar rápidamente las formas vectoriales. La mayoría de las formas vectoriales en Sketch 3.0 constarán de una sola serie de puntos; un camino por así decirlo. Sin embargo, una forma puede tener tantos subtrazados como quieras y la forma en que la forma resultante se verá depende de cómo estos se combinan.

Cuando haces una operación booleana en Sketch 3.0, se sumará la forma superior como subtrazado de la segunda forma. Dado que las operaciones booleanas en Sketch 3.0 son dinámicas siempre se pueden ajustar los subtrazados y si una de sus formas es un rectángulo, se puede ajustar el radio de la esquina únicamente para este subtrazado.

Operaciones

Hay cuatro operaciones booleanas diferentes y puedes elegir uno dependiendo de tu situación.

! Unión: El resultado de una operación de unión es un vector que es la suma de las áreas de los dos vectores.

! Resta: El resultado de una operación de resta es un vector donde se elimina el área de la forma superior de la persona menor de ella.

! Intersección: El resultado de una operación de intersección es un vector que consiste en las partes donde las formas originales se superponen.


36

! Diferencia: El resultado de una operación de diferencia es un vector que es exactamente la parte en la que no se superponían. Es el inverso de una operación de intersección.

Lista de capas

Cuando tienes una forma con múltiples subtrazados en tu lienzo, puedes ver la forma en la lista de capas. Al igual que con los grupos normales, verás una flecha en la izquierda y si despliegas verás una lista de subtrazados de la forma. En el lado derecho puedes elegir una operación booleana para cada subtrazado individualmente.

Como la lista de capas se ordena de abajo hacia arriba; el orden de las subtrazados es el mismo. La operación booleana que elijas va a combinar la capa con la capa de abajo. El resultado pasará al subtrazado de arriba si hay alguno.

Acoplar capas

Al acoplar una forma de Sketch 3.0, se tratará de representar los múltiples caminos dentro de la forma como una ruta; será, por así decirlo, “acoplar” la jerarquía. Sin embargo, hay muchos caminos que no pueden ser acoplados en uno solo. Una forma con un agujero en su interior siempre tendrá que ser representado como dos caminos; una para el camino exterior, y una para el camino interior.

Cuando Sketch 3.0 no puede acoplar un camino te avisará cuando intentes hacerlos. Si persistes en el acoplamiento de todos modos, los subtrazados serán reemplazados por diferentes subtrazados, tal vez con menos caminos.


37

En otras aplicaciones de diseño, después de aplicar una operación booleana, el resultado se acopla. En Sketch 3.0 no ocurre así; se pueden aplicar múltiples operaciones booleanas sin la necesidad de acoplar.

Transformar

La herramienta de transformación puede ser utilizada para distorsionar un vector existente sesgando los puntos o mediante la creación de un efecto 3D falso. Puedes utilizar la herramienta de transformación para transformar una o varias capas a la vez.

Selecciona una o más capas y “haz clic” en el botón “Transformar” de la Barra de herramientas. Coge uno de las cuatro esquinas para transformar libremente la forma o tomar un punto en el medio para mover dos esquinas al mismo tiempo para sesgar la capa.

Al transformar una forma desde una esquina te darás cuenta de que la esquina opuesta siempre se mueve en la dirección opuesta también. Esto hace que sea fácil de aplicar efectos de perspectiva. Sin embargo, si deseas ajustar en una sola dirección, manten presionada la tecla ⌘ mientras arrastras.

Mascaras

Las máscaras en Sketch 3.0 se utilizan para mostrar selectivamente partes de otras capas. Por ejemplo poniendo una máscara circular en una imagen sólo mostrará la parte del interior del círculo.


38

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

La restricción de las Máscaras

Si no quieres que se aplique la mascara a todas las capas, la mejor manera de restringir la "influencia" de la máscara es poner la máscara y las capas que deseas recortar dentro de su propio grupo. Cualquier cosa por encima del grupo no se recortará si la máscara se encuentra dentro del grupo.

A veces, la agrupación no es una opción. Otra manera de detener una máscara es hacer lo siguiente:

1. Selecciona una forma enmascarada pero que no deseas enmascarar. 2. En el menú ir a Edición> Ignorar Máscara Subyacente

Esta capa y las capas anteriores no serán enmascaradas. Eso si, ten cuidado al reordenar capas.

Máscara con Forma

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


39

Máscaras con Alpha

Por defecto, una máscara funciona mostrando su superficie y ocultando el resto. Otra forma de trabajar con una máscara es darle un degradado, y utilizar la opacidad de ese gradiente para determinar lo que debe ser visible y lo que no debe ser.

Este segundo modo está disponible para las máscaras de selección de su máscara y luego ir a “Edición> Modo Máscara> Máscara Alfa”.

Tijeras

La herramienta “tijeras” se puede utilizar para cortar las líneas de una forma vectorial existente. Selecciona una forma existente y “haz clic” en el icono de las tijeras en la barra de herramientas o ves a “capa> Trazados> Tijeras” en la barra de menú.

A continuación, “haz clic” en la línea de la forma vectorial para cortar la misma. Cuando hayas terminado, “haz clic” fuera de la forma o pulsa Enter / Esc para salir de la herramienta de tijeras.

Copiar-Rotar

Esta herramienta es especial en Skecth 3.0. No está en la barra de herramientas por defecto, pero puedes añadirla “haciendo clic derecho” en la barra de herramientas y seleccionando Personalizar. También está disponible en el menú “Capa> Copias trazados> Rotar”.


40

Esta herramienta toma una capa y hace copias, rotando alrededor de un punto determinado. Tomemos el ejemplo de una flor; creas una sola hoja, a continuación, giras una docena de copias en el centro y tendrás una flor

Selecciona una capa, activa la herramienta “Rotar Copias”, introduce el número de copias y cierra el cuadro de diálogo. A continuación, coloca el punto central donde quieras y “haz clic” fuera o desactiva la herramienta para salir de ella.

Splitting

Todas las formas se añaden como subtrazados de la forma original. Si prefieres tener la forma en capas separadas, ve a “Editar> Trazados> Split” en el menú para convertirlas en capas separadas.

Lápiz

La herramienta Lápiz permite dibujar libremente. Después de soltar el ratón, Sketch 3.0 tratará de suavizar las curvas y simplificar el camino.

Puedes encontrar el lápiz en el icono “Insertar” en la barra de herramientas o en la barra de menú en “Insertar” también.

*Un atajo rápido para la herramienta Lápiz es la tecla 'P'.


41

Ancho de trazo

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


42

5. Texto Capas de texto

Sketch 3.0 utiliza la representación de la fuente nativa del sistema operativo y por eso, la visualización del texto es perfecta. El beneficio de la representación de la fuente nativa es que cuando estás haciendo un diseño de sitio web, estás seguro de que la visualización del texto es real. Sketch 3.0 también es compatible con los esti los de texto para que múltiples capas de texto compartan el mismo tipo de letra, tamaño, kerning, etc..

Añadir texto

Puedes añadir texto “haciendo clic” en el icono de “Texto” en la barra de herramientas. El cursor cambia a un “cursor de texto” y entonces puedes “hacer clic” en cualquier parte del lienzo para insertar la capa de texto en ese punto. Verás que se añade el texto y se selecciona para que puedas empezar a escribir inmediatamente.

También puedes “hacer clic” y arrastrar para crear un cuadro de texto de un tamaño fijo. Cuando el texto se hace demasiado grande para caber dentro de la caja, se cambiará el tamaño hacia abajo, en lugar de un cuadro de texto normal, lo que aumenta su anchura para adaptarse al contenido.

Cambiar el tamaño del texto

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

Inspector del texto

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


43

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

Color del texto

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

También puedes aplicar un estilo general de llenado de la capa de texto, como un degradado. Sin embargo, cualquier relleno aplicado aquí, se aplicará a la totalidad de la capa de texto y anulará cualquier cosa que se establezca en el cuadro de color.

Ten en cuenta que para hacer gradientes en el texto, tenemos que convertirlo en una forma vectorial y esto hará que se pierda el subpixel-antialiasing .

Auto vs Fijo

La propiedad de ancho (en la alineación) se puede establecer en “automático o fijo”. Cuando se ajusta en automático, la anchura de la caja de texto se ampliará lo máximo posible para encajar el texto que has introducido. Cuando está configurado como fijo, se ajustará el texto a su ancho actual.


44

Rendering

Sketch 3.0 utiliza la representación de la fuente nativa del sistema operativo y por eso, el texto se visualiza perfecto. El beneficio de la representación de la fuente nativa es que cuando estás haciendo un diseño de sitio web la visualización del texto es real.

El sistema utiliza una técnica llamada subpixel-antialiasing para mejorar la representación de texto y Sketch 3.0 utiliza esta técnica también. Sin embargo, hay algunas complicaciones con esto, y para entender su por qué, tenemos que ver como funciona la tecnología subyacente.

Subpixel-antialiasing

Una pantalla de ordenador se compone de una cuadrícula de píxeles. El problema al que se enfrenta en la representación de texto, es que en las pantallas normales no hay suficientes píxeles para dibujar las curvas de forma precisa. Por eso, se utiliza el anti-aliasing; se iluminan ligeramente píxeles que sólo están parcialmente cubiertos por las curvas para dar la apariencia de suavidad.

Antialiasing Sub-pixel va un paso más allá, teniendo en cuenta que un píxel en una pantalla en realidad consta de tiras verticales rojas, verdes y azules. Así que en lugar de iluminar todo el pixel, antialiasing sub-píxel ilumina sólo la parte de color rojo o azul.


45

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

Cuando se produce un error

Para utilizar antialiasing sub-pixel, el texto se ha de elaborar con un color de fondo opaco, porque el sistema necesita como se vera el resultado final. Esto entra en conflicto con la fusión de la capa. Sketch 3.0 tiene que hacer todas las capas con un fondo transparente. De esa manera las capas se mezclan como se esperaba y entonces el resultado final se puede representar de nuevo en el lienzo de Sketch 3.0.

Así que esto nos plantea un problema; no podemos representar las fuentes Subpíxeles antialiased sin un fondo opaco, y no podemos hacer con precisión la fusión de capas con uno.

Puedes evitar esto poniendo tu texto en la parte superior de algo que sea opaco, como una forma con un relleno o una imagen.

Exportación

Otro problema con la transparencia sucede en la exportación. En el lienzo, Sketch 3.0 puede representar el texto detrás de un fondo opaco, por lo que todo funciona bien.

Sin embargo, cuando se exporta una capa de texto a un archivo PNG y mantienes el fondo transparente te darás cuenta de que el texto se ve diferente; porque el fondo es transparente no se crear la capa con subpixel-antialiasing.


46

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

Diseñar para iOS

Cuando Apple presentó el iPhone decidieron no hacer ningún texto en el dispositivo con subpixel-antialiasing. La razón de esto se remonta a la forma en que los colores rojo, verde y luces azules componen un píxel.

Como sabréis, el iPhone se puede girar y esto significa que las verticales rojo / verde / azul de los píxeles de repente se encuentran “apilados” horizontalmente. Y con esto la técnica de los subpíxeles se desmorona. Apple aún podría hacerla en modo vertical y desactivarlo en el horizontal, pero decidieron mantener la experiencia consistente entre el Portrait y Landscape.

Cada vez que estés diseñando una interfaz para iPhone o iPad tienes que tener esto en cuenta; en el lienzo de Sketch 3.0 se utiliza subpixel-antialiasing, sin embargo en el dispositivo no se representará de esta manera. Debes decirle a Sketch 3.0 que no utilice subpixel-antialiasing, y puedes hacerlo en las Preferencias .

Ir a “Sketch 3.0 > Preferencias” en el menú, y en la ficha “General”, desactiva la opción “Suavizar Fuentes Sub-pixel”.

El texto en contornos

Al convertir texto en contornos te darás cuenta de que el texto se hace un poco diferente. Una vez más, esto es debido a subpixel-antialiasing. El sistema utiliza esta técnica para el texto, no para las formas.

Estilos Compartidos

A menudo es aconsejable mantener el mismo estilo en múltiples capas de texto. Para ello, se puede definir cualquier número de estilos de texto en el documento y las capas que se ajustan a este estilo se mantienen siempre sincronizadas.


47

Ten en cuenta que existen Esti los de texto en función de cada documento. No puedes compartirlos entre documentos pero están disponibles entre todas las páginas y mesas de trabajo del documento.

Creación de Estilos

Para crear un estilo de texto, selecciona una capa de texto, y ves a “Capa> Crear estilo compartido” en el menú. Verás que el inspector se actualiza para mostrar el nuevo estilo de texto aplicado a la capa. Aquí también puedes darle un nombre propio.

Cualquier atributo que cambia en el texto (excepto la cadena de texto en bruto en sí) se sincroniza automáticamente a través de las otras capas de texto con ese estilo.

Nuevas Capas

Puedes agregar una capa de texto y luego en el inspector aplicar el estilo creado previamente. Una forma más rápida de insertar una capa de texto con un determinado estilo de texto es ir a “Insertar> Texto con estilo” y elegir su estilo. A continuación, puedes insertar esta capa de texto del modo habitual.


48

Texto en recorrido

Sketch 3.0 puede hacer que el texto siga un recorrido concreto, como el siguiente ejemplo:

Hay dos cosas que necesitamos para que esto funcione; una forma vectorial y una capa de texto. Si habilitas “Texto en recorrido”, Sketch 3.0 pondrá la capa de texto en la línea de la forma del vector que tenga debajo de ella. Ten en cuenta que esto solo funciona si la forma vectorial está por debajo de la capa de texto; el orden de las capas tiene que ser tal que la capa de texto se sienta en la parte superior de la forma de vector.

La colocación de la capa de texto en el vector es tan fácil como arrastrar horizontalmente a través de la forma.

Convertir en contornos

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


49

Los campos de texto

Los campos de texto en el inspector no son campos de texto normales. Si pasas el ratón por encima de ellos verás que aparecerán “flechas arriba y abajo” en la derecha del campo de texto. Puedes “hacer clic” en esas flechas para aumentar o disminuir el valor rápidamente. Si pulsas Mayúsculas, Sketch 3.0 incrementará o disminuirá el valor de 10 en 10.

Arriba y Abajo

Una vez que estés editando directamente los campos de texto, las flechas arriba y abajo habrán desaparecido, pero su funcionalidad está aún disponible. Puedes utilizar las teclas de flecha en combinación con ⌥ para lograr la función de incremento / decremento.

Matemáticas

Otra gran característica de los campos de texto es que se puede realizar cálculos en ellos. Esto funciona para las matemáticas simples como por ejemplo, agregar 5 o / 2, pero casi cualquier expresión es compatible.

Ajustar Valores

Para ajustar rápidamente los valores de campo de texto puedes “hacer clic” y arrastrar en la etiqueta en cualquier campo de texto para aumentar o disminuir rápidamente su valor. Si

ADVERTENCIA

No debes vectorizar largas cadenas de texto, ya que ralentizan considerablemente el documento.

La conversión de una simple cadena de texto en contornos, da como resultado, muchos pequeños subtrazados y calcular operaciones booleanas es muy, muy costoso para el sistema. Si es necesario, puedes dividir el texto en tantas capas de texto como sea posible, y convertirlos uno a uno.

Ya que se pueden aplicar gradientes y otros efectos a un texto, no hay necesidad de convertir en trazados.


50

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

Eliminar “Estilo de texto”

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


51

6. Imágenes Sketch 3.0 tiene un buen soporte para la manipulación de imágenes. Sketch 3.0 sin embargo, no es un editor de mapa de bits y sus herramientas de edición de imagen están limitadas por esa razón.

Ten en cuenta que puedes convertir cualquier número de capas en un mapa de bits acoplado por ir a Capa> Acoplar Selección de mapa de bits.

Edición de Bitmap

Para empezar a editar una imagen, selecciónala en el lienzo y “haz doble clic”. Verás la actualización del inspector con algunas herramientas especiales. Primero tienes que seleccionar un área en el lienzo, y luego elegir la herramienta que desees:

! Selección: Seleccionar un área rectangular en la imagen ! Varita mágica: clic + arrastrar en cualquier parte de la imagen para seleccionar un

área.


52

Ten en cuenta que puedes utilizar ⇧ para añadir a una selección ya existente, y usar ⌥ restar. Una vez hecha la selección, puedes cortar / copiar la selección o seleccionar una de las cuatro herramientas disponibles:

! Invertir : El área que no fue seleccionada serán seleccionada ahora y viceversa ! Cortar: Corta la capa sólo para incluir el área seleccionada. ! Color: Puedes rellenar el área seleccionada con un color elegido. El selector de

color estándar aparecerá para que puedas elegir un color ! Vectorizar.

Una vez que hayas terminado la edición, “haz clic” en cualquier lugar fuera de la imagen, o pulsa “Intro” o “Esc” para salir.

Sectores

Normalmente, cuando se cambia el tamaño de un mapa de bits este cambia de forma proporcional en todas las direcciones. A veces sin embargo, esto no es lo que quieres. Si estás haciendo un diseño de páginas web, por ejemplo, puedes tener una pantalla en blanco que cambia el tamaño conforme su contenido crece.

Para hacer frente a esta situación, Sketch 3.0 presenta el “escalado de nueve cortes” en las imágenes. Ves a “Capa> Convertir a nueve sector Imagen” y tendrás tu imagen dividida en 9 secciones. Puedes “hacer clic” + arrastrar cualquiera de los cuatro puntos del medio para ajustar estas cajas.


53

Ajuste de color

Si deseas ajustar los colores de una imagen existente puedes utilizar “Ajuste de color” del panel en el inspector. Puedes cambiar la saturación, brillo y contraste en este panel.

* Ten en cuenta que esto es un efecto no destructivo por lo que siempre puedes cambiar sus valores más

tarde.


54

7. Símbolos Los símbolos son una nueva característica de Sketch 3.0 y permiten reutilizar grupos fácilmente a través de páginas y mesas de trabajo. Los símbolos son locales de su documento y no se pueden compartir entre los documentos.

Un símbolo, de hecho, no es más que un tipo especial de grupo. También se muestra como un grupo en la lista de capas, pero con un color púrpura en lugar de un icono azul.

Crear nuevo símbolo

Para crear tu primer símbolo, selecciona un grupo, o un número de capas y “haz clic” en el símbolo “Crear icono” en la Barra de herramientas, o ir a “Capa> Crear Símbolo” en el menú.

Si las capas seleccionadas aún no eran un grupo, Sketch 3.0 las agrupará. Ahora tendrás un icono de color púrpura en la lista de capas al que puedes dar un nuevo nombre en el inspector.

Ahora puedes ir a “Insertar> Símbolo”, e insertar una nueva instancia de tu símbolo en el lienzo. Del mismo modo se puede copiar y pegar o duplicar una instancia existente de un símbolo.


55

Excluir texto

Un ejemplo común del uso de un símbolo será en el diseño de cabecera o pie de página de una web, o elementos de interfaz comunes como botones. En todos estos casos, es posible que desees hacer una excepción en el texto de los símbolos; cada botón debe ser igual, pero su valor de texto debe ser diferente.

Puedes hacer esto con los símbolos, mediante la selección de la capa de texto dentro del símbolo y seleccionando la casilla “Excluir de Symbol”. Las modificaciones realizadas en el texto ahora ocurren solo en esa instancia del símbolo.

Organizar símbolos

Si creas una gran cantidad de símbolos en un documento es posible que desees agruparlos de alguna manera.

Si vas a “Insertar> Símbolo> Gestionar Símbolos”, obtendrás una hoja desplegable con una lista de todos los símbolos en el documento. Puedes cambiar el nombre o eliminarlos directamente. Si incluyes una barra (/) en el nombre del símbolo, Sketch 3.0 tratará estos como separadores de grupo. Por ejemplo, dos símbolos con nombre Botón / normal y Button / presionado se agruparán en un submenú llamado Button .

* Ten en cuenta que siempre se ordenan alfabéticamente, no en el orden de creación.


56

Duplicación Símbolos

Si deseas duplicar un símbolo existente, selecciona una instancia del mismo en el lienzo y, en el inspector “haga clic” en el símbolo y selecciona "Duplicar símbolo'.

Intercambio de Símbolos

De la misma manera se puede aplicar otro símbolo a una instancia de otro símbolo seleccionado. En el ejemplo de un botón pulsado y un botón normal, puedes cambiar entre los dos.


57

8. Estilos El panel del inspector tiene todas las opciones de estilo para las capas seleccionadas.

A partir de los estilos compartidos, nos movemos hacia abajo a la Opacidad y Fusión en general, seguido por Rellenos, Bordes, Sombras, Blur y Reflexión. Cada uno de ellos se le ha dado su propia sección en este manual, así que no nos entretendremos mas.

Sin embargo, hay una serie de consejos y trucos de aplicación general:

Copiar y pegar Estilos

Puedes copiar y pegar estilos entre capas utilizando el menú Edición. Si no deseas que las capas se vinculen de forma permanente, pero sí quieres compartir algunos elementos de estilo, esta es la solución perfecta.

Alineamiento

En la parte superior del inspector hay algunos botones relacionados con la alineación. Los 6 botones de la derecha son para la alineación de las capas entre sí, o, en el caso de una sola selección, alineando esa capa a la mesa de trabajo.

Los iconos de alineación de la derecha son para la distribución de capas horizontales como verticales. En el caso de la distribución horizontal, la capa más a la izquierda y más a la derecha se quedará dónde está y las capas intermedias serán espaciadas uniformemente entre ellas.

Acceso directo a la opacidad de la Capa

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


58

Rellenos

Sketch 3.0 puede rellenar las formas con un color sólido, un gradiente o un patrón (con una imagen) o con ruido.

De izquierda a derecha las opciones de relleno son:

! Relleno sólido ! Degradado lineal ! Degradado radial ! Gradiente Circular ! Patrón de relleno ! Relleno de ruido

Adición de rellenos

Puedes pulsar el botón + a la derecha del primer botón de relleno para agregar un segundo relleno. Una capa puede tener cualquier número de rellenos que se apilan uno encima de otro. Cada relleno puede tener su propio modo de fusión y se puede variar la opacidad entre ellos también.

Ten en cuenta que si el relleno superior es completamente opaco no serás capaz de ver los rellenos que tenga por debajo, pero Sketch 3.0 seguirá presentándolos, con el consiguiente coste de rendimiento.


59

Patrón de relleno

También puedes elegir un patrón de relleno y elegir entre uno de los “presets” o seleccionar una imagen.

! Tile : La imagen se repite una y otra vez hasta que el área entera de la forma se rellena

! Relleno : La imagen se estira para llenar la forma completa

Relleno de ruido

Un relleno de ruido te permite agregar diferentes niveles de grano a tu capa, haciendo los rellenos y formas un poco más realistas, añadiendo un poco de textura de forma muy sutil.


60

Sketch 3.0 viene con de tres tipos de ruido (blanco, negro y color).

Degradados

Todas las capas excepto las capas de texto pueden tener tantos degradados como quieras. Pueden tener diferentes espesores, colores y modos de fusión.

De izquierda a derecha las opciones de los degradados son:

! Relleno sólido ! Degradado lineal ! Degradado radial ! Gradiente Circular

Bordes

Un borde se puede dibujar en el centro, dentro o fuera del recorrido de la forma.

Si la forma no esta cerrada, automáticamente se aplicará en el centro. Después de todo, el concepto de "dentro" o "fuera" no existe en una línea.


61

Color o Degradado

Un borde puede ser un color sólido o un degradado. Se puede cambiar entre los dos tipos utilizando el cuadro de color de cada relleno, y que cambian de un color plano a uno de los tipos de degradados disponibles.

La edición de un degradado de borde funciona exactamente de la misma manera que un relleno de degradado.

Líneas discontinuas

Las formas tienen algunas opciones avanzadas para sus bordes. Ve en la sección de Bordes del Inspector y haz clic en el icono del engranaje. Un “popover” mostrará las opciones adicionales, incluyendo cuatro campos en la parte inferior para la configuración de las líneas de trazos.

Por ejemplo, un patrón de tablero de 4-2 dibujará el trazo de cuatro píxeles, con una hueco de dos píxeles, dibuja cuatro píxeles más y así sucesivamente. Un patrón de puntos de 5-4-3-2 dibujará un trazo de 5 píxeles, un hueco de 4, entonces un trazo de 3 píxeles, un espacio de dos, y luego comenzar de nuevo.

Desenfoque

Hay cuatro formas en las que Sketch 3.0 puede desenfocar sus capas y se pueden escoger estos modos en el encabezado de la sección de Desenfoque.


62

! Gaussian Blur: Desenfoca la capa uniformemente. ! Desenfoque de movimiento: Desenfoca en una sola dirección, dando la ilusión

de movimiento. ! Desenfoque de zoom: Desenfoca de un punto hacia fuera. ! Fondo Borroso: Desenfoca el contenido de la capa

“Fondo Borroso” se añadió después de que Apple presentara iOS7 para dar a los diseñadores una manera fácil de reproducir este efecto.

Rendimiento

Ten en cuenta que el desenfoque es un efecto muy costoso de hacer - especialmente el desenfoque de fondo - y cuanto más grande es la capa y el desenfoque, más memoria y potencia de procesamiento va a necesitar.

Si tienes que decidir entre el uso de “Fondo borroso” y “Desenfoque normal”, utiliza este último.

Reflexión

La “Reflexión” le dará a tu capa la impresión como si estuviera de pie sobre una mesa de cristal. Puedes utilizar el control deslizante para cambiar la intensidad de la reflexión. El segundo deslizador determinar la distancia entre el objeto original y la reflexión. Ten en cuenta que utilizando el efecto de reflexión, el sistema hará que el objeto se represente dos veces, por lo que habrá implicaciones de rendimiento.

Estilos Compartidos

Puedes crear un nuevo estilo al seleccionar una forma y crear un nuevo estilo en el menú desplegable. Puedes crear tantos estilos como quieras y puedes cambiar entre estilos existentes utilizando el panel. Si cambias algo en un estilo compartido se refleja de inmediato en todos los demás.


63

Color

En Sketch 3.0 encontramos el selector de color directamente en el inspector. Para verlo, selecciona una forma, y “haz clic” en el botón de color.

El selector de color se basa en el modelo de color HSB, con la saturación y el brillo en el eje horizontal y vertical, respectivamente, y luego HUE en el control deslizante debajo de ella. Mas abajo se puede cambiar la opacidad del color.

Puedes cambiar su color mediante los campos de texto debajo del selector de color o arrastrando los pequeños indicadores en el selector de color. Al ajustar la saturación y el brillo, puedes restringir movimiento a un eje, manteniendo pulsado Mayúsculas.

Colores HSB

A continuación se puede ver el valor HEX del color y los valores de color RGBA. Ten en cuenta que puedes cambiar a los valores de color HSBA “haciendo clic” en las etiquetas RGB.

Colores Comunes

Debajo del selector de color y los campos de texto, verás una fila con “Preajustes de color”. Esta fila de “presets” se rellena automáticamente por Sketch 3.0; analiza el documento y recoge los colores más utilizados y los pone ahí.

Esto facilita la reutilización de los colores comunes sin tener que crear “presets” manualmente.

Degradados

Para dar a una forma un relleno de degradado, debes seleccionarlo y, a continuación, “hacer clic” en el botón de relleno y el inspector mostrará la herramienta de color. En la parte superior del panel de color se puede elegir entre un color, distintos gradientes, relleno de patrón o ruido.

Los gradientes disponibles son degradados lineales, radiales o circulares.


64

Si escoges un gradiente lineal, verás dos o más puntos conectados por una línea de superposición de su capa. Cada punto en la línea representa un nivel de color de la pendiente y el espacio entre las paradas se dibuja en una transición suave de los colores.

Para cambiar el color de una de las paradas, “haga clic” en él en el lienzo. Verás que el selector de color del inspector actualiza al color de esa parada. Elige un nuevo valor en este selector de color y verás el resultado actualizado inmediatamente.

Para insertar un punto entre los puntos, “haz clic” en la mitad de una línea y verás que otra parada se agrega. Puedes mover las paradas entre el punto inicial y final para determinar la suavidad de la pendiente y se puede mover el primer y último punto para cambiar la dirección del gradiente.

Para eliminar un nivel de color, selecciónalo en el lienzo y pulsa la tecla “Supr” o “Retroceso” en el teclado.

Degradados radiales

Si has seleccionado un degradado radial antes del primer punto de la línea será el centro de la pendiente y el último determinará el tamaño de la gradiente.

Te darás cuenta que hay otro punto en el círculo más amplio que puedes arrastrar para cambiar el degradado circular en uno ovalado.

Los gradientes circulares

Los gradientes circulares van en dirección de las agujas del reloj alrededor del punto central de una capa. Puedes añadir paradas de color donde quieras “haciendo clic” en la línea y la eliminación / arrastrando los puntos funciona como lo haría el mismo que para los gradientes lineales.

Gradiente Bar

Algo nuevo en Sketch 3.0 es la “Barra de degradado” de edición más tradicional en el inspector. Verás el gradiente que va de izquierda a derecha, con paradas adicionales en el medio.


65

Accesos directos

También nuevo en Sketch 3.0 son varios atajos para los puntos de posicionamiento rápido. Puede pulsar las teclas 1-9 en cualquier parada, excepto la primera o la última, para colocarlo en el 10% -90% de la línea. Así presionando 5 pondrá la parada siempre exactamente en el centro de la línea.

Si deseas colocar la parada en el medio justo entre la parada antes y después, presiona la tecla '=' - tecla del teclado.

También puedes utilizar la tecla TAB para cambiar rápidamente entre paradas de color y puedes utilizar las teclas de flecha para mover las paradas alrededor de la izquierda. Usa la tecla de mayúsculas para amplificar el efecto.

Degradados en Bordes

Sketch 3.0 también puede hacer que un gradiente en un borde y esto funciona parecido a un relleno de degradado. En su lugar, “haz clic” en el botón de color del borde y repite el procedimiento.


66

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

Formatos de archivo admitidos

! JPG : Un formato de uso común para las fotos, pero no admite la transparencia ! PNG : Si el dibujo contiene píxeles transparentes ésta será la mejor opción ! TIFF: Soporta transparencia, pero el tamaño del archivo es más grande. ! SVG : Sketch 3.0 soporta la importación de archivos SVG, pero ten en cuenta

que la cobertura puede no ser del 100%, porque SVG tiene algunos componentes que Sketch 3.0 no soporta

! PDF y EPS: Sketch 3.0 soporta la importación de archivos PDF y EPS, pero como pasa con los archivos SVG, tiene algunos componentes que Sketch 3.0 no soporta y por lo que no se mostrará.

Formatos no admitidos

La siguiente lista incluye los formatos de archivo más utilizados para el diseño gráfico, pero que no están soportados actualmente en Sketch 3.0:

! PSD: Sketch 3.0 sólo puede importar archivos psd como mapas de bits acoplados. ! AI: Sketch 3.0 sólo puede importar .ai archivos como mapas de bits acoplados.


67

10. Exportación Para exportar tu trabajo, elige “Archivo> Exportar...” en el Menú, o “haz clic” en el botón “Exportar” en la Barra de herramientas.

* El lienzo de dibujo es de tamaño infinito. Esto significa que cuando quieras exportar tu diseño tienes que decirle a Sketch 3.0 qué parte te interesa exportar.

Al hacer clic en el botón “Exportar” en la Barra de herramientas, Sketch 3.0 abrirá una lista de todas las capas exportables en el lienzo; mesas de trabajo, secciones y capas regulares. Puedes exportar todos o algunos de ellos a partir de ahí.

Capas o secciones

La exportación de una capa significa que no hay otros elementos en el lienzo que se exportarán con esta capa. Si hay una capa en la parte superior o de un fondo por debajo de la capa, no se incluirán en la exportación.

Este método es muy útil para exportar iconos u objetos similares de un gran proyecto, pero menos útil para exportar toda la composición. Para eso tenemos las secciones o las mesas de trabajo.

Exportación de capas

Si has decidido que tienes que exportar una sola capa, puedes hacerlo en el inspector. Selecciona la capa (o grupo) que deseas exportar y “haz clic” en “Hacer exportable” en la parte inferior izquierda del inspector.

Verás que el inspector se actualiza para mostrar que quieres exportar una imagen, en tamaño original, sin el sufijo, y por defecto en formato PNG.

Puedes “hacer clic” en el icono + para agregar otro tamaño de exportación. Por defecto este exportará a doble tamaño con un sufijo @ 2x, pero se puede cambiar a lo que quieras. Por ejemplo si el diseño ya está en @ 2x, puedes dar a tu tamaño de exportación 1 x '@ 2x' sufijo y crea un segundo tamaño de exportación a 0.5x sin sufijo.

Ten en cuenta que Sketch 30 soporta la exportación a tamaños arbitrarios, por lo que si estás diseñando para android y necesitas exportación 1.5x, también es posible.


68

Lista de capas

En la lista de capas se encuentra un pequeño icono de un “cuchillo”. Esto es para indicar que esta capa es exportable. La próxima vez que “hagas clic” en “Exportar” en la Barra de herramientas, esta nueva capa exportable aparecerá allí también, entre las secciones.

*Recuerda que también puedes exportar directamente las capas de la lista de capas, sin tener que hacer capas exportables o secciones. Si arrastras cualquier capa de la lista en el Finder o cualquier otra aplicación, Sketch 3.0 lo exportará en formato PNG. Si mantienes presionada la tecla de opción, lo exportará como PDF.

Secciones

Las secciones de Sketch 3.0 te permiten exportar un área definida en el lienzo en un solo archivo. Un documento Sketch 3.0 puede tener tantas secciones como quieras y cada una va a exportar un archivo diferente.

Las secciones de Sketch 3.0 son tratadas como capas normales. Si temporalmente no deseas ser molestado por las secciones en tu lienzo, puedes desactivarlas en la parte inferior de la lista de capas usando el pequeño “cuchillo”.

Adición de secciones

Puedes agregar una sección yendo a “Insertar> División” en la Barra de herramientas y luego haciendo clic + arrastrar en cualquier lugar en el lienzo para definir el área. Si usas la herramienta de corte, también puedes “hacer clic” en una capa y Sketch 3.0 creará una nueva sección exactamente alrededor de esa capa.

Nombrar las secciones

Puedes dar a cada una de tus secciones su propio nombre, y este es el nombre que se utilizará al guardar la imagen en el ordenador.

Un buen truco es incluir una barra (un '/') para crear subcarpetas. Por ejemplo, si nombras a tu sección foo/bar.png, Skecth 3.0 primero crea una carpeta con el nombre "foo" y luego crea una imagen denominada 'bar.png'.


69

Múltiples Tamaños

En Sketch 3.0 se puede exportar varias imágenes de una sola sección.

Si estás haciendo diseños para iOS, tendrás que exportar imágenes simples y a doble de resolución para cada icono. Con las secciones de Sketch 3.0, esto es fácil. Simplemente “haz clic” en el icono “+” en el inspector de añadir un segundo tamaño.

Cada tamaño puede tener su propia escala personalizada, el formato y el sufijo. Se requiere el sufijo porque normalmente el nombre del archivo se deriva del nombre de la sección, pero con dos tamaños exportables, necesita sufijo uno de ellos. Por defecto, el segundo tamaño que se agrega es un tamaño de 2x con un sufijo @ 2x de acuerdo con la convención de iOS.

No obstante, no está restringido a la exportación sólo 2x; puedes exportar a cualquier resolución o tamaño con cualquier sufijo que desees. Si diseñas en doble resolución, por ejemplo, puedes darle a tu tamaño 1x un sufijo @ 2x y tenga su segunda tamaño sea al 0.5x

Sólo Contenido del grupo

En Sketch 3.0, cada sección tiene una casilla de verificación: “Contenido del grupo exportación”. Cuando se activa esta opción en lugar de exportar todo en el lienzo, la sección ahora sólo exportará las capas que hay dentro de su propio grupo, descartando cualquier capa superpuesta fuera de esta, o cualquier capa de fondo que haya detrás.

Recorte

La última opción disponible en cada sección es la de “Recorte”. Con esta opción puedes definir los pixeles transparentes que se exportaran con cada sección.

Por ejemplo: Definiste una sección en algún lugar de tu documento de 30 por 40 píxeles, pero contiene un único óvalo que está a sólo 15x15 píxeles. En lugar de cambiar el tamaño de la sección para encajar exactamente en torno a este óvalo, utiliza “Recortar” y Sketch 3.0 recortará los píxeles transparentes en tu sección 30x40 hasta que dejar una imagen de 15x15 pequeña.


70

Formatos de archivo

Formatos de archivos compatibles para la exportación

! JPG: Un formato de uso común para las fotos, pero no admite la transparencia ! PNG: Si el dibujo contiene píxeles transparentes ésta será la mejor opción ! TIFF: Soporta transparencia, pero el tamaño del archivo es más grande. ! PDF o EPS: Para preservar los objetos vectoriales. Tenga en cuenta que los

gradientes transparentes no son compatibles con el estándar PDF. ! SVG: Es bastante bueno en las formas vectoriales y en el soporte de texto, sin

embargo, las sombras no son compatibles.

Sketch 3.0 no soporta los siguientes formatos de archivo para la exportación:

! PSD: formato de archivo de Photoshop no se admite para la exportación. Si tienes acceso a Adobe Creative Suite, puedes exportar tu trabajo como PDF e importarlo a Illustrator. A partir de ahí, exporta el proyecto como un archivo PSD.

! AI: Los archivos de Illustrator no son compatibles, pero Illustrator puede abrir archivos PDF o SVG exportados de Sketch 3.0.

Atributos CSS

Sketch 3.0 tiene una característica muy interesante para ayudar a los diseñadores web a pasar los diseños de una maqueta estática a HTML real.

Si seleccionas cualquier número de elementos en el lienzo, a continuación, puedes ir a “Edición> Copiar atributos de CSS” en el Menú. Sketch 3.0 creará declaraciones CSS para los bordes, rellenos, gradientes, sombras y estilos de texto utilizados en los objetos seleccionados.

Sketch 3.0 transfiere sus gradientes de gradientes CSS también. Como la sintaxis de gradientes requiere tiempo, la transferencia de CSS es realmente muy útil.


71

11. Rendimiento Sketch 3.0 puede tratar fácilmente con dibujos bastante complejos, pero si terminas con un documento muy grande es posible que desees saber algunas cosas acerca de lo que está afectando el desempeño de Sketch 3.0:

Desenfoques

Desenfocar capas es costoso. Sketch 3.0 tiene que convertir la capa en un mapa de bits “fuera de la pantalla” (que es costoso), y luego aplicar un desenfoque (que es muy costoso). Cuanto mayor sea el radio de desenfoque el costoso para el sistema

Para un radio de desenfoque de 1px, Sketch 3.0 tiene que examinar cada píxel alrededor de cada píxel; que lo convierte en 9 píxeles a ser examinados por píxel para calcular el nuevo valor promedio. Al aumenta el radio de desenfoque a 2 píxeles aumenta exponencialmente.

* Ten en cuenta que fondo borroso es aún más costoso que el desenfoque normal. Si todo lo que estamos tratando de hacer es desenfocar una imagen, utiliza el desenfoque normal, y no utilices el fondo borroso.

Sombras

Lo mismo ocurre con las sombras. El rendering de las sombras en capas es costoso, y más sombras significan más retrasos. Las Sombras interiores con propagación son especialmente costosas.

No usar varias páginas

Sketch 3.0 puede manejar fácilmente una docena de mesas de trabajo en una página, pero sí que se combina con grandes sombras y desenfoques o incluso más mesas de trabajo, las cosas se ralentizarán. Una solución fácil es poner algunas mesas de trabajo en otra página.

El texto en contornos

Las operaciones booleanas son cálculos matemáticos muy complejos para llevar a cabo por el sistema. Si tienes una sombra con unos cuantos subtrazados, cada uno con operaciones booleanas, el rendimiento del sistema se puede resentir.


72

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.


73

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

Accesos directos generales

! ^ + H: controladores de selección Toggle ! ^ + L: guías de alineación Toggle ! ^ + G: Cambiar cuadrícula ! Espacio: Herramientas de mano ! Intro: Editar capa seleccionada ! ⌘ + 3: Vaya a las capas seleccionadas ! ⌘ + 2: Zoom en las capas seleccionadas ! Z: Herramienta Zoom. Mantenga pulsada la tecla y haga clic o arrastre un área con

el ratón. Zoom inversa usando Z + alt + clic. ! Escapar: Salga de la herramienta actual, anule la selección de todas las capas o

volver en el inspector ! Tab / Shift-tab: Ciclo a través de capas en el grupo actual

Inserción de capas

! R: Inserte un rectángulo ! O: Inserte un óvalo ! L: Insertar una línea ! U: Inserte un rectángulo redondeado ! T: Inserte una capa de texto ! V: capa vectorial ! P: herramienta Lápiz

Mover y redimensionar Capas

! ⌥ + Arrastrar: duplicar una capa ! ⌥ + Hover: distancia de visualización entre otras capas ! ⌥ + Cambiar el tamaño: cambiar el tamaño de los dos extremos ! Shift + Redimensionar: preservar la relación de aspecto Estos son los atajos algo

ocultos, pero muchos más se listan en el menú, por supuesto. Dominar los atajos de teclado realmente le ayudará a aumentar la velocidad a la que usted trabaja.


74

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


75

14. Sobre el autor Iván Blanco es Consultor de experiencia de usuario (UX) y Diseñador de productos digitales desde hace mas de 15 años. Actualmente trabaja en Nurun Spain como User Experience Strategist. www.ivanblanco.es https://www.linkedin.com/in/ivanblanco Es Coorganizador de UxAcademy, un grupo de Meetup dirigido a todos aquellos apasionados de UX (User Experience). Un lugar donde compartir experiencias, adquirir nuevas habilidades y aprender los unos de los otros de esta disciplina en constante evolución.


76

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


77

Documents

Diseño de interfaces con Sketch 3 - ivanblanco.es · El inspector de la derecha te permite ajustar las propiedades de la capa seleccionada. 4. El lienzo de trabajo está en el medio