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.

Lolo´s Prison

Siguiendo con la temática del diseño, hoy me gustaría mostraros un pequeño juego que creé con "Macromedia Director Shockwave Studio" en su versión 8.5, hoy llamado adobe director. Programa que fue desarrollado por Macromedia y a partir del 2008, distribuido por Adobe. Del cual, fue la inspiración para crear Adobe Flash. En la práctica Director sirve para la creación de aplicaciones multimedia, en este caso un juego. El interface es bastante sencillo e intuitivo y lo que nos limitará, será mas bien nuestras nociones de programación. El lenguaje de programación es lingo. Aunque no hablaré de programación, no es mi especialidad. Entraremos mas en la parte del desarrollo.

Planificación del trabajo

Una vez claro el tipo de juego que iba a desarrollar, redacté en un papel, un pequeño texto explicativo con la historia, desarrollo, algunos bocetos, niveles, tipo de efectos sonido, tipo música y cualquier acontecimiento que fuera relevante para el desarrollo.

Introducción, personajes y escenarios

La lamentable historia del juego , solo buscaba la situación para poner a nuestro personaje recorriendo laberintos. Se trabajaría mas si fuera un juego comercial, pero es mas un ejemplo que otra cosa.

"Tenemos a Manolo, que estaba condenado a una semana de prisión por discrepancias con su mujer por ver quien le tocaba ver la tele el sábado noche. Justamente el día de su salida, los guardias de seguridad en vez de soltarte fuera de prisión, le dan las llaves de su celda porque no querían perderse el derby barça-madrid. Es mas, antes de irse le invitan a una botella de whisky, para que no se chivara al director, por salir antes de tiempo del trabajo. Manolo acepta gustosamente y después de abrir la celda, se bebió la botella , con la consecuencia de que ahora lleva una cogorza tremenda. Nuestra misión es sencilla. Conducir a Manolo hasta la salida de la cárcel con cuidado de no chocar con la pared con la probabilidad de quedar inconsciente, cosa difícil, ya que ha bebido demasiado" 

Lolo´s Prison consta de 4 personajes totales. De los cuales uno es el protagonista que es quien controlamos en el juego, otros 2 son otros presos que encuentras por el camino y por último un policía. Tenemos
5 niveles o escenarios que recorrer. La interacción entre niveles se hace a través de escaleras, donde podremos retroceder si es necesario. También podemos hablar con algunos personajes acercándonos a ellos, cuando lo hagamos saldrá una pantalla con el personaje en cuestión y el texto. Habrá un lugar "secreto" esencial para salir de la prisión y será necesario hablar con los personajes para resolverlo.

Bocetos

Ahora mismo no tengo disponibles los bocetos en el ordenador, en cuanto los tenga editaré la entrada. Mas que nada, porque en ellos se reflejan perfectamente, la idea de que desarrollarlos es muy importante, para tener bien perfilado el trabajo, al igual que es de gran utilidad el storyboard para crear una animaciones.
En este caso en concreto, utilicé las típicas hojas cuadriculadas, de modo que un cuadrado interpretaría un pixel en pantalla. Así que primero creé los pixeles de los personajes, con sus respectivas animaciones. Luego tenemos lo que son los diseños del fondo, como rocas, piedras, celdas, suelo y todas estas cosas que estarán creadas a partir del mismo patrón de pixeles de ancho y largo, normalmente cuadrados para unirlas y crear así los escenarios. Por último, se diseñó los mapas y niveles del juego. Una vez acabados, le dí color a lo que ya tenia decidido.

Digitalizando los bocetos

Con los bocetos en la mano, me pongo a digitalizar todo lo necesario en Photoshop. Como ya he comentado antes, el hacerlos con hojas cuadriculadas, permite facilitar el trabajo, un cuadrado relleno en la hoja, igual a un pixel en pantalla. Para ello, elegí la herramienta "lápiz", que nos permite trabajar cómodamente para tal fin. Así que poco a poco voy creando el mundo digital.

Personajes:

Animaciones:

Ejemplo de animación: 

Materiales:

Niveles:

Arrancando el programa

Tampoco entraré en profundidad, en el programa, ni hablaré de tecnicismos. Solo comentaré por encima los detalles mas relevantes del interface y poco mas, ya que es un programa viejo y solo lo he llegado a utilizar para hacer minijuegos y poco mas hace algunos años ya, lo abandoné para aprender mas sobre adobe flash.

Interface:

Básicamente nos fijaremos en las tres ventanas mas importantes que son:

1.Stage. Donde se desarrollará la acción de todo lo que estamos haciendo, es decir, el resultado de todo lo que hagamos en tiempo real y lo que obtendremos finalmente.

2.Cast. Esto es el equivalente a la biblioteca de Flash. En esta ventana, iremos agregando todo el contenido que queramos, gráficos, sonido, música... podemos arrastrarlos directamente del explorador al cast, directamente. Ademas podemos crear rutinas en la misma ventana

3.Score. Parecida a la barra de tiempo en Flash. Ahí se indica que acontecimientos sucede y en que tiempo se muestran.

Indicaciones que dar al programa

El programa, trabaja en un entorno sencillo, blanco y negro, donde blanco no hay acontecimientos y negro si los ahí (imagen derecha), por lo que deberemos programar siguiendo unas eventos de lo que queramos que pase cuando un punto negro ( que seria el personaje que controlamos) toca otro punto negro. Cada uno pueden acontecer las mismas cosas o distintas según lo que queremos conseguir. Todo esto se "disfraza" con la imagen del gráfico final (imagen izquierda), debidamente vinculada a los graficos en blanco y negro que estarán ocultos, es decir, que el punto negro lo asociaremos al gráfico del personaje y cuando este se mueva, también lo hará el punto negro.

Las rutinas se programaran, teniendo esto en cuenta y serán las mismas para todos los objetos. Cada punto negro, deberá tener su correspondiente gráfico final, tan solo será la referencia que toma el programa, cuando introducimos código en lenguaje lingo.

Como podemos ver, tenemos aquí tres objetos, A, B y C. Cuando interactuan entre ellos, vamos a ordenarle al programa, que ocurran ciertos evento, que como vemos en la imagen serán 3 en total. Pues bien, antes de empezar, debemos indicarle al programa, ciertas reglas a seguir. Si nos fijamos en el objeto A, que es un rectángulo que cubre totalmente el personaje, deberemos indicarle al programa que se oculte tras el personaje cuando estemos jugando, también que se mueva a "x pixeles" con los cursores "arriba", "abajo", "izquierda" y "derecha", según cual de ellos presionemos y por último, que vincule el movimiento del rectángulo negro al gráfico del personaje, esto se indica con un identificador en el cast. Como ejemplo podríamos programar, que si pulsamos el cursor de la derecha de nuestro teclado, el rectángulo negro se desplace por ejemplo "20 pixeles" a la derecha, todo ello vinculado a nuestro personaje, el cual será el único que se verá en el stage. De esta forma conseguimos que nuestro personaje pueda moverse por todo el escenario en todas las direcciones, sin mostrar nada mas que el personaje, esto sería el evento 1. Seguidamente, debemos indicar que cuando el objeto A, choque con el objeto B que estan vinculadas a las paredes, perdamos la vida y volvamos al menú inicial, mostrando la palabra "game over", evento 2. Por último, indicaremos que cuando el objeto A, interactue con objeto C, que serían las escaleras, subiéramos o bajáramos de nivel, evento 3.

Resumiendo tenemos 3 objetos:

A - "Personaje", vinculado a un cuadrado.
B - "Paredes o muros", vinculado al escenario, concretamente en los gráficos de la pared.
C - "Escaleras", tambien vinculado al escenario, pero a los gráficos de las escaleras.

Cuando interactuan entre ellos, ocurren ciertos eventos

1 - "A" interactua con el escenario, controlando el personaje con los cursores.
2 - "A con B" Muerte del personajes.
3 - "A con C" Sube o baja nivel.

Esto en cuanto a eventos puramente del juego. Luego podemos sumar que cuando ocurra el evento 2 se escuche un grito y después una música de game over. Las posibilidades son infinitas. Por ejemplo podemos hacer que cuando se acerque nuestro personaje al policia, tenga su pantalla correspondiente con texto.

Esto sería una pequeña muestra. Por supuesto depende del nivel de programación que tenga cada uno, podrá hacer cosas mejores. Desde luego programar no es mi punto fuerte, la muestra esta en que la duración aproximada de hacer el juego, el 75% de el, lo perdí programando. Ademas que disfruté mucho mas el crearlo que el programarlo.

Finalizando

Lo ideal es que todo lo que se vaya programando, se vaya comprobando. A veces programando ciertas rutinas, estas repercuten en otras, así que no esta de mas comprobarlo más exhaustivamente. Finalmente solo nos quedara disfrutar de él.

Wacom Intuos 4

Hace poco me llego la Intuos 4 tamaño mediano de Amazon Japón. He de decir que antes de comprarla, tuve en cuenta las opiniones de varios foreros, donde se quejaban de la duración de las puntas e incluso de gente que desconocía que las puntas se gastaban (yo me enteré en los foros). También de las recomendaciones de que comprara puntas de recambio, ya que algunos comentan que a los 3 días de uso intensivo, la punta era inservible. Quizás sea el único punto negativo, ya que los propios usuarios comentaban que es una delicia de tableta, que te daba sensación de que el tacto era el mismo que el papel.


Y efectivamente, tras unas breves pruebas, he decir que la tableta es una excelente herramienta de trabajo para el ilustrador o diseñador general de aplicaciones para ordenador. Ya que no solo se comporta como una herramienta perfecta para la ilustración a mano alzada tal cual papel y lápiz, sino que agiliza de manera notable el tiempo que se ejecuta para realizarlo, gracias a sus 8 "ExpressKeys" con pantalla oled y su "touchring" todas programables, con lo que el acceso al teclado es menos intenso. Por otro lado tiene un diseño general muy sofisticado y moderno, tanto la tableta como el accesorio de las puntas y su lápiz. Que decir del packaging, una verdadera delicia abrir esa caja.


He de decir que venía de una wacom graphire 4 y el cambio ha sido notable. Sobre todo en los trazos que ahora con la Intuos son más naturales, el cambio de superficie rugosa de la Intuos evita que se te vaya el lápiz a "cuenca" en los trazos largos, como ocurría con la Graphire debido a la superficie plástica donde trabajamos. De todas formas, creo que es útil ambas tabletas ya que quizás para unas cosas nos venga mejor una que otra. Aún no he echo un uso intensivo de la tableta durante mucho tiempo, así que poco a poco mientras trabaje os iré informando si se notan mejores resultados que con mi anterior tableta.