Vectorizando en Adobe Illustrator

Aunque hoy en día, hay muchas alternativas y técnicas para vectorizar dibujos, fotos, etc., hoy voy a mostraros una forma fácil, rápida y eficaz, para tener en cuestión de unos minutos unos vectores perfectos para animar. Desde luego, no es la mejor técnica, ni la que mejor resultado pueda dar, hay mejores métodos, más precisos y profesionales, pero esta forma para mi es perfecta para llenar la biblioteca para lo dicho, animar o para hacer ilustraciones sencillas. Para ello, utilizaré Adobe Illustrator, concretamente la version cs6 y una tableta gráfica wacom intuos4, aunque evidentemente tambien se puede llevar a cabo con el ratón.

En primer lugar evidentemente, es tener algo que vectorizar, lo ideal para los menos experimentados, es empezar con dibujos sencillos o logos, el nivel de dificultad va progresivamente al detalle del mismo. Yo hice un puñado de bocetos de personajes de lo mas variopinto.

Ahora es cuestión de digitalizar las imagenes. Lo ideal es escanearlas, aunque tampoco pasa nada si le haceis una foto, intentando no inclinar mucho la cámara, para que no salga en perspectiva, si no es lo que se busca claro. Algo como así.

De echo para esta muestra, voy a utilizar esta misma foto, dadas las dimensiones del papel que he dibujado (A3) es hasta mas práctico. Una vez que tenemos claro que vamos a vectorizar, abrimos el illustrator y el archivo que elegimos y ajustamos a las dimensiones del papel hasta cubrir toda la hoja.

Ahora vamos a la pestaña capas "layers" y damos doble clic en la capa que hemos creado, que aparecerá como layer 1, si no la nombramos anteriormente o lo directamente haciendo clic en el nombre de la capa.

Se nos abrirá una ventana de opciones de capa "layer options", donde nos dejará poner nombre a la capa, color y otras opciones. Como nos interesa utilizarla como papel de calco, para poder dibujar sobre ella, marcaremos la casilla "template" y pondremos un porcentaje de opacidad a nuestro gusto, por defecto viene al 50%, creo que suficiente para el caso que nos conviene. 

Aceptamos y podremos ver como la capa se bloquea automáticamente y nuestro dibujo se aclara para poder trabajar en él. Seguidamente, creamos una nueva capa dejando los valores por defecto, aunque yo la he nombrado "dibujo", para tener un poco de orden en caso de que hagamos mas capas. 

Ahora ya estamos listos para coger el pincel y repasar todo el dibujo, pero antes de seguir, haremos un pequeño paréntesis, para centrarnos un poco en los pinceles, porque también tiene su historia y el uso personalizado de los mismos, nos dará mejores resultados en la mayoría de casos.

Pinceles

Los pinceles predeterminados, aunque suficientes, carecen de personalidad, no siempre nos convienen en ciertos aspectos del dibujo en las que buscamos un tipo de linea y muchos de ellos son decorativos. Hay curvas, rectas, lineas, etc., que quedan mejor con un tipo de trazo. Para ello, una de las mejores cosas que podemos hacer, es crearnos un abanico personalizado de pinceles, que van mas acorde con nuestro estilo de dibujo. 

Para ello, abrimos la ventana de pinceles "brushes", en este caso no tengo ningun pincel disponible, podemos añadir pinceles desde el icono de la biblioteca que esta en la carpeta brushes por defecto y que también podemos clasificarlos. Nosotros lo que queremos es crear nuestra propia gama de pinceles, asi que eliminamos los pinceles que no vayamos a utilizar. Ahora empezaremos creando un pincel sencillo, escogemos la opcion elipse y creamos una intentando hacerla lo mas estrecha posible. 

El sistema es sencillo, el patrón que sigue es que se dibujará esa misma linea respetando las características en todos lados donde la dibujemos. Este pincel hará que tanto la linea de inicio como la final, se dibuje en forma proporcional de punta, pero el "cuerpo" que la une, sea mas grueso que estas. Si quisiéramos hacer lo contrario, tendríamos que hacer las puntas gruesas y el cuerpo mas fino que estas. Aquí un ejemplo:

Para crear dicho pincel, debemos arrastrarla la linea deseada hasta la ventana de pinceles, donde posteriormente nos abrirá una nueva ventana llamada nuevo pincel "new brush" y de la que deberemos marcar la pestaña "art brush".

Seguidamente, nos saldrá otra ventana mas precisa de la configuración de nuestro nuevo pincel. 

Resumiendo un poco, podemos controlar la dirección que se dibujará la linea, en nuestro caso tanto da, ya que es simétrica, la anchura, la proporción de escalado,... lo ideal es ir experimentando las opciones que nos brinda el programa. Pero lo que mas nos importa en este caso es en el método de coloración, que en nuestro marcaremos como tintes "tints". Una vez aceptemos, nuestro nuevo pincel estará disponible en nuestra biblioteca de pinceles. He creado una serie de pinceles para que veáis la diferencia entre ellos, copiando el mismo trazo y aplicando en cada uno de ellos un pincel distinto.

Es idóneo hacerse con una gama que nos cubra todas nuestras necesidades, trazos para contornos, bordes, interiores, lineas de sombras... según el tipo de dibujo. También podemos ir probando nuevos pinceles a lineas que ya tenemos creadas, para ver cual se adapta mejor a nuestro dibujo, por eso es casi preferible ir creando los pinceles a medida que las necesitemos y no crear una gama de pinceles que a lo mejor ni vamos a llegar a utilizar.

Empezando a dibujar

Una vez que tengamos un pincel adecuado para empezar a dibujar y con la capa nueva que hemos creado previamente que yo llame "dibujo", empezamos con el pincel a repasar todo el dibujo. 

Sobretodo es muy importante cerrar todo el dibujo. Es decir que no haya espacios de lineas entre zonas independientes, por ejemplo el cuerpo de la ropa, ya que luego al rellenarlos de color, los limites del mismo estarán delimitados por la zona que rodea la linea. Un ejemplo de ello seria esto:

Como se puede ver hay un espacio entre la cara y las gafas que si intentaramos pintar ahora la cara, no solo pintariamos la cara sino el fondo. En cambio la oreja esta totalmente aislada, por lo que al aplicarle color, solo se pintaría esa zona. Esto tiene fácil solución, con la flecha blanca seleccionamos la linea que deseamos unir y desde el punto mas extremo de la misma la llevamos hasta el punto de las gafas, cuidado porque a veces movemos toda la linea creada, tenemos que mover solo el punto.

Teniendo cuidado en ese aspecto, continuamos dibujando el resto del dibujo. Lo que estamos buscando es resultado, no profesionalidad. Si trabajamos para ilustrar, habría que trabajar mas los pinceles y las formas del personaje. Al acabar ya tenemos una muestra para continuar con el color.

Para eso, seleccionamos todos los trazos con el ratón y hacemos un "copy & paste" (ctrl + c / ctrl + v). Una vez tengamos la copia, vamos al menú objeto "object" y seleccionamos expandir apariencia "expand appearance", con esto podemos editar formas independientemente. Si se desea tambien podemos seleccionar un color, que será el color "predeterminado" para trabajar el resto de colores, lo ideal es un color claro azulado o verde. No esta demás, borrar aquellas partes que no son útiles o no se van a colorear, como en mi caso los ojos, que serán negros. También podemos ocultar la capa de la foto para trabajar mas limpiamente.

Una vez lo tengamos, lo llevamos a una capa nueva, yo la he llamado "color". Una vez en la capa nueva, abrimos la ventana de pathfinder que la encontraremos en el menú "windows" o presionando el atajo (shift + ctrl + F9), ahí vemos las distintas opciones para trabajar con formas, en nuestro caso nos interesa la primera opcion "unity".

Seguidamente vamos de nuevo a al menú "object", seleccionamos "compound path" y por último en "release". Esto rellenara todo el dibujo manteniendo las formas por separado. Si no cubre todo el dibujo o hay partes sin rellenar, deberemos hacer de nuevo el procedimiento hasta acabar de unir todos los trazos de la capa "dibujo" como antes he insistido tanto y volver hasta este punto. Bueno, ya tenemos el dibujo totalmente relleno de color que habíamos decidido para trabajar.

Ahora se trata de poner una capa encima de la otra y desagrupar las formas en el menú "object" y "ungroup". Ya podemos empezar a colorear las formas individualemente. Normalmente yo suelo colorear de la forma mas sencilla, que es con colores planos, pero gracias a esta forma, podemos trabajar con degradados, sombras y luces. Vamos a pintar la cara como ejemplo para ya finalizar este pequeña guia y mostrar algunos ejemplos. 

Abrimos la ventana de degradados "gradient" y seleccionamos el color deseado para la cara. Podemos tener diferentes resultados dependiendo del tipo de degradado, plano o radial, es cuestión de ir probando. También jugar un poco con el color, poner en el extremo uno u otro cambia mucho. Unos ejemplos de formas de colorear. 

Colores planos

Degradado lineal

Degradado radial

Ademas podemos mover el degradado a nuestro antojo, tanto la dirección como color o colores, etc., lo suyo es ir probando, se consiguen cosas muy buenas con poco esmero. 

Cambiar el tono de lugar y la dirección de degrado

Un apunte mas y es que podemos coger varios formas (cara, brazos, piernas..) que tengan el mismo tono y darles color a la vez si asi lo deseamos, aunque la gracia aquí, seria trabajarlas por separado. Sin mas os dejo con algunos ejemplos de esos mismos bocetos que hice.

La pesadilla del sepultero, animacion en flash.

Hace años, concretamente hace cinco, ¡como pasa el tiempo! acabe un pequeño corto animado realizado en flash. Por aquel entonces estudiaba en una escuela de diseño y entre otras muchas cosas realizamos unas clases de animación en flash, aunque no fueron muchas, apenas un par de horas, fueron suficientes, para empezar hacer un pequeño corto animado. En las clases utilizamos Adobe Flash en su versión Creative Suite 3 y mediante unos pequeños ejemplos muy simples, mediante figuras geométricas simples tales como círculos, cuadrados y en alguna ocasión dibujos ya vectorizados que nos facilitó el profesor, aprendimos a manejar las distintas técnicas de animación, como desplazamientos, escala , rotación de tales objetos e incluso interactuar con ellos.

"The Gravedigger Knighmare" o la "Pesadilla del Sepultero", fue la propuesta que lleve a cabo en mi proyecto para hacer la animación. El proceso del mismo tuvo una serie de etapas o pasos, que aunque no son esenciales para llevarla a cabo, es una forma de tener nuestro trabajo bien estructurado y ordenado, para trabajar fluidamente.

Aunque en algunos pasos el orden de preferencia puede variar, a mi me fue bien siguiendo estos pasos:

- Búsqueda de ideas o propuestas para la historia.

 Sin historia no hay animación, esto todo el mundo lo tiene claro, es más, uno de los motivos que nos lleva a cabo hacerla, es tener una historia que contar y tener el deseo de realizarlas. Asi que si tanto se haga una historia corta, como larga, lo ideal escribir unas lineas de esa historia o incluso hacer un pequeño dibujo como un storyboard preliminar, sin detallar demasiado para hacerse una idea clara.

- Búsqueda de imágenes y sonidos.

Un paso esencial, ya que podemos perder mucho tiempo buscando, hay que tener las ideas muy claras, para no nos entren dudas durante los siguientes procesos. Si vamos hacer por ejemplo una historia de una carrera de formula 1, deberíamos enfocarnos exclusivamente a buscar imágenes de coches de formula 1, circuitos, publico, banderas y ese tipo de cosas, seleccionarlas y descartar las que no nos interesan. Lo mismo ocurre con los efectos de sonido y música (si se va a incluir claro), buscar el rugido de los motores de los coches, gritos del publico, frenadas de coches, choques... vamos ningún secreto. La cuestión es que no podemos cometer el error de empezar a querer introducir cosas prescindibles, bien porque tenéis una gran escena que os gustaría plasmar en la animación o por las cuestiones que fueran, debemos centrarnos en la trama principal, que lo único que hacen es retrasar el trabajo para contar lo mismo.

Para buscarlos, podemos utilizar google imágenes o un banco de imágenes alternativo, recordad que no importa el tamaño, ya que bien los utilizareis para vectorizar, como para bocetar. Para los sonidos, lo mismo, google o banco de sonidos. También apuntar que existen páginas, con vectores para los más perezosos, pero evidentemente os limitará mucho el estar ya creados, aunque para los fondos pueden venir bien después de todo. Aquí os dejo un par de enlaces que utilicé en su momento.

Para efectos de sonido

Para efectos e imágenes

- Primeros bocetos. 

Una vez que tenemos las imágenes, podemos ir bocetando aquellas que nos parezcan interesantes para incluir en nuestra animación. Recordad que dentro de lo que cabe, lo ideal es que sean bocetos simples ya que luego deberán ser vectorizados, con lo que cuanto mas sencillo, mas fácil sera animarlo. Podemos dibujar escenarios o localizaciones por un lado, que interactuen a modo de fondo y viceversa con los personajes u objetos principales.

También podemos incluir algunas pequeñas animaciones en forma de muestra que nos serán muy útiles cuando animemos en el programa.

- StoryBoard. 

Aquí viene lo que para mi, es uno de los pilares más importantes de una animación. Si tenéis un buen storyboard, claro y definido, la animación saldrá prácticamente "sola". Y es que se puede decir que el storyboard, es como el "manual de instrucciones" para el animador. Ahí se refleja todos los acontecimientos que irán apareciendo durante todos los frames (cuadros por segundo) de tiempo de la animación y aunque principalmente sea la trama dibujada de la historia lo que predomine el storyboard, también  es recomendable anotar, otros acontecimientos tales como los efectos de sonido, efectos de plano, música y otro tipo de anotaciones que aclaren de manera gráfica la historia. Con esto, se evitan posibles errores de historia, falta de secuencias, sobrantes y todo este tipo de cuestiones que se llevan a cabo, cuando estamos animando. Ademas es conveniente que cuando deis por finalizado el storyboard y una vez empezada la animación, es aconsejable no ir modificando detalles "clave" y es preferible hacerlo a "raja tabla" tal cual como lo habéis reflejado en el storyboard, aunque puntualmente si no modifica mucho vuestra idea anterior tampoco pasa nada. Por eso es mejor trabajar bien este proceso para que luego no tengamos muchos parones, que hagan el proceso de animado mas lento.

-Vectorizado de imágenes y dibujos.

Teniendo ya nuestras imagenes recopiladas y bocetos realizados, iremos seleccionando las que mas se ajusten a nuestro storyboard y con paciencia ir vectorizandolas, con un programa de vectorización. Yo en su día utilicé freehand, aunque es un programa ya en desuso y del que pocos trabajan, debido a las pocas novedades y pocas actualizaciones que ha tenido muchos años atrás, debido a esto la popularidad del programa fue en decadencia respecto a adobe illustrator, con muchas mas opciones y mas actualizado a los tiempos que corren, aunque freehand sigue siendo un programa excepcional en rendimiento y simplicidad para crear vectores, también podemos hacerlos aunque de una manera menos precisa, con el mismo adobe flash.

El caso es que hay otra alternativa. Si teneis la suerte de tener una tableta grafica, podemos dibujar directamente los vectores en adobe flash, con lo que el proceso de vectorizado es realmente veloz. Yo lo hice con una Wacom graphire4, que fue mi segunda tableta y fue un paso gigante a la experiencia de dibujar en el ordenador con esta tecnologia. Aunque ahora dispongo de otra mas precisa y mas "purista" que ya hable en este mismo blog y de la que hace que parezca que dibujes en papel. En cualquier caso, a un animador/ilsutrador nunca le debería falta una tableta, sobre todo ahora, que las hay tan asequibles y con una calidad y precisión increíbles.

- Descubriendo Adobe Flash

Una vez acabado con todos esos procesos esenciales, ya podemos arrancar el programa, que como dije unas lineas mas arriba es la version cs3. Aunque no hay muchas variaciones entre unas y otras, uno de los lugares que mas prestaremos atención junto con la linea de tiempo, es la dedicada a la biblioteca, donde deberemos añadir todo tipo de archivos que queramos utilizar en nuestra animación. Incluiremos la música, los vectores y efectos de sonido que deseemos para tener por fin, la "mesa" lista para empezar a animar.

 - Animación. Procedemos a "digitalizar" la historia.

Nuestro gran aliado aquí es el storyboard, del cual siguiendo sus instrucciones, no tendremos muchos problemas en acabar la historia rápidamente. Insisto en que es mejor "calcarlo" tal cual como lo tenéis ahí reflejado, puesto que modificar cosas al aire luego puede dar problemas. No voy a entrar en cuestiones del programa, primero porque tendría que hacer unas cuantas entradas mas y segundo, porque hay miles de tutoriales que lo explican perfectamente en la red, así que os aconsejo que os "empapéis" la teoría, antes de entrar a la práctica. Ademas con las nuevas versiones del mismo, han ido implementando mejoras, que agilizan aun mas las animaciones tales como la estructuras de huesos, con lo que nos facilitan aun mas, el no tener que ir dibujando constantemente el mismo dibujo de distintas posturas, con lo que es un poco tonto, explicar el camino largo, teniendo actualmente caminos mas cortos, para hacer lo mismo.

Finalmente, después de animar, ya solo os queda ver que todo funciona bien, escena por escena y animación completa. Tampoco esta de mas, añadir una marca o logotipo a vuestras animaciones, bien vectorizandolas antes o incrustando una imagen estática si no os queréis complicar la vida. Así que ya sabéis, si os interesa el tema, no dejéis de intentarlo, lo mas importante es tener ilusión y voluntad. Lo que prima es la originalidad no el acabado. Os dejo con la animación en concreto, haber si os animáis algunos.

Saludos