Share
Exportar activos de sus diseños es una tarea común. Empieza creando y preparando tus gráficos, luego eliges el formato de exportación, configuras sus propiedades y listo. Las herramientas de exportación en Sketch 3 están entre sus mejores características. De hecho, Sketch 3 nos ayuda a exportar contenido de maneras tan diferentes que estoy convencido de que mejorará su flujo de trabajo al leer este artículo..
Vamos a utilizar algunos ejemplos básicos para comprender completamente las diferentes opciones de exportación disponibles en Sketch 3 y te ayudaremos a decidir qué métodos son mejores para ti, dependiendo de en qué estés trabajando..
Por cierto, si usa Sketch para una gran parte de su trabajo de diseño, puede ahorrar mucho tiempo usando algunas de las plantillas de Sketch en Envato Market. Puede descargar archivos de Sketch con versiones prefabricadas y personalizables de los elementos de la interfaz de usuario más utilizados, para que pueda adaptarlos rápidamente a sus propias necesidades, en lugar de comenzar desde cero cada vez..
Plantillas de croquisBosquejo abierto Necesitamos un objeto en nuestro lienzo, así que vamos a crear una forma vectorial. Ir Insertar> Forma y selecciona una de las herramientas disponibles. Para este ejemplo voy a crear un 300x300px usando cuadrados Insertar> Forma> Rectángulo (R).
Recuerdapuedes dibujar un rectángulo al azar y ajustar sus propiedades a través de la Inspector panel.
Ahora ve al Expediente menú. Deberías ver que el Exportar La opción se ha activado. En la barra de herramientas puede hacer clic en Exportar icono también, así que adelante y haga clic en él. Notará algunos cambios en el lienzo, en la lista de capas y en el panel de inspección. Lo que ha sucedido?
En el panel de capas, Sketch ha creado automáticamente una nueva rebanada Con las mismas dimensiones y posición del objeto que tenemos en el lienzo. Los segmentos son capas especiales que nos permiten exportar áreas en el lienzo a archivos. Todo el contenido dentro de un área definida por una porción, se incluirá en ese archivo. Puedes tener tantas rebanadas como quieras usando el Insertar> Rebanada (S) opción. Cada sector se exportará a un archivo diferente..
Cuando está presente, el icono de la cuchilla y el contorno discontinuo indican que la capa en cuestión es una división. Puede cambiar su posición, ancho y altura como cualquier otro objeto en Sketch. Puede moverlos o escalarlos directamente en el lienzo o utilizando el inspector para cambiar sus propiedades..
Hablando del inspector, échale un vistazo mientras mantienes la sección seleccionada. Como ya he dicho, podemos cambiar la posición del corte, el ancho y la altura. Pero también podemos ver algunas nuevas opciones:
Al lado de Exportar En la etiqueta encontramos diferentes campos desplegables y de entrada:
Accentsconagua
@ 2x sufijo para imágenes de doble tamaño..png, .jpg, .pelea, .pdf, .eps y .svg. Por defecto, las opciones de exportación de Sketch están configuradas para Tamaño = 1x (100% tamaño original), sin sufijos y .png formato. Deje estas opciones con los valores predeterminados o juegue con ellos si lo desea..
Propina: Sketch admite la exportación a tamaños arbitrarios, así que no se preocupe si necesita cosas como la exportación 100x o la exportación 1.75x. También puede escribir el valor de píxeles seguido de w por ancho y h Por altura para exportar activos de cualquier tamaño. Por ejemplo, escriba 60w en la herramienta de exportación y Sketch exportará su activo a 60px de ancho y escalará la altura en consecuencia. Igualmente, si escribes 60 seguido por h Sketch exportará su activo con una altura de 60px y escalará el ancho proporcionalmente.
Ahora, recordando mantener su sección seleccionada, eche un vistazo a la parte inferior del panel del inspector. Verás un botón grande y uno más pequeño al lado. El primero te mostrará el paso final de exportación. El otro le brinda algunas opciones adicionales para adjuntar directamente su archivo a diferentes aplicaciones. Siéntase libre de hacer clic en los botones para ver qué sucede cuando termina el proceso de exportación.
Propina: cambie el nombre de la capa de división para asignar automáticamente un nombre de archivo a su contenido exportado.Un buen truco espara incluir una barra / dentro del nombre, instruyendo Sketchpara crear subcarpetas para usted. Las siguientes imágenes ilustran el punto más claramente:
Cambiar el nombre de la capa de división para incluir una barra inclinada /
Exportar esa capa
La estructura de carpetas resultanteAbre el export_what_you_wantarchivo que he proporcionado como un archivo adjunto a este tutorial.
Nota: necesitará Sketch 3 para abrirlo, pero si usa una versión anterior, no se preocupe. No debería ser demasiado difícil replicar el contenido usted mismo, pero recuerde que es posible que algunas de las opciones que cubrimos no estén disponibles para usted. Vea la siguiente imagen para referencia:
Verá algunos objetos agrupados, una mesa de trabajo y otros elementos colocados directamente en el lienzo, fuera de la mesa de trabajo.
Ir Archivo> Exportar. Alternativamente, puede hacer clic en el Exportar icono en la barra de herramientas.
Al hacer clic en Exportar por primera vez, Sketch asumirá que desea exportar sus mesas de trabajo y las hará exportables automáticamente, descartando todos los objetos fuera de Los tableros. También notarás que no hay capa de corte disponible en el capa lista.
Artboards en Sketch 3 se puede exportar directamente sin necesidad de agregar secciones adicionales. Si agrega nuevos paneles de diseño a su documento, simplemente agregue un tamaño de exportación a estos paneles de diseño haciendo clic en + icono junto a la etiqueta de exportación en el inspector panel, manteniendo los tableros seleccionados. La próxima vez que haga clic en Exportar Sketch también incluirá esos tableros.
Volvamos a nuestro archivo. Ahora vamos a exportar una sola capa. Seleccione el cuadrado azul directamente, oa través de la lista de capas. Eche un vistazo en la parte inferior del panel de inspección: verá una nueva opción Hacer exportable.Pinchalo.
El inspector se actualizará para mostrarle que exportará una imagen a 1x (tamaño original) sin sufijo y, de forma predeterminada, en .png formato.
Mire la lista de capas y observe que el icono en la lista para la capa cuadrada azul ha recibido un pequeño icono de cuchillo. Esto es para indicar que la capa es exportable. La próxima vez que vayas a Archivo> Exportar o haga clic Exportar desde la barra de herramientas, esta nueva capa exportable se mostrará también allí, entre sus capas de división regulares.
Enfoca tu atención en el cuadrado morado. No vamos a utilizar el Hacer exportable Opción esta vez, vamos a crear automáticamente una porción.
Ir Insertar> Rebanada.Observe cómo cambia el cursor cuando se mueve por encima de los objetos en el lienzo. Recuerda ese icono de cuchillo? Hacer clic El cuadrado morado. Aparecerá una nueva sección con la misma posición, ancho y altura.!
Propina: Siguiendo el mismo método, también puede crear sectores para grupos enteros. Y para rebanadas individuales dentro de un grupo, pulsa el botón Mando clave al pasar el cursor sobre el objeto que desea cortar.
Ok, hemos usado rebanadas y el Hacer exportable opción. Ya hemos visto lo que sucede cuando tenemos mesas de trabajo ... pero no hemos visto lo que sucede con el Exportar solo los contenidos del grupo Opción todavía!
Ir Insertar> Rebanada y mueva el cursor sobre los cuadrados naranja y verde, los que ya están agrupados. Haga clic en ellos. Acaba de crear una nueva porción para el grupo..
Mueve la capa de división en el grupo naranja + verde.
Si observa al inspector cuando se selecciona la división, verá que Exportar solo los contenidos del grupo La opción se puede seleccionar ahora. Pero no lo compruebes todavía!
En este punto del procedimiento, es bastante útil revisar la vista previa de la imagen para ver qué contenido se incluirá en nuestro archivo.
Comprobar el Exportar solo los contenidos del grupo opción.
¿Ver la diferencia? La elipse roja se ha eliminado de la vista previa.
Cuando Exportar solo los contenidos del grupo esUna vez seleccionada, la división solo exportará las capas dentro de su propio grupo, descartando el contenido que se encuentre fuera de ella. Las capas detrás del grupo serán descartadas también. Esta es una opción muy útil en diseños grandes con muchos objetos superpuestos.!
Propina: Si tienes muchos cortes en tu lista de capas y no quieres que te molesten, puedes desactivarlos temporalmente usando el botón pequeño de cuchilla en la parte inferior de la lista de capas..
Como hemos demostrado, podemos exportar contenido de muchas maneras. ¿Cuál debería elegir? Bueno, depende de lo que necesites. Por ejemplo el Hacer exportable La opción es muy útil para exportar iconos o capas individuales. Le recomendaría crear segmentos o tablas de diseño al exportar todo el documento (pero eso es solo una sugerencia).
Una gran característica a tener en cuenta al usar Sketch 3 es que puede exportar varias imágenes a la vez. No quiero decir que pueda exportar diferentes imágenes desde diferentes sectores o tableros (aunque eso es posible). Lo que quiero decir es que puede exportar diferentes versiones simultáneamente desde una sola capa o segmento.
Agregue una porción del cuadrado turquesa o expórtela a través del panel de inspección. Hagas lo que hagas, debería terminar teniendo nuevas configuraciones de exportación con valores predeterminados en el panel de inspección.
Haga clic en el + Ícono justo encima del formato desplegable. ¡Acabas de decir a Sketch que deseas dos archivos de exportación diferentes, desde una sola capa! Haga clic en el icono tantas veces como desee para obtener cada tamaño o formato que necesite.
Ahora, puede pensar que hemos cubierto todo lo que hay que saber sobre las opciones de exportación de Sketch, ¡pero hay más! Aquí hay algunos consejos adicionales:
Arrastrar cualquier capa de la lista al escritorio o a cualquier otra aplicación, automáticamente la exportará para usted en .png formato. Mantenga pulsada la opción (⌥) clave para cambiar a formato PDF al arrastrar hacia fuera.
Hemos hablado acerca de las características nativas dentro de Sketch, pero hay una comunidad muy activa que está desarrollando complementos todo el tiempo. Sketch Generator, por ejemplo, es una forma completamente nueva de exportar contenido usando Sketch. Debería echarle un vistazo a este complemento, especialmente si ya ha probado la función Adobe Generator de Photoshop CC..
Los comandos de boceto son una colección de comandos de script. Algunos de ellos están relacionados con las tareas de exportación, por lo que esta es otra extensión que le recomiendo que eche un vistazo a.
Todas las cosas que he cubierto durante este tutorial te proporcionarán las habilidades para comprender cómo exportar contenido en Sketch 3. Si tienes alguna pregunta sobre la exportación o Sketch en general, solo deja un comentario a continuación. Me encantaría ayudar!
