Diseño vectorial y curvas Bézier explicadas por diseñador de Costa Rica

0
603
Para comprender a mayor detalle en qué consiste trasladar una imagen en papel hacia el diseño vectorial digital, el creativo visual costarricense Carlos Garro se dio a la tarea de buscar las palabras más claras. Se ha apoyado, como él mismo lo indica, en diseños de su colega Gemma Goode.
Sigue las recomendaciones y comparte entre tus colegas este creativo y útil contenido que reproducimos íntegro a continuación.
Para escribir este blog post, decidí investigar más allá de lo habitual ya que existen muchas recomendaciones y flujos de trabajo para dibujar el “vector perfecto”.
El punto de inspiración surgió luego de ver el grandioso Lettering de nuestra compañera de Gemma Goode  quien pueden conocer en su portafolio Behance.
¿Cómo llevar estos geniales trazos al mundo vectorial?
Decidí asumir el reto de redibujar una de las obras de Gemma en Illustrator agregando una condición especial: Todos los tensores deberían estar a 0 o 90 grados.
¿Por qué vas a hacerlo de esta manera? — “No es necesario” me decían algunos. Otros pensaron que estaba loco, pero los que tenemos algunos años a cuestas dibujando vectores sabemos la importancia de contar con la menor cantidad de “anchor points”.
Sin embargo esta “pequeña obsesión” de colocar todos los ángulos a 0 ó 90 grados tiene su origen en el diseño tipográfico y más que un capricho tiene su justificación técnica.
Las curvas Bézier pueden ser construídas de 2 formas:
Cuadrática
Una curva Bézier cuadrática tiene 3 puntos: uno de inicio, uno de control y otro al final.
Cúbica
Una curva Bézier cúbica tiene 4 puntos: el de inicio, el final y dos tensores
Como bien lo explica Fábio Duarte Martins (reconocido diseñador portugués) en su blog la construcción Cúbica utiliza menos puntos para definir la curva que se está dibujando. El resultado se resume en: Curvas más suaves, más control a la hora de ajustar, menos peso del archivo.
Puntos de anclaje en los “extremos” y tensores en ángulo recto
Los “extremos” en mátemáticas son los valores máximo y mínimo de una función.
En nuestro caso se refiere a los extremos de la figura que estamos dibujando. Por ejemplo en un círculo sería los puntos Norte, Sur, Este y Oeste del mismo. Algunos colegas le llaman los puntos 12, 3, 6 y 9 del reloj. Veamos estos ejemplos:
El objetivo principal al redibujar es establecer donde estarían estos puntos en nuestra forma. Mi recomendación es imaginarse una caja en la cuál esté contenida nuestro dibujo. En el ejemplo use como referencia un segmento del diseño original. Veamos un ejemplo:
El redibujo:
Gemma elaboró su boceto sobre en un sketchbook cuadriculado lo cuál facilitó el proceso de enderezado en Photoshop.
Una vez el boceto fue optimizado en Photoshop, este fue colocado en Illustrator como una plantilla.
La idea general es construir cada sección del diseño y luego fundirlos de manera apropiada ya sea con Pathfinder, Shape Builder o usando el comando “Compound Path”.

Se puede utilizar el “Pen Tool” estándar para empezar el trazado, pero sin duda InkScribe es la herramienta ideal para esta labor. Mi preferencia se basa en la versatilidad a la hora de establecer los anchor points, el poder cambiar al instante de línea curva a recta sin cambiar de herramienta. Sin embargo hay unas preferencias que siempre activo desde el inicio: “Object Selection by Path Only” y “Show handles when multiple anchors are select” en las preferencias generales.

Para InkScribe me aseguro que estén activas las siguientes opciones:
Localizando los puntos extremos dibujamos oprimiendo shift para mantener el punto de anclaje vertical u horizontal (dependiendo del lugar donde comencemos). En mi caso particular hago los trazos siguiendo las manecillas del reloj y empiezo en el punto extremo izquierdo (a las 9 en el reloj). La ventaja de InkScribe es que puedo reajustar el trazo sin cambiar de herramienta.
En las esquinas se puede ignorar las regla de los ángulos rectos para los tensores, pero ¡aceptamos el reto!
Además es importante recordar que esto es un “flujo de trabajo” que no está escrito en piedra  y puede alterarse y combinarse con otros sin problema.
Sin embargo para mantenerme fiel al reto inicial descubrí que Pathscribe es un aliado importante en el ajuste fino de los trazos. Por lo tanto mis esquinas van a ser redondeadas manteniendo los ángulos de los handles a 0 ó 90 grados. Veamos el método que incluye el uso de “DynamicCorners”.

Establecemos una medida para la esquina, (en este caso yo escogí 1.5 px) y la aplicamos a los trazos seleccionados.

Con PathScribe elimino los puntos extremos de la esquina usando “Smart Remove Point”.
En el siguiente paso tomamos provecho del arsenal de opciones que a veces pasamos por alto.

¿Sabían que PathScribe puede desplazar los puntos de anclaje a las tangencias más próximas en el path? Dicho de otra manera traslada los anchor points a los extremos de la figura.

Procedemos a editar los puntos resultantes, extendiendo y ajustando los handles.
Esta método tiene muchos amigos y algunos enemigos pero he descubierto que la práctica del mismo mejora nuestra destreza para dibujar cualquier path.
¿Qué opinan al respecto?
Este es el resultado final.