Tutorial: Gráficos vectoriales con Macromedia Freehand

Lo que había prometido hace muucho tiempo: Hacer un Tutorial sobre como hacer Gráficos vectoriales a partir de una imagen simple. A diferencia de Photoshop, yop trabajo con Macromedia Freehand. Para los que tengan Adobe Illustrator el proceso varía un poco, ya que, a parte de usar la herramienta Pluma, debes usar la herramienta Redondear y esas cosas. Un poco de práctica en tu programa favorito y tendrás resultados ^^

Este Tutorial es publicado bajo la
Licencia de Documentación Libre GNU.

A parte de trabajar con Redes y esas cosas, uno de mis hobbies favoritos es trabajar con Gráficos. NO soy Diseñador, soy Informático, pero puedo manejarme muy bien con los programas de gráficos como Photoshop o Illustrator.

En este Tutorial voy a mostrar como Digitalizar vectorialmente una imagen de Amala con el Macromedia Freehand. También pueden hacerlo con el Adobe Illustrator. Específicamente voy a usar el Freehand MX para Mac.


El resultado final lo puse en mi Deviant:
http://amitie10g.deviantart.com/art/Amala-Vectorial-122340907

El original, coloreado por una Fan, en formato PNG:
http://milestailsprowerssha.deviantart.com/art/ojamajo-doremi-rainbow-amala-54775228

Vean a simple vista si son idénticos. Luego veanlo de más cerca.

Para comenzar:

Para Guardar un gráfico:

• En Freehand debes seleccionar Archivo > Exportar...
• En Illustrator, Archivo > Guardar para Web...

Consideraciones y Formato:

• Guarda constantemente los cambios. Para Guardar el Documento vas a Archivo > Guardar como, y lo vas guardando con CONTROL+S o COMMAND+S (en Mac) .
• Para exportar a SVG, Exporta desde Freehand en formato de Adobe Illustrator. Luego lo importas en AI y lo Guardas como SVG.
  
• Exporta el gráfico en formato Flash (swf) o Scalable vector Graphics (svg).
• Ajusta los parámetros al exportar. Prueba a distintos modos de compresión y fíjate si las formas se visualizan correctamente.
• ELIMINA las capas sobrantes, incluyendo la de Primer Plano, para poder exportar sólo los Trazados, ANTES de exportar.

He aquí los pasos que seguí. Pueden seguirlos en orden o saltarse algunos, dependiendo de la complejidad del gráfico.


1.- Importar una Imagen
El primer paso es Importar una imagen en el Programa. Archivo > Importar, o Abrir con desde el Finder (Navegador de archivos).
2.- Teniendo la imagen Importada, agregamos una nueva capa en la ficha Capas. Sobre esta Capa haremos los Trazados; en la capa primer plano estará la imagen original, que recomiendo Bloquearla. Luego, ajustamos el tamaño del Documento al tamaño de la Imagen, y la centramos completamente.

3.- Con la herramienta Pluma, vamos trazando el contorno, comenzando con el contorno externo del pelo. No se preocupen de las lineas cuadradas y rectas, después podrán ser Redondeadas.
4.- El siguiente paso es Redondear los Trazados. para esto, selecciona la Herramienta Selección, haz dos clicks seguidos (NO doble click) sobre uno de los puntos.

El primer click es para seleccionar el punto y arrastrarlo; el segundo es para seleccionarlo, y poder modificar el trazado, en este caso para Redondearlo. Del Punto saldrá una tercera linea de control, con la cual podrás controlar la modificación del Trazado.

Cabe señalar que, el trazado que se modificará, es el trazado siguiente al Punto que haz creado con la pluma, en el orden como hiciste el trazado. Por ejemplo, si comenzaste el trazado en el sentido contrario de las agujas del reloj 8en este caso), el trazado siguiente es el siguiente en el sentido señalado, desde el Punto creado.

Nota: Para Modificar el grosor del Trazado, en el panel derecho ve a la ficha Objeto, y en la sección Trazado, ajustas los parámetros necesarios (grosor, puntas, vértice, etc). En el caso de Trazados de una linea (cejas y otras lineas), has de Redondearlas. Para que las esquinas aparezcan redondeadas, ajustas el vértice del trazado.

5.- Teniendo lista la forma básica de la cabeza, procedemos a Cambiar el color del Trazado momentaneamente y Bloquearlo. Esto es para poder distinguirlo bien del resto de los Trazados mientras se crean los demás.

Nota: Ocultando la Capa Primer plano, podemos ver el contorno generado.

Ocultando la Capa Primer plano:

6.- Ahora continuamos con el resto del pelo. Amala tiene el pelo trenzado en pelotitas. Esta vez seleccionamos la herramienta Círculo y creamos formas elípticas sobre el pelo. hacemos los ajustes pertinentes y Voilá!

La última parte del pelo no se puede hacer con la herramienta Círculo, así que usamos la herramienta Pluma y le damos forma.

Ahi tenemos el resultado:

7.- Ahora comenzamos con el Rostro. El procedimiento es el mismo: Creamos un punto de inicio y trazamos al rededor del peinado y el contorno de la cara.Trazamos sólo hasta las orejas. Ahí tomamos el punto, y lo modificamos para redondear ese trazado.
Nuevamente, modificamos el color del Trazado y lo Bloqueamos.

Este es el resultado:

8.- El siguiente paso es trazar las Cejas. Evidentemente es muy fácil.
Sólo tenemos que hacer el trazado de un lado a otro, redondeando las puntas.

Y ahí están las dos cejas hechas:

9.- A diferencia de las cejas, la nariz y la boca, los Ojos son una parte particularmente complicada y requiere un poco de práctica. Una vez aprendido verás lo sencillo que es; no te frustres si no te sale perfecto, es natural en el mundo de los Gráficos vectoriales.
Primero, empezamos con las Pestañas. Ahí hay que hacer dos trazados, uno grueso y el otro más delgado. Hacer los trazados hacia arriba es sencillo, y hay que redondearlos y ajustarlos perfectamente.

Nota: Para aplicar relleno, nos vamos a la ficha objeto, y seleccionamos Agregar Relleno.
Aparecerá un relleno negro. Para poder Modificarlo, debemos Ocultar la capa Trazados para dejar visible la capa de Primer plano.
Para poder seleccionar Color sobre esta capa, primero DEBES Desbloquear la Capa Primer plano.
Luego, volvemos a la ficha objeto, modificamos el color, y con el Selector de color (gotero) seleccionamos el color del fondo.
Finalmente, volvemos a fa ficha Capas, Des-ocultamos la Capa Trazados y vemos los resultados.

Si tienes problemas para seleccionar o te estorban los trazados, utiliza este procedimiento para el resto del tutorial.

Con los ojos, comenzamos con la parte blanca. hacemos el trazado completo y lo redondeamos.
Luego con la parte más oscura del Iris. Hacemos el trazado completo, de arriba a abajo.
Después la parte clara del iris, abajo. hacemos dos trazados y los ajustamos.
Los brillos es sencillo. redondeamos y listo!

Los ojos:

Para mayor comodidad y no tener que hacerlo todo de nuevo, Copiamos el ojo y lo ponemos al otro lado y hacerle ahí los ajustes necesarios. Para hacerlo correctamente, debemos Agrupar los trazados (seleccionar los trazados y pulsar CONTROL+G ó COMMAND+G en Mac), luego Copiamos (CONTROL+C o COMMAND+C) y finalmente pegamos (CONTROL+V o COMMAND+V. En el otro lado, teniendo Agrupado el conjunto de trazados, hacemos doble click en la forma para ponerla en modo de Transformación libre. Tomamos desde el costado y arrastramos hacia el otro lado para poder reflejar la forma.

Luego hacemos los ajustes necesarios a los Trazados del ojo derecho para que coincida con el ojo original.

Nota: Ocultar la Capa Trazados mostrará la Capa Primer plano, con lo cual podrá ajustarse los Trazados con relleno y seleccionar colores del fondo.

Antes de ir al siguiente paso, asegúrate de haber trazado las cejas, nariz y boca, además de otros elementos en el rostro.

10.- Aplicar relleno al rostro y pelo.
Es sencillo. Usamos el Selector de color como indicamos anteriormente, y aplicamos dicho relleno.

El rostro completo, con relleno:

11.- Orejas.
También es sencillo trazar las orejas. Simplemente trazamos el contorno y los Pliegues, y aplicamos una forma sin Trazado para la parte oscura (sombra) de la oreja.
12.- El cuello (no tengo Screenshot -__-).
Tambiene s algo sencillo, pero requiere de un poquitín de práctica. El Trazado lo comenzamos desde un poco más arriba del mentón (parte izquierda, bajamos hasta el cuello de la blusa, y nos vamos a la parte derecha del cuello, terminando al otro lado, y finalizamos el trazado.
Este es un Trazado de 3 puntos. ¿Por qué? Para ahorrar espacio de Trazado a la hora de exportar xD

Finalmente, tomamos el segundo Trazado, y lo curvamos para abarcar toda el area visible del cuello, hasta ser totalmente cubierta por el cuello de la blusa.

13 La Blusa.
También es algo sencillo. Comenzamos con el cuello, luego con el tronco y botones, y finalmente los brazos. El proceso es el mismo así que no voy a redundar.
Lo único sí, es que los brazos son transparentes, así que hay que hacer dos trazados, uno de los brazos de Amala y el otro del resto de la la blusa.

El resultado final de los brazos:

13.- Pantalón/Falda, Piernas, Calcetas y Zapatos.
Evidentemente una parte sencilla. hacemos los trazados necesarios. Acá podemos jugar un poco con los trazados (largo y forma del pantalón o falda). Sólo voy a mostrar el resto de los Screenshot.

Dando forma a los pantaloncillos:

Nota: para disponer los Trazados Atras y Adelante, usamos el teclado:

• CONTROL/COMMAND+FLECHA ARRIBA para disponer más adelante
• CONTROL/COMMAND+SHIFT+FLECHA ARRIBA para Traer al frente
• CONTROL/COMMAND+FLECHA ABAJO para Disponer más atrás
• CONTROL/COMMAND+SHIFT+FLECHA ABAJO para Enviar al fondo

Obviamente movemos los trazados hacia atrás; las piernas de tras del pantalón/falda xD

Trazando las piernas:

Redondeamos la forma de los zapatos y tenemos el resultado final
14.- Toques finales.
Para que la imagen quede lista, hay que aplicarle lo que falta, usando el procedimiento indicado anteriormente para seleccionar colores:

Detalles de las trenzas:

Brillo, sombras y Broche:

Y los Aretes:

Y Voilá! el resultado final:

Acá tenemos la imagen en Adobe Illustrator:

Ahi, podemos agregarle los toques finales, como Texto (herramienta Texto):
Si estamos usando una Fuente que no esté disponible normalmente (como Zapfino), tenemos que convertir ese Texto en Trazados (Texto > Crear contornos):

Luego, Simplificamos los Trazados de texto para que ocupe menos espacio. Usamos valores a corde al resultado final, equilibrio Tamaño/Calidad del Trazado:

Cuadro de diálogo Simplificar:

15.- Exportando a SVG.
Nos vamos a Archivo > Guardar para Web y seleccionamos las opciones de guardado de SVG.

Finalmente Exportamos el Gráfico, ya sea en PNG24 a resolución elevada, PNG8 a baja resolución para Vistas en miniatura, o en formato vectorial Flash o SVG. Recuerda eliminar la capa Primer plano para exportar sólo los Trazados.


16.- Editando en Editor de texto.
A veces, es necesario Editar el gráfico SVG con un Editor de textos como el Block de notas (Windows), GEdit (Gnome/Linux), TextEdit (Mac) o derechamente el VI (Unix). Recuerden que SVG es un archivo XML, y por lo tanto, Editable con un Editor de textos.

En TextEdit, nos vamos a Archivo > Abrir y DEBEMOS marcar la casilla Ignorar comandos RTF para poder editar Texto plano.

Cuadro de diálogo Abrir de TextEdit:

Nótese que tambien tenemos que arreglar las Familias de fuentes, como Comic sans MS (que al exportar queda todo junto y hay que separarlo para que se vea correctamente).

Acá vemos que el Plug-in de Exportación a SVG de Adobe en AI dejó el Nombre de la fuente toda junta. Ahi es neceesario Separarla para que se visualice correctamente en el Visor.

Texto corregido:

Y, para cersiorarnos de que el SVG está correcto, podemos usar el Validador.


Conclusión:
El trabajo con gráficos vectoriales no es tan complicado como parece. Sólo requiere de tiempo y paciencia, y con un poco de práctica lo puede hacer cualquiera, tanto si es Diseñador no, se pueden ser maravillas con SVG.

Después lo voy a intentar con Photoshop y explicaré los pasos a seguir. Probablemente sea lo mismo, pero hay una diferencia:
En Photoshop hay Imágenes de mapas de bits.En Illustrator en cambio hay Trazados con relleno.Hay que distinguir bien ambos paradigmas a la hora de trabajar con gráficos. Seguramente los que han trabajado con gráficos y/o estudian Diseño (Hikari Hoshi por ejemplo) lo saben muy bien.

Eso es todo. Nos vemos en la próxima entrada, que espero sea pronto -__-
--
Tutorial © Davod. Derechos reservados.
Amala © Tsory. Derechos reservados.

Se permite la Copia y Redistribución de este documento, así como también hacer Obras derivadas y Usos comerciales, siempre y cuando:

1. Se incluyan intactas todas las Notas de Copyright.
2. Se garantice futuras Ediciones mediante el código fuente, en un
   Formato electrónico Estandar Abierto.
3. Se incluya una Copia de la GFDL y sea distribuido bajo la misma Licencia.