Tutoriales de croquis

10 trucos de bocetos que harían que Owen Wilson dijera "¡Guau!" (¡Toneladas de GIF!)

Si no obtuvo la referencia en el título, le ruego que vea este video. De nada :)

Una de mis cosas favoritas para hacer en una aplicación es hurgar en todas las configuraciones y menús. A veces, incluso presiono teclas aleatorias en mi teclado para ver si activa alguna función oculta que paga mágicamente mis préstamos estudiantiles.

No hay suerte en eso todavía.

No es que esté tratando de romper la aplicación hurgando. Simplemente me gusta empujar sus límites para ver qué pasa.

Aquí hay una lista rápida de algunos trucos que descubrí mientras hacía tonterías:

1. El método del garabato

Comencemos con una explosión, ¿de acuerdo?

Descubrí este método hace aproximadamente un mes y ha sido mi talento oculto en las primeras citas. Los polluelos lo cavan, te digo. Nota al margen, es posible que ya conozca este truco de mi artículo sobre gráficos.

Comience garabateando como un niño de kinder con la herramienta de lápiz (presione P en el teclado). Para áreas más densas, garabatea un montón en el mismo lugar. No te olvides de salir de tu masa de garabatos para crear algunos valores atípicos.

Configure su borde para que tenga un espacio amplio en el tablero y extremos curvos. ¡Presto! Acaba de crear algunos datos de dispersión aleatorios. Ponlo aquí, compañero

2. Radio de borde en vértices individuales

Ahora sabemos que puede establecer diferentes radios de borde en el cuadro de radio de borde usando barras:

VAYA COSA. Jk, ¡genial!

¡Pero! También puede apuntar a vértices individuales a la vez, lo que es un verdadero ahorro de tiempo para polígonos más complicados.

3. Acoplar formas rotadas para restablecer el cuadro delimitador

Imagine esto: acaba de crear una forma de rad y gira la cosa unos 45º. Ahora la cosa está hecha de gallos, el cambio de tamaño es inestable y es como si te hubieran mareado bajo una ola porque no sabes qué camino está arriba.

Solo aplánelo para restablecer el cuadro delimitador a un buen rectángulo viejo:

4. Opción-Arrastrar, luego Comando-D para duplicar formas y acciones

¿Hacer una lista de artículos? Deje de copiar, pegar y mover formas / grupos como un doofus.

Mantenga presionada la opción mientras arrastra la forma / grupo a su posición deseada, luego presione Comando + D para duplicarla. No solo duplicará la forma, sino que también replicará la distancia que se movió:

Pssst ... ¡esto también funciona con tableros de arte!

5. Cambiar la configuración de Pathfinder en formas combinadas

¿Cuántas veces te ha pasado esto cuando intentas combinar un montón de formas en una sola:

Bastante molesto, especialmente cuando LobsterFest está a la vuelta de la esquina y TODAVÍA NO HA TERMINADO EL LOGOTIPO, JON.

Ok, respira. Simplemente seleccione las formas de objetos combinados y configúrelos en Unión:

Se podría pensar que funcionaría, pero como hay formas que forman los agujeros en las letras, esas también están unidas. Maravilloso.

Afortunadamente, Sketch es inteligente y le permite establecer diferentes operaciones de fusión de ruta para cada subforma en la forma combinada, por lo que podemos restar fácilmente esos agujeros:

EDITAR: Si bien todavía es bueno saber que puede ajustar las operaciones de fusión de capas individuales, Steffen Karspeck es increíble y señaló que podría haber evitado los agujeros en el primer paso estableciendo mi Preferencia de relleno. Lo he visto cientos de veces, pero nunca me he tomado el tiempo de leer lo que significan las dos opciones. Podría haberme ahorrado un poco de dolor de cabeza :)

Gracias Steffen!

6. Apilamiento de símbolos para estados de objeto

Por mi vida no puedo recordar dónde vi por primera vez esta técnica, así que no me daré crédito por ello. Pero es inteligente como el infierno, así que aquí vamos de todos modos.

Usar un símbolo para la navegación de tu aplicación es genial porque puedes compartirlo entre páginas. La desventaja es que siempre tendrá que tener algún tipo de capa Elemento de navegación seleccionado para mostrar la página activa en la navegación.

Vamos a renunciar a la capa adicional utilizando una técnica que llamo "Apilamiento de símbolos":

A medida que diseña su navegación, apile todos los estados de su página uno encima del otro. Apila tantos como quieras, por los estados que quieras o necesites representar.

Cuando hayas terminado, ¡haz que todo sea un gran símbolo!

Dado que Sketch permite texto personalizado en diferentes instancias de símbolos, puede personalizar el texto en cada una de sus capas de estado. Para desactivar un estado, simplemente escriba un espacio para "borrar" ese estado de la capa de texto. En el GIF a continuación, quiero que se seleccione Configuración y que los otros sean blancos (mi estado predeterminado):

En el GIF anterior, estás viendo cuatro de los mismos símbolos exactos, cada uno de los cuales representa diferentes estados utilizando la técnica de apilamiento de símbolos. Esto es genial, porque ahora es mucho más fácil personalizar cosas como el tipo de letra y el tamaño de fuente porque no tiene que preocuparse por actualizar la capa del Elemento de navegación seleccionado que se encuentra encima.

7. Encuentra una capa

Si una capa no está en la vista de la lista de capas cuando Comando-Haz clic en un objeto en la mesa de trabajo, no lo verás resaltado. Esto es bastante molesto.

Afortunadamente, hay una función semi-oculta para Revelar una capa en la lista de capas, llevándola a la vista desplazable. Use Comando-Shift-J:

Esto hace que sea SÚPER conveniente saltar rápidamente directamente a la capa seleccionada, luego presione Tab alrededor de las capas hermanas dentro de ese grupo.

Comando-Haga clic en una capa, luego presione Comando-Shift-J para revelar la capa en la lista de capas.

Consejo de bonificación

Si aún no tiene un complemento que lo ayude a contraer capas, haga clic en una carpeta para contraer rápidamente todo su contenido:

Cuando abres una lista que colapsas, verás que los niños también se han colapsado.

8. PNGs rápidos - ¡4 maneras!

A veces solo necesitas extraer un PNG, pero no quieres pasar por la molestia de configurar tus ajustes de exportación, luego buscar en tus archivos para encontrar dónde se guardó la maldita cosa.

Aquí hay 4 formas de sacudir un PNG, en Brilliant Technicolor GIF ™:

Método 1: arrastre la capa de la mesa de trabajoMétodo 2: arrastre la exportación / corte de la mesa de trabajoMétodo 3: arrastre un grupo o capa individualMétodo 4: arrastre fuera del boceto a otras aplicaciones
Consejo rápido: si está trabajando en un diseño modal, use un PNG para la "capa inferior". Le ahorrará tener que duplicar todo el diseño de la aplicación debajo del modal y evitará que haga clic accidentalmente en las capas a continuación.

¡Prima! Tyler Howarth me recordó que también puedes exportar archivos PNG simplemente copiando la capa o la mesa de trabajo. Nos separamos totalmente de poner esto en el artículo, por lo que Tyler tiene la credibilidad de este. Aquí está su adición:

También puede copiar / pegar cualquier mesa de trabajo / grupo / capa dentro y fuera de Sketch. Copie una mesa de trabajo, cambie a Media / Slack, pegue y listo.
- Tyler

Perro caliente, amigo. Este gobierna!

9. Rellenos rápidos de patrones

Esta es una especie de consejo de dos por uno.

Consejo 1: Para crear un patrón sin costuras, cree un símbolo de mesa de trabajo cuadrado y rodee con instancias de sí mismo. Esto ayudará a darle una idea de cómo se verá su patrón terminado.

Consejo 2: Para hacer rápidamente que este sea un relleno de patrón para otra forma, vamos a usar una técnica que aprendimos en el Paso 8.

Seleccione la forma que se rellenará con su patrón, abra el menú "Rellenar con imagen" y arrastre la mesa de trabajo del patrón base al cuadro de vista previa de la imagen:

10. Lente Bokeh

Obviamente, siempre debes guardar lo mejor para el final.

Soy un fotógrafo mejor que aficionado, pero no muy profesional, y uno de los mejores efectos fotográficos es el bokeh. Probablemente nunca haya escuchado la palabra, pero la ha visto decenas de miles de veces.

Bokeh (n): la calidad visual de las áreas desenfocadas de una imagen fotográfica, especialmente tal como se muestra en una lente particular.
(fuente de imagen)

Es un efecto realmente hermoso, y la profundidad de campo exagerada atrae la atención de inmediato a la parte enfocada de la fotografía.

Estaba jugando con mi Método de Garabatos, probándolo en diferentes tamaños, superponiendo diferentes líneas garabateadas y agregando efectos a cada uno.

La imagen de abajo es 100% Sketch, sin fotografía. Solo un sutil fondo degradado con tres líneas de "método de garabato" de diferente color, opacidad y desenfoque gaussiano. Agregue una capa de ruido establecida en Superposición y coloque un poco de texto vidrioso en la parte superior (relleno de degradado con un borde interno superior e inferior). Tendrás un efecto bokeh bastante convincente:

Sígueme en Medium / Twitter, suscríbete a la publicación UX Power Tools y síguenos en Twitter para actualizaciones, contenido nuevo y otras cosas geniales. ¡Dale me gusta, ama y comparte si puedes hacerlo!

Los amo gente.