fbpx
 

Introducción al Programa de Diseño Sketch [Parte 2]

Introducción al Programa de Diseño Sketch [Parte 2]

1. Introducción

Si estás aquí es porque estás interesado en el Diseño de Interfaces de Aplicaciones Móviles. Es probable que te interese conocer el programa de Diseño Sketch.

Tal vez tengas alguna idea para una aplicación y quieras crearla tu mismo sin la ayuda de ningún diseñador.

Puede incluso que hayas intentado diseñar la interfaz mediante Photoshop y no hayas quedado contento con el resultado.

Si te sientes identificado con alguna de estas situaciones, estás en el sitio adecuado. En este tutorial vas a poder aprender como comenzar a trabajar con Sketch.

Sketch es una herramienta que te permitirá diseñar desde el logo de tu app, los iconos que vayas a utilizar en la misma, hasta la interfaz completa de tu aplicación. Se trata de un editor de gráficos vectoriales, por lo que podrás redimensionar tus creaciones sin perder calidad. Todo esto, unido a su mayor ventaja: SU FACILIDAD DE USO.

2. ¿Qué vamos a ver en este Tutorial?

Lo primero que conviene aclarar es que este Tutorial se trata de la Segunda Parte de una serie de tutoriales sobre Sketch.

Te recomiendo que comiences por la primera parte y una vez finalizado ese tutorial vuelvas aquí y continúes con tu aprendizaje sobre Sketch.

Puedes acceder a la primera parte del tutorial desde aquí.

En esta segunda parte veremos como utilizar la herramienta Vector Tool, como desarrollar formas complejas y como exportar tus diseños desde Sketch para poder utilizarlos directamente en Xcode.

3. Vector Tool

Vector Tool es una herramienta fundamental en Sketch.

En la primera parte de nuestro tutorial has podido ver como dibujar círculos, cuadrados y lineas. Gracias a Vector Tool llevarás tus habilidades de diseñador a otro nivel.

¡Prueba Vector Tool para hacer cualquier forma que quieras!

Formas con lineas rectas

Puedes crear cualquier polígono simplemente haciendo click. Los puntos donde hagas click se convertirán en los vertices del polígono.

Vamos a crear un polígono de 5 lados:

  1. Pulsa V para activar Vector Tool
  2. Comienza a crear 4 vertices únicamente haciendo click donde te parezca
  3. Cierra la forma haciendo click en el vértice inicial
  4. Pulsar en el botón Edit, situado en la parte superior y reposiciona los vertices como mejor te parezca
  5. Añade un color de relleno
  6. Elimina el borde

programa de diseño sketch vector_tool_lines

Gracias a que Sketch te permite modificar la posición de cualquier vértice después de haber creado la forma no necesitas grandes habilidades de diseño para utilizar Vector Tool. Además las lineas de color rojo te ayudan durante el dibujado.

Rotate Copies

Un simple trapezoide puede que no sea mucho pero puedes utilizarlo para crear formas más complejas utilizando la característica Rotate Copies. Rotate Copies crea multiples copias de tu forma y las coloca en forma circular. Con esta herramienta puedes crear formas espectaculares con muy poco esfuerzo. Vamos a probarla:

  1. Selecciona Layer\Paths\Rotate Copies.
  2. Cuando te pregunte el número de copias escribe 5 (En realidad serán 4 más la forma original creada por ti)
  3. Arrastra el punto blanco, que representa el centro del círculo para crear iconos espectaculares.

programa de diseño sketch rotate_copies

Sketch automaticamente combinará las copias en una única forma. Este tutorial cubrirá la combinación de formas más adelante.

Scissors

Justo encima de la opción de Rotate Copies tenemos otro menú llamado Scissors.

A continuación vamos a ver como utilizar la herramienta Scissors para cortar un parte de un círculo:

  1. Crea un círculo (recuerda utilizar la tecla O y dejar pulsado Shift y arrastrar para crear un círculo.
  2. Haz que el círculo no tenga relleno
  3. Aumenta el grosor del borde a 25
  4. Selecciona Layer\Paths\Scissors
  5. Pulsa sobre la parte superior izquierda para recortarla
  6. Pulsa sobre el icono de la rueda de configuración situada junto a Borders para mostrar un menú flotante
  7. Selecciona la opción round ends.

programa de diseño sketch scissors_tool

Como puedes observar, un círculo es realmente un trazado vectorial formado por cuatro vectores y puedes eliminar cualquiera de esos cuatro vectores que forman el círculo.

Modes y Handles

Sketch representa un círculo usando cuatro vectores. Puedes comprobarlo por ti mismo dibujando un círculo y pulsando sobre el botón Edit de la barra de herramientas.

Pero si piensas un poco te darás cuenta que un rectángulo también está formado por cuatro vectores. ¿Cual es la diferencia entonces? La diferencia entre ambos se encuentra en las Curvas de Bézier.

programa de diseño sketch bezier_curves

Las curvas de Bézier son lineas que puedes doblar en curvas usando puntos de control. Sketch llama a estos puntos de control HANDLES. Cada vector cuenta con dos handles que controlan la curvatura de cada extremo. Esto quiere decir que la curva de una linea viene determinada por el handle de cada uno de sus extremos. Esto que parece algo complicado cuando se explica es extremadamente simple cuando lo ves en funcionamiento. En Sketch simplemente arrastra los handles hasta que la curva tenga el aspecto que deseas.

Sketch ofrece cuatro Modes diferentes basados en la posición relativa de los handles en un vector.

programa de diseño sketch bezier_modes

  • Straight: Los handles están retraídos sobre el vector, como si no existieran. Al no existir handles no existirá curvatura.
  • Mirrored: Los handles son iguales uno respecto al otro, es decir tienen la misma longitud y forman una linea recta, como las alas de un avión. Utiliza esta opción para crear curvas simétricas.
  • Asymmetric: Los handles forman una linea recta pero pueden tener diferentes longitudes.
  • Disconnected: Los handles se comportan de forma independiente uno de otro.

En la práctica realizar curvas es muy sencillo. Simplemente haz doble click sobre un vector y pulsa en Disconnected. Entonces desplaza cada handle hasta que la curva se vea tal y como quieres.

Vector Handles en acción

Vamos a utilizar lo que hemos aprendido sobre las Curvas de Bézier para crear un icono simple que podremos utilizar en las aplicaciones donde trabajemos con mapas.

  1. Dibuja un círculo
  2. Aumenta el grosor del borde hasta 15
  3. Pulsa en el botón Edit y selecciona el vector inferior
  4. Cambia el mode de Mirrored a Straight
  5. Arrastra el punto inferior hacia abajo para estrechar la forma
  6. Situa el selector de Corners en 35

programa de diseño sketch map_marker

El marcador es unicamente un círculo con un triángulo en su parte inferior. ¡Fácil!

Volveremos más adelante sobre este icono.

4. Combinando Formas

Una de las opciones más interesantes de Sketch es la de combinar formas.

En programación tienes operadores lógicos como AND, OR y XOR. Sketch tiene algo similar llamado Boolean Operators (Operadores booleanos) como UnionSubtractIntersect y Difference.

En esta introducción a Sketch vamos a ver los dos primeros: Union y Subtract.

Union

Union te permite construir formas complejas basándote en la combinación de formas más simples. Vamos a utilizarlo para combinar dos formas y crear un icono de una nube.

  1. Crea la primera forma añadiendo un rectángulo al lienzo y estableciendo su Radius al máximo.
  2. Crea un círculo.
  3. Coloca el círculo de forma que solape ligeramente la parte superior de la primera forma.
  4. Selecciona ambas imágenes dejando pulsada la tecla Shift y pulsa en el botón Union.

programa de diseño sketch create_cloud_icon

Como puedes observar, utilizando Union, los contornos de ambas formas se unen y obtenemos el icono de una nube.

Subtract

Subtract te permite cortar parte de una forma utilizando como “molde” otra forma diferente.

El marcador de mapa que hemos creado anteriormente tiene buena pinta pero todavía puede mejorarse. Vamos a añadir un agujero en su parte superior utilizando el botón Subtract.

  1. Crea un marcador de mapa pero esta vez desactiva la propiedad Border.
  2. Crea un círculo pequeño y arrástralo hasta la parte superior del marcador de mapa.
  3. En la Layer List, arrastra la capa del círculo sobre el marcador de mapa para combinar ambas formas.
  4. Expande el triángulo que ha aparecido en la parte izquierda para mostrar las 2 capas
  5. Asegúrate que la capa circular está encima de la capa del marcador de mapa
  6. Haz click en el icono de operadores booleanos que aparece a la derecha de la capa marcador para mostrar un menú flotante
  7. Selecciona Subtract de ese menú
  8. Selecciona la capa circular y colócala en la posición que mejor te parezca

programa de diseño sketch map_marker_with_circle

Acabas de crear un marcador de mapa que no tiene nada que envidiar a los marcadores que se utilizan en aplicaciones conocidas. Puedes comprobarlo haciendo una búsqueda rápida en google: Map Marker Icon

Además de aprender a dominar Subtract existen algunos conceptos importantes que puedes extraer de este ejemplo:

  • Puedes arrastrar capas en la Layer List unas encima de otras para combinarlas.
  • Cuando combinas las formas, Sketch muestra un nuevo icono donde puedes seleccionar que operador vas a utilizar. También puedes seleccionar None si no deseas utilizar ninguno.
  • Utilizando Subtract, el orden de las formas importa. Asegúrate que la capa circular siempre está encima. Si en algún momento la forma circular desaparece es probable que reorganizando las capas en la Layer List lo solucione.

5. Como crear una Imagen de Usuario Circular

En muchas apps se muestra el perfil de usuario utilizando una máscara circular. Para conseguir este efecto puedes utilizar la opción Mask, que es muy similar a Subtract. La diferencia es que en lugar de crear un círculo dentro de una forma com hemos hecho antes con Subtract, Mask lo que hace es eliminar completamente todo lo que quede fuera de la forma que utilicemos como máscara. Vamos a verlo con un ejemplo.

Vamos a crear nuestro avatar:

  1. Descarga esta imagen del gran Tyrion Lannister desde aquí: Lannister
  2. Añádelo al lienzo de Sketch
  3. Crea un circulo lo suficientemente grande como para que cubra su cabeza completa
  4. Sitúa el circulo justo sobre su cabeza
  5. Selecciona ambos elementos utilizando la tecla Shift
  6. Pulsa sobre el botón Mask
  7. Listo, ya tienes tu imagen de avatar

programa de diseño sketch tyrion_mask

Cómo puedes ver, al pulsar sobre Mask, ambos elementos se unen en una misma carpeta. Dentro de esa carpeta, asegúrate que la capa que actúa como máscara está debajo en la Layer List. Justo al contrario de cuando utilizamos Subtract, donde la capa circular se situaba encima.

6. Exportando Imágenes

Trabajar con Sketch te permite crear los recursos gráficos que necesitas para tus apps. Pero para poder añadir estos recursos a tus proyectos debes de exportarlos antes.

Para exportar una capa individual debes hacer click en el botón de la parte inferior derecha Make Exportable.

Si lo que quieres es exportar un conjunto de capas, existen dos formas de hacer esto:

  • Group: Selecciona varias capas a la vez utilizando la tecla Shift y pulsa en el botón situado en la parte superior izquierda GroupCuando varias capas están agrupadas pueden exportarse como una única imagen. Después simplemente tendrías que pulsar en el botón Make Exportable, tal como harías para exportar una capa individual.
  • Artboard: Todas las capas contenidas dentro de un Artboard son exportadas como una única imagen. El tamaño de la imagen está basado en el tamaño del Artboard.

En el momento en el que pulses en Make Exportable tendrás que elegir el tamaño de la imagen exportada. Sketch te ofrece varias opciones: 1x, 2x, 0.5x…

Antes de exportar cualquier imagen es recomendable que examines el width y height en el inspector de propiedades. Estas dimensiones se corresponden con el tamaño 1x que te ofrece Sketch. Es decir, si quieres exportar el marcador de mapa que hemos creado antes y su tamaño es de 300×600, si seleccionas 1x en el momento de exportar el icono, la imagen exportada que obtendrás será de 300×600. Si seleccionas 0.5x, la imagen exportada será de 150×300. Si seleccionas 2x la imagen exportada será de 600×1200. Estas opciones son muy útiles cuando debes sacar recursos gráficos para tus aplicaciones de iPhone y iPad en tamaños @2x y @3x.

[caja-gris]En lugar de redimensionar las formas arrastrando su esquina superior derecha utiliza el botón de la barra de herramientas Scale. Con Scale te aseguras que las propiedades de estilo como el ancho del borde y el radio de las esquinas se modifican de forma proporcional al nuevo tamaño de la imagen.[/caja-gris]

scale_button

Exportando en formato PNG

Imagina que tienes que exportar un icono para iPhone y iPad en 1x, 2x y 3x. Los pasos que tendrías que dar serían los siguientes:

  1. Selecciona el icono en la Layer List
  2. Haz click en el botón Make Exportable
  3. Pulsa en el botón + para añadir una copia @2x
  4. Pulsa en el botón + para añadir una copia @3x
  5. Haz click en el botón Export para exportar las imágenes en formato PNG y selecciona donde quieres guardarlas

Aprovechando el formato PDF

Seguramente cuando desarrollas tus apps estás acostumbrado a crear versiones @2x y @3x de todas las imágenes que usarás en tus proyectos. Existe otra forma de trabajar que te permitirá tener una única versión por cada imagen. Si! Has oído bien! Por fin podrás dejar de gestionar imágenes por triplicado en tus proyectos. Unicamente tendrás que añadir una imagen a tus proyectos y será Xcode quien se encargue de crear las versiones @2x y @3x en tiempo de compilación.

Para ello haz lo siguiente:

  1. Selecciona la imagen que quieras exportar
  2. Haz click en Make Exportable
  3. Asegurase que el tamaño de la imagen a exportar esté fijado en 1x
  4. Selecciona PDF como formato a exportar

export_in_pdf

Ahora veremos como importar esta imagen en Xcode:

  1. Entra en uno de tus proyectos en Xcode.
  2. Abre tu librería de recursos: Images.xcassets.
  3. Crea un nuevo Image Set
  4. En el Inspector de Atributos cambia la propiedad Scale Factors de Múltiple a Single Vector.
  5. Arrastra tu imagen PDF hasta el espacio All-Universal

xcode_add_pdf

Con este procedimiento Xcode será el encargado de generar las imágenes en los tamaños @2x y @3x en tiempo de compilación. De esta forma dejarás de tener que gestionar todas las imágenes de tus proyectos por triplicado. ¿Genial no?

7. Resumen Final

Esta ha sido la segunda parte de nuestro tutorial Introducción al programa de diseño Sketch.

Estas son algunas de las cosas que has podido aprender:

  • Crear iconos para tus aplicaciones utilizando la herramienta Vector Tool.
  • Desarrollar formas complejas basándote en la unión de formas sencillas.
  • Como exportar elementos desde Sketch que podrás utilizar como assets en tus proyectos.
  • Como olvidarte de tener que trabajar con imágenes por duplicado y triplicado (@2x, @3x) utilizando el formato PDF para exportar los diseños.

Espero que te haya sido de utilidad.

8. ¿Donde ir ahora?

Sketch es una herramienta extremadamente útil para el diseño de apps. Hemos visto algunas de sus características principales y como puede ayudarte en tus proyectos. Para aprender más puedes visitar la documentación oficial.

También puedes acceder al blog oficial y a la sección de videos donde puedes aprender algunos trucos.

Además desde aquí puedes descargar una gran cantidad de ficheros de Sketch que contienen iconos e imágenes vectoriales para dispositivos iOS.

Espero que hayas disfrutado de este tutorial, si tienes cualquier pregunta o comentario por favor utiliza el sistema de comentarios justo debajo de este post.

Si crees que este artículo merece la pena, me harías un gran favor compartiéndolo en redes sociales. Así Efecto/Apple podrá llegar cada día a mas gente.

Sin comentarios

Escribe un comentario

10AppsIpad

Descarga las 10 Aplicaciones

Introduce tu Nombre y tu Email para recibir las Apps en tu Correo

Acabo de enviarte un email. Sigue las instrucciones para descargar las Aplicaciones. Puede que tengas que revisar tu buzón de correo no deseado. Gracias.