Comprendiendo las opciones de exportación de Sketch

Exportar contenidos a partir de nuestros diseños es una tarea rutinaria y muy habitual. Empezamos creando nuestros elementos y gráficos y terminamos preparándolos para su exportación final. Listo. En Sketch 3 contamos con herramientas de exportación muy útiles. Son tan útiles que estoy seguro que tras leer este artículo sobre las diferentes opciones que tenemos disponibles en Sketch, tu forma de trabajar puede verse afectada positivamente.

Vamos a ir viendo diferentes ejemplos para entender completamente las opciones de exportación disponibles en Sketch 3 y qué método podría encajar mejor en función de lo que vayamos a necesitar.

Nota: algunas características comentadas no están presentes en versiones anteriores de Sketch.

1. Conceptos básicos de exportación

Paso 1

Abre Sketch. Necesitamos al menos un objeto dentro del lienzo (canvas) por lo que vamos a crear una forma vectorial ahora mismo. Ve a Insert > Shape y selecciona alguna de las herramientas disponibles. Para este ejemplo yo voy a crear un cuadrado de 300x300px usando Insert > Shape > Rectangle (R).

Recuerda que puedes dibujar un rectángulo de forma aleatoria y modificar sus propiedades desde el panel Inspector.

Paso 2

Ahora dirígete al menú File. Deberías fijarte en que la opción Export está activa. En la barra de herramientas (Toolbar) también puedes hacer click en el icono Export. Hazlo ahora. Habrás notado algunos cambios en el lienzo, en la lista de capas (Layer list) y también en el panel Inspector. ¿Qué es lo que ha pasado?

En el panel de capas, Sketch ha creado automáticamente un nuevo slice con las mismas dimensiones y posición que el objeto que teníamos en el lienzo. Los slices son capas especiales que nos permiten exportar áreas determinadas dentro del lienzo a archivos independientes. Todo el contenido dentro de un área definida por un slice, será incluído en ese archivo. Podemos tener tantos slices como queramos usando la opción Insert > Slice (S). Cada slice exportará contenido a un archivo diferente.

Los slices son fácilmente reconocibles en la lista de capas por su icono en forma de cuchilla y el contorno discontínuo. Al igual que la mayoría de los objetos, podemos modificar su posición, altura y anchura. Podemos moverlos directamente en el lienzo o empleando el Inspector.

El Inspector

Hablando sobre el Inspector, échale un vistazo mientras mantienes seleccionado el slice que hemos reado. Fíjate que podemos cambiar algunas propiedades como ya hemos comentado. Pero también también tenemos algunas nuevas disponibles:

• Trim Transparent Pixels. Esta opción nos permite recortar directamente aquellas zonas transparentes dentro de un slice. Para explicarlo fácilmente supongamos que tienes un icono de 32x32px dentro de un slice de 80x80px. Si marcamos esta opción, el archivo exportado será automátiacmente de 32x32px y no de 80x80px porque Sketch habrá eliminado todos los pixels transparentes dentro del área de recorte.
• Export Group Contents Only. Esta opción es muy útil cuando estamos creando diseños relativamente complejos y empezamos a tener contenido agrupado y con elementos superpuestos unos sobre otros. Ahora mismo no podemos marcar esta opción por lo que la dejaremos para más adelante.
• La opción Background Color nos permite añadir un color de fondo para el archivo que vaya a crearse al exportar el slice. De esta forma todos los pixels transparentes quedaran del color seleccionado.

Junto al label Export encontramos las siguientes opciones también:

• Size nos permite añadir un factor multiplicador si necesitamos redimensionar el contenido que va a ser exportado. Sketch 3 incluye algunos valores y variables para esta opción.
• Escribe algo en el input de Suffix si lo que quieres es añadir algún texto al nombre del archivo para hacerlo más descriptivo. Por ejemplo puedes añadir @2x como sufijo para las imágenes a doble resolución.
• Puedes escoger el formato de archivo usando el selector Format. Sketch soporta los siguientes formatos de exportación: .png, .jpg, .tiff, .pdf, .eps y .svg.

Por defecto las opciones que Sketch establece por defecto son Size=1x (100% tamaño original), sin sufijos y .png como el formato de exportación. Desta estas opciones así o modifícalas a tu gusto si lo prefieres.

Consejo: Sketch soporta exportar ficheros al tamaño que prefieras sin limitarte a las opciones que incluye. No importa si necesitas exporta a 100x o 1.75x porque puedes hacerlo. De hecho puedes escribir un valor numérico seguido de una w o una h para definir la anchura o altura respectivamente. Por ejemplo si escribes ahora 60w, Sketch exportará el fichero con un ancho de 60px, escalando la altura de manera proporcional. De manera similar, si escribes 60 seguido de una h Sketch hará lo propio exportando el fichero a una altura de 60px, con un ancho proporcional.

Paso 3

Sigamos (recuerda mantener el slice seleccionado). Fíjate en la parte de abajo del Inspector. Verás dos botones, uno considerablemente más grande. El primero de ellos, el más grande, te mostrará el paso final de exportación. El otro te va a ofrecer una serie de opciones extra de exportación para compartir el fichero o incluirlo como adjunto. Puedes probar si quieres a usar los botones para ver qué es lo que ocurre y terminar de entender la exportación básica con slices en Sketch.

Consejo: puedes darle un nombre la capa del slice para ajustar automáticamente el nombre del fichero que se creará. De hecho un buen truco es que añadas una "barra" / al nombre para que Sketch entienda que quieres guardar tu fichero dentro de un subdirectorio. Las siguientes imágenes te ayudarán a entender este proceso:

2. Exportando sólo aquello que queremos exportar

Paso 1

Abre al archivo export_what_you_want que he incluído como adjunto para este tutorial.

Nota: Necesitarás Sketch 3 para poder abrirlo pero si usas una versión anterior no te preocupes. No te debería ser muy difícil poder replicar el contenido aunque recuerda que algunas de las opciones puede que no estén disponibles en tu versión. Fíjate en la siguiente imagen como referencia.

Verás una serie de objetos agrupados, un artboard y otros elementos colocados directamente en el lienzo, fuera del artboard.

Paso 2

Dirígete a File > Export. Recuerda que de manera alternativa puedes hacer click en el icono Export de la barra de herramientas.

Cuando hagas click en Export la primera vez, Sketch dará por hecho que quieres exportar el contenido que hay en tu artboard y lo hará exportable automátiacmente, obviando todos los elementos que estén fuera de los artboards que tuvieras presentes. Fíjate además que no hay ninguna capa que represente slices en Layer list.

Los artboards en Sketch 3 pueden exportarse directamente sin necesidad de crear slices adicionales. Si añades un nuevo artboard a tu documento, basta con añadirlo a la lista de elementos a exportar simplemente haciendo click en el icono + que aparece justo al lado del label "export" en el Inspector. Recuerda tener seleccionado el artboard, claro. La próxima vez que hagas click en el icono Export de la barra de herramientas, Sketch incluirá también el artboard nuevo.

Paso 3

Volvamos al archivo. Ahora lo que queremos es exportar sólo una capa de manera individual. Vamos a seleccionar la del cuadrado azul (blue square). Podemos hacerlo directamente o a través del listado de capas. En cualquier caso fíjate ahora en la zona inferior del Inspector: verás una nueva opción llamada Make exportable. Haz click.

Automáticamente el Inspector se actualizará informándote de que vas a exportar una nueva imagen a 1x (tamaño original), sin sufijos y, por defecto, en formato .png format.

Fíjate ahora en la lista de capas (Layer list) y observa él pequeño icono en forma de cuchilla en la capa del cuadrado azul. Esto te indica que la capa es "exportable". La próxima vez que vayas a File > Export o hagas click en la opción Export de la barra de herramientas, esta capa se mostrará allí también, junto al resto de slices que pudieras tener creados, así como elementos exportados a partir de artboards completos.

Paso 4

Centra tu atención ahora en el cuadrado morado (purple square). Ahora NO vamos a usar la opción Make exportable sino que vamos a crear automáticamente un nuevo slice.

Dirígete a Insert > Slice. Fíjate cómo cambia el cursor cuando pasas por encima de los objetos en el lienzo. ¿No te suena ese icono en forma de cuchilla? Haz click sobre el cuadrado morado ahora. Un nuevo slice aparecerá en la misma ubicación, con la misma altura y anchura.

Consejo: siguiendo el mismo método podemos crear slices para grupos completos de objetos también. Y para crear slices individuales dentro de objetos agrupados, basta con mantener pulsada la tecla Comando cuando estamos pasando por encima del objecto específico para el que queremos crear el slice.

Paso 5

Vale, ya hemos usado slices y sabemos qué es lo que hace la opción Make exportable option. También hemos visto que pasa cuando queremos exportar artboards completos... ¡pero aún no sabemos qué es lo que hace la opción Export Group Contents Only!

Vamos a ir a Insert > Slice. Muerce el cursor sobre los cuadrados verde (green) y naranja (orange) que son los que están agrupados ya. Haz click sobre ellos. Acabas de crear un slice para todo el grupo.

Paso 6

Mueve el slice justo dentro del grupo llamado orange + green. Esto puedes hacerlo desde la lista de capas.

Si te fijas en el Inspector mientras mantienes el slice seleccionado, verás que ahora sí que puedes activar la opción Export Group Contents Only. ¡Pero no lo hagas todavía!

En este preciso momento es interesante que le eches un vistazo a la pequeña imagen de previsualización que podemos ver en el Inspector y que nos sirve para hacernos una idea del contenido que será incluído en nuestro archivo a la hora de exportar.

Paso 7

Marca ahora la opción Export Group Contents Only.

¿Ves la diferencia? La elipse roja ya no aparece en la imagen.

Cuando activamos la opción Export Group Contents Only estamos indicando que el área de recorte del slice sólo tiene que incluir aquellos elementos incluídos en el mismo grupo donde está contenido el slice, obviando el resto de elementos. Cualquier contenido por delante o por detrás y que esté fuera del grupo, no será exportado con este slice. Esta opción es muy útil en documentos de diseño extensos en los que estemos trabajando con muchos elementos agrupados y objetos superpuestos, algo que se puede dar con mucha frecuencia en el diseño de interface.

Consejo: Si en tu documento ya tienes muchos slices y te ocupan un valioso espacio en la lista de capas, puedes ocultarlos temporalmente usando el pequeño icono en forma de cuchilla que hay en la zona inferior de la lista de capas.

Llegados aquí, ya hemos visto que hay unas cuantas maneras de exportar contenido. ¿Cuál deberías escoger? Eso dependerá de lo que necesites. Por ejemplo la opción Make exportable es muy útil para exportar sets de iconos o capas individuales. Yo usaría los slices o artboards completos cuando necesitamos exportar todo el documento completo o vistas completas de diseño web o de interfaz. Pero es sólo una sugerencia.

3. Exportación múltiple en un paso

Una de las características más destacadas a la hora de hablar de funciones de exportación con Sketch 3 es sin duda su capacidad de exportación múltiple. Y con esto no quiero decir que podemos exportar diferentes imágenes a partir de diferentes slices o artboards (que es algo que se puede). Lo que quiero decir es que podemos exportar diferentes versiones a la vez a partir de una sóla capa o slice.

Paso 1

Añade un slice sobre el cuadrado turquesa (aqua) o hazlo exportable a través del Inspector. Lo que prefieras. En cualquier caso deberías acabar teniendo un nuevo elemento exportable con sus características visibles en el Inspector.

Paso 2

Haz click en el icono + justo encima del selector de formato. Acabas de indicar a Sketch que quieres dos ficheros exportados diferentes, ¡a partir de una misma capa! Haz click en el icono tantas veces como necesites para conseguir tantos tamaños y formatos como puedas necesitar.

Vale, podrías pensar que ya hemos visto todo lo que Sketch nos ofrece en lo que a capacidades de exportación se refiere...¡pero hay más!

5. Exportación directa

Arrastra al escritorio cualquier objeto disponible en la Layer list. También puedes hacerlo sobre la mayoría de las aplicaciones con las que trabajes habitualmente. Verás como automáticamente se convierte en un archivo en formato .png. Mantén pulsada la tecla opción si quieres que el formato sea PDF.

6. Sketch Generator y Sketch Commands

Ya hamos hablado de las características incluídas de manera nativa en Sketch, pero no podemos olvidar la enorme comunidad que hay detrás y que se mantiene muy activa. Sketch Generator, por ejemplo, es una forma diferente de exportar contenido usando Sketch. Deberías echarle un vistazo, sobretodo si has trabajado en alguna ocasión con Adobe Generator feature from Photoshop CC.

Sketch Commands es un set de scripts para Sketch entre los que se incluyen alguns relacionados con tareas de exportación. Esto lo convierte en otro valioso recurso que te recomiendo revisar.

Conclusión

Todo lo visto a lo largo de este artículo espero que te haya servido para hacerte una idea muy clara de las diferentes opciones que Sketch 3 ofrece para exportar nuestros diseños. Si te ha quedado alguna duda sobre este asunto o tienes alguna pregunta sobre Sketch en general, sólo tienes que escribir un comentario. ¡Estaré encantado de poder ayudarte!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!