lunes, 23 de junio de 2008

Diseñando un comic en Fireworks

Las historietas y tiras cómicas que todos conocemos hasta el día de hoy requieren de la habilidad de un buen dibujante, cuyos bocetos a lápiz sobre papel "arman" una trama, una historia gráfica acompañada de un relato coherente, entre otros conceptos que no voy a detallar más.Con la aparición de los programas de diseño gráfico es común que muchos historietistas opten por colorear sus historietas con el Adobe Photoshop. Manuales y tutoriales al respecto hay de sobra en la red. Es cierto que Photoshop es el editor gráfico estándar en la actualidad, pero existen otras alternativas como el Corel Photo Paint o el Paint Shop Pro, que ofrecen similares resultados.Todo depende también el tipo de resolución gráfica que tendrá tu "arte final". Si es en papel no hay duda que Photoshop es la primera opción , pero si lo tuyo es el mundo online entonces puedes mirar hacia otros editores gráficos, cuyo soporte grafico es la web.He aquí el motivo de este post, porque como es sabido, Adode Fireworks (antes Macromedia) es el "corel draw" de la web, pues posee herramientas muy útiles para la creación de ilustraciones vectoriales, además de un excelente retocador de imágenes, herramientas suficientes para diagramar un cómic a partir de un boceto original en lápiz, o lo que es más desafiante aún: "partir de cero", es decir, elaborar una historia gráfica en base a ilustraciones creadas desde Fireworks.Es un trabajo artesanal arduo y requiere de extrema paciencia y dedicación, pero a la vez gratificante cuando ves tu "arte final" en el correo de un amigo o un familiar que luego te pregunta ¿y cómo lo hiciste, eh?. Elaborar un comic en Fireworks implica también un saludable examen a tus conocimientos sobre este editor gráfico web, ya que pondrás en práctica todo (y más) de lo que aprendiste en clase.Cuando pensé en este post pensaba en enumerar algunos tips o consejos y acompañar un pequeño "boceto" electrónico, pero luego no se me ocurrió mejor idea que describir aquello mediante una historieta, de modo que sea un ejemplo doblemente ilustrativo.Lo que se trata es de crear tus propios cómics con tus propios diseños y no copiar meramente estilos ajenos.


Figuras de agua

Hace poco ví un portal de diseño muy interesante el que se destacaban algunos tutoriales dedicados a Fireworks, pero había un post llamado Fireworks Aqua, que me llamó mucho la atención. Se trataba de la realización de figuras de agua, tales como Bola de agua, Estrella de agua, entre otras.Siguiendo los pasos del tutorial fue sencillo dar con los modelos y fue una buena iniciativa para hacer con otras figuras. Si bien es cierto que tal efecto puede lograrse con la opción Bevel Boss del filtro Eye Candy LE y Eye Candy 4000, también es verdad que el creador de ese simpático tutorial lo ha hecho muy bien porque con este ejercicio uno mismo puede darle la forma y el efecto usando trazados sencillos, ajustando sus nodos y el modo de opacidad de las capas. Bueno, todavía no hice el tutorial respectivo, pero miren el enlace y comparen con el que hice. ¿Qué tal?








Uso de filtros en Fireworks

Cuando nos encontramos frente a un proyecto de trabajo, muchas veces requerimos un "toque adicional" para hacer que nuestro arte final tenga la mejor presentación y cause el impacto visual que queremos. Normalmente la elaboración de un diseño complejo demanda una serie de capas y máscaras e igualmente una gama de de colores y degradados para acabar el trabajo, pero si éste requiere una textura especial o algún algún efecto visual específico, que por ejemplo, un trazado rectangular tenga la apariencia de una pared de ladrillos, es entonces que recurrimos a los filtros.Fireworks hasta su versión última no ha variado respecto al Menú Filtros y a los Efectos del Inspector de Propiedades.Con la compra de Macromedia por Adobe seguramente muchos pensaron que integraría algunos de sus filtros de Photoshop a Fireworks, pero el chasco fue grande, ya que ofrece lo mismo de siempre.




USANDO LOS FILTROS
El uso de filtros mejora el aspecto de los diseños. Tanto Fireworks, Photoshop u otros programas incorporan filtros para lograr ciertos efectos. Lo importante es saber utilizarlos y no saturar el trabajo con demasiados, porque se hará pesado o perderá algún tipo de armonía, unidad o integridad en su composición. Por ejemplo, si se va a usar un filtro de textura para un fondo de una pared y elegimos "ladrillo", lo recomendable será emplear el mismo filtro en los otros planos del dibujo como "grieta" o "piedra" a fin de que haya cierta armonía, a menos que nuestra intención sea eso, romper con la unidad y tengamos entre manos un collage o algo parecido.
Fireworks incorpora sus clásicos filtros Eye Candy LE y Alien Skin, productos de los cuales existen otros muy buenos familiares como el Eye Candy 4000, el cual ofrece una gama de efectos interesantes como el Drip, el cual saca de apuros a cualquier diseñador. Ver ejemplo.




Si navegamos por la red hallaremos una variedad impresionante de filtros gratuitos y de pago, compatibles con Corel Photo Paint, Illustrator, Jasc Paint Shop Pro y sobre todo con Adobe Photoshop, el abuelo de todos ellos. Muchos de estos filtros funcionan muy bien con Fireworks y solucionan prácticamente cualquier necesidad que un diseñador afronte a la hora de abordar un proyecto.


TIPOS DE FILTROS
Los filtros más conocidos y usados en la web son los gratuitos, aquellas versiones "freeware" que podemos bajar de diversos portales de diseño, de bloggers y de los mismos desarrolladores de estos softwares, tales como Cybia, Alien Skin, The PluginSite, The Plugin World que ofrecen a los navegantes, versiones demo, triales, sharewares de sus productos, con la finalidad de animarlos a comprar sus productos de pago. Lo ideal sería tener todos aquellos y más, pero hay quienes sostienen que no vale la pena pagar por un filtro o plugin de esos. Bueno, no conozco a nadie que desdeñaría algún producto si pudiera pagarlo, en todo caso, el hecho de no tener esa posibilidad adquisitiva no significa que debamos pensar que quienes lo hacen cometen un error, eso suena a envidia.Claro que si eres un inconformista nato, un rebelde por naturaleza, puedes hacer realidad tus sueños gracias a los robin hood de los softawre que pululan en la avenida Wilson, de Lima, los cuales te venden por 3 soles (menos de un dólar) un CD con 10 0 15 filtros muy buenos, que sabe Dios como lo habrán conseguido, porque directamente de la web es casi imposible hallar versiones triales de Dreamsuite Gel o Plugin Galaxy, ya que sus desarrolladores solo configuran versiones demo que no sirven para nada, valga la verdad. Una vez que los tienes verás tu panel de filtros mucho más poderoso y no envidiarás nada al Photoshop.

En este año adquirí uno de ellos por curiosidad y creo haberme sacado el premio gordo con un plugin llamado Impressionist Accessories, que supera largamente las opciones de textura de Photoshop, por la cantidad de filtros que la resuelven solventemente. Una muestra para ilustrar al respecto:



Pero si de transgredir se trata no hay espacio más autónomo que la red, en la que podemos buscar con la certeza casi absoluta de hallar el crack o el serial del filtro soñado.
De hecho hay portales como
que te ofrecen de manera gratuita los seriales y crack de muchos programas de diseño. Algunos funcionan, otros no, pero también existen sitios que pretenden lucrar con esa "necesidad" y prometen el paraíso cambio de uno dólares. No estoy en contra de su negocio, pero me parece un contrasentido querer lucrar con algo que de por sí es ilícito (aunque necesario a veces).
La idea de democratizar los softwares a la mala es una corriente si no ampliamente fundamentada o defendida, sí difundida en la práctica entre quienes consideran que es un abuso pagar 200 dólares por un software que en el mercado informal puede costarnos no más de 5 dólares.
Finalmente, el uso de filtros no debe pretender suplir la capacidad de realizar un diseño, porque muchos de sus efectos visuales creados pueden hacerse manualmente. Los filtros ahorran tiempo sobre todo, a la hora de buscar texturas, degradados, efectos cinéticos, etc, pero lo importante es saber cuándo y cómo utilizarlos.





jueves, 19 de junio de 2008

Crear un mandala


Crear un lienzo de aproximadamente 400 x 400 pixeles con o sin fondo, no es relevante.
Luego crea una capa con un circulo de aproximadamente 350 x 350 pixeles, rellénalo de blanco y ponle un borde negro de 1. Céntralo horizontal y verticalmente. A esta capa le llamarás SOLIDO.
-Repite los mismos pasos en una capa distinta con un círculo de 330 x 330 pixeles. A esta capa le llamarás VIOLETA.
-Repite los mismos en una capa distinta con un círculo de 298x298 pixeles. A esta capa le llamarás CIELO.
-Repite los mismos en una capa distinta con un círculo de 276x276 pixeles. A esta capa le llamarás ROSA.
-Repite los mismos en una capa distinta con un círculo de 159x159 pixeles. A esta capa le llamarás LIMON.
-Repite los mismos en una capa distinta con un círculo de 223x223 pixeles. A esta capa le llamarás VERDE.
-Repite los mismos en una capa distinta con un círculo de 131x131 pixeles. A esta capa le llamarás CELESTE.
-Deben quedarte los círculos alineados al centro uno sobre el otro, así:



Luego rellenas cada círculo cada círculo como en en el ejemplo. Si conoces bien el Fireworks podrás ubicar en la paleta de colores con solo ver el ejemplo, si no, puedes obtener en la web algún capturador de color como el Color Cap, muy útil para estos ejercicios. Debe verse así:



Despúes a cada círculo vas a darle textura. Las texturas se visualizan mejor cuando hay color, nunca sin relleno o en blanco, y mucho mejor en degradados, así que si no los ves al inicio no te preocupues, porque a medida que vas usando los degradados vas a notar la texturas.Así que te ubicas nuevamente en el inspector de propiedades y eliges la textura que desees. Yo elegí "malla". Debe quedarte así.
A continuación vas al inspector de propiedades y a cada círculo vas a darle un borde fundido, valor de 5 a cada uno, excepto al circulo de la capa CELESTE al que le darás un valor de 10. Te va quedar así:





A la capa SOLIDO se mantiene con el mismo color (#FF68D0) como en la figura




A la capa VIOLETA le aplicas un degradado radial usando los valores #ff8020 y #8058FF como en la figura



A la capa CIELO le aplicas un degradado radial usando los colores #30CCFF y #9898FF como en la figura



A la capa ROSA le aplicas un degradado radial usando los colores #FF88A0, #FFC460 y #88B8FF como en la figura




A la capa LIMON le aplicas un degradado radial usando los colores #FFFF00 y #A8D400 como en la figura




A la capa VERDE le aplicas un degradado radial usando los colores #90D050 y #FFCC00 como en la figura



A la capa CELESTE le aplicas un degradado radial usando los colores #FFFFFF y #A0ECF0 como en la figura



Debe quedarte así:



Ahora vas a crear otra capa a la que llamaremos MANOS. Consigue una foto, imagen, recorte o silueta de manos que se adapten para el diseño, como el de la figura mostrada, de modo que puedas "calcarla" usando la herramienta pluma de la barra de herramientas. Así tendrás tu propia silueta a la que podrás rellenar a tu antojo y usar todos los efectos posibles. Para efectos didácticos a las manos no le hemos dado todavía el relleno, tan solo los bordes (#000000) para que puedas visualizarlo junto con los círculos. No deben ser más de 4 trazados que deberás luego agrupar usando Ctrl+G. Debe verse así:



A cada mano le vas a dar el color respectivo. Las que aparecen en primer plano (1 y 2)son las que llevarán degradado y las que aparecen detrás (3 y 4) solo un color sólido. A las primeras le aplicarás un degradado lineal usando valores de #E88438 y #FF9C68 como en la figura mostrada. A las manos que aparecen detrás solamente llevarán un color sólido: #ff9868, como en la figura mostrada.




Luego vas a Propiedades y agregas textura, la misma que usamos para las capas con los círculos (malla) y le das un borde "fundido" con valor de 1.



Deben verse así rellenadas al final.





Ahora vas a crear las sombras y el fundido, pero antes debes haberle quitado los bordes a las manos y seleccionas la de relleno degradado; te ubicas en Propiedades, vas a "Efectos" y seleccionas "Sombra". Vas a darle los valores que aparecen en la figura. Debe quedar así.


Seleccionas las manos de color sólido. Vas a Efectos y selecionamos "Iluminado", como en la figura mostrada.



Debe quedar así:



Solo faltaría dibujar el símbolo del ying y del yang, pero antes debemos "corregir" un detalle que si no lo notaste es sobre las manos, las muñecas se ven demasiado pronunciadas y lo que queremos es que "desaparezcan" dentro de uno de los círculos. Hay varias formas de realizarlo. Lo más fácil sería usando las máscaras, pero al ser varios círculos supepuestos no lograríamos que se vieran adelante las manos. Hay dos formas para lograr ese efecto: Una es creando copias de los círculos de las capas VIOLETA Y CIELO. Creas una copia (Ctrl+C y Ctrl+V) de cada una y seleccionas ambas. Luego vas a la ventana "Modificar", opción "Combinar trazados". Elige "Perforar". Va quedar como una especie de anillo grande y lo vas a ubicar delante de la capa MANOS, de modo que va a "tapar" ese borde blanco de las muñecas, así:







Debe quedarte así:



La otra opción es modificando el relleno degradado de las manos. Solo tienes que cambiar el color naranja más bajo por los siguientes valores: #98C0FF y #B07CFF y ajustarlos de acuerdo al color de las capas de los círculos inferiores, de modo que parezcan fundirse con sus rellenos, como en la figura.








Finalmente creas una capa más, a la que llamarás SIMBOLO, para dibujar el símbolo oriental. Al igual que las manos debes tomar como modelo una imagen para que puedas calcarla encima empleando la herramienta pluma o partiendo primero de un círculo y luego ajustando sus nodos. Agrupando las dos partes (ying y yang) debe formar un círculo alrededor de los 90 pixeles de diametro. Es sencillo. Agrúpalas (Ctrl+G). Debe quedarte así:



Ahora vas a darle un toque holístico. Cuando laboraba en holística me pidieron que parezca una bola de cristal, así que debí modificarle el color característico (negro) del símbolo oriental por uno más femenino (bueno, trabajaba con unas féminas). Elegí un azul (#0000FF) y luego le puse el mismo nivel (50) de textura ("malla") de los otros diseños (círculos y manos). Al blanco solo le agregé la misma textura y nivel.

Quedó así:

Falta darle volumen. Vas a Propiedades, a "Efectos", en Eye Candy 4000 LE, opción Bevel Boss, y ajustas de acuerdo a las figuras mostradas.






Repite los mismos pasos con el trazado azul y obtendrás esto:



Ahora tienes que aplicarle un relleno degradado lineal a la parte blanca, al que vas a agregarle el color #88A0FF y ajustarlo de acuerdo a la figura.



Debe quedarte así:



Por último, solo debes subir la capa CELESTE delante de la capa MANOS, de modo que parezca que las están sosteniendo.



Ya está el diseño y puedes agregar letras al contorno de los círculos o del símbolo. Es sencillo




O cambiar el símbolo por otro: