¡Oh, mi diosa! ¡En colores!

Publicado el 11. Feb, 2009 por Camelot en Tutoriales

Hace poco alguien me preguntó sobre la edición del capítulo 74 del manga. Había descargado este capítulo y se sorprendió gratamente que estuviera a colores. No sabía si nosotros habíamos coloreado este capítulo y se preguntaba que en tal caso si lo volveríamos a hacer.

Mi respuesta fue simple: lamentablemente nosotros no lo hicimos. El capítulo estaba coloreado porque formaba parte de un libro especial llamado adecuadamente: Ah! My Goddess Colour, que sería algo así como ¡Oh mi diosa en colores!, un libro especial donde, además de una graciosa descripción de la serie presentada nada menos que por los maestros ninjas que aparecen en el volumen 8, tiene como principal atractivo cuatro capítulos en colores del manga; cada uno dedicado a una de las diosas más frecuentes en la historia: Belldandy, Urd y Skuld, más un cuarto donde aparece Peorth.
Photobucket
A pesar de que nosotros no coloreamos capítulos, la técnica para hacerlo existe, pero colorear extendería tanto el tiempo de edición que prácticamente paralizaría el proyecto. Me parece más adecuado a las actuales circunstancias colorear algunas páginas, principalmente los covers o carátulas de cada capítulo, o algún otro diseño especialmente atractivo. Y esta tarea no estaría amarrada a la publicación de los capítulos, sería como un trabajo adicional que se iría publicando ocasionalmente. Colorear no es difícil, técnicamente hablando, pero si queremos que se haga un trabajo de calidad no podría realizarse masivamente.

Hablando estrictamente de las técnicas de coloreado, he visto muchos estilos, el más popular quizás sea el coloreado usando degradados, de manera que se asemejan al dibujado en lapiz. Sin embargo, personalmente no es de mi preferencia, a mí me gusta más el coloreado estilo “anime”, es decir, aquél que implica convertir un dibujo de manga en otro que parezca salido de un capítulo animado de la serie.

Herramientas de Photoshop

Photobucket La parte más complicada y la verdadera clave del proceso de coloreado es realizar una correcta sustitución de las áreas de color blanco por otras con los colores que queremos añadirle a la imagen.

Photoshop tiene herramientas a propósito para esta tarea. Las que más usaremos serán la Varita Mágica [1] y el Bote de Pintura [2]. En la imagen de la izquierda podemos verlas, bien representadas por sus repectivos íconos en la barra de herramientas. De las herramientas, Cuentagotas [3] y el Selector de Color [4] nos ocuparemos más adelante.

La Varita Mágina permite seleccionar secciones que tienen un mismo tono de color, con un margen de precisión bastante aceptable. Aunque se puede calibrar para mejorar su precisión, por ahora nos conformaremos con la configuración que viene predeterminada porque es suficiente para nuestros propósitos. Por supuesto que Photoshop tiene otras herramientas de selección igualmente útiles como el Lazo (está justo arriba de la Varita), esta herramienta selecciona figuras cuyos vértices nosotros señalaremos con clicks individuales sucesivos. La figura se cierra cuando hacemos doble click o cuando hacemos clicke en el primer punto de la secuencia.

El Bote de pintura permite que rellenemos selecciones con un mismo tono de color. Dicho esto podría parecer que todo el procedimiento consiste en seleccionar zonas del dibujo con la varita mágica (y las otras técnicas de selección) y agregarles el color correspondiente con el bote de pintura. ¡Ojalá pudiera ser así de fácil!

Lamentablemente, como estas herramientas no son perfectas tienen un margen de error que se hace notorio a medida que sumamos sus pequeñas imprecisiones. Por ejemplo, la varita mágica llega a seleccionar, además de la zona blanca que queremos pintar, zonas del trazo de dibujo que son grises, de manera que cuando rellenamos esta selección se deteriora el trazo haciendo que los imagen (perfil) de la figura pierda definición, como puede verse en la figura de abajo.Photobucket

Protección de las líneas o el trazo del dibujo original

Para evitar el deterioro de la imagen durante el coloreado recurrimos al sistema de fusión de capas de Photoshop. Creamos una copia de nuestra capa original de dibujo (Seleccionamos la capa y usamos el atajo de teclado CTR+J). Luego, a la capa superior (la copia) le ponemos en modo de fusión de Multiplicar. En este modo de fusión los colores blancos se vuelven transparentes y los colores negros se acentúan.

Photobucket Algo muy conveniente para lo que queremos. De manera que esta capa adicional en modo multiplicar acentuará las líneas de dibujo negras que se deterioran durante el relleno. Al mismo tiempo el color blanco de esta capa se vuelve transparente y no se mezcla con el color que aplicaremos a la capa inferior. Como puede verse en la imagen de la derecha, a menudo junto con el modo de fusión de capas también es necesario modificar el nivel de Opacidad, en este caso lo hemos modificado a un 66% porque en el nivel predeterminado de 100% el resultado era demasiado oscuro. Podemos jugar con la opacidad hasta quedar satisfechos con el resultado final.

Con un poco de práctica y gran sensibilidad para la creación artística podemos ir añadiendo color de manera que nuestra imagen a blanco y negro vaya tomando color de manera armoniosa..

Sistema de Colores en Photoshop

PhotobucketUna cuestión que no quisiera dejar pasar, aunque los que ya tienen experiencia con Photoshop probablemente ya saben, es que durante el coloreado es importante definir desde el principio los colores que vamos a emplear. Para ello lo mejor es conseguir algunas capturas de los videos de anime, para extraer de allí los colores, especialmente los que tiene que ver con la piel y el cabello, tan pecualiares especialmente en Belldandy. Las imágenes capturadas las abrimos luego en el propio Photoshop y desde allí iremos capturando los colores con la herramienta de Cuentagotas [3] que esta aproximadamente al medio de la barra de herramientas que describimos arriba. Simplemente seleccionamos el ícono correspondiente y con el puntero del cursor convertido en un pequeño cuentagotas haremos click en el color que queremos capturar. Si lo hacemos bien veremos que en la zona de configuración de color frontal [4], el cuadro superior toma el color que acabamos de seleccionar. Entonces sólo nos queda pasar a la herramienta de Bote de pintura para aplicarlo donde lo necesitemos. Cada vez que necesitemos cambiar de color deberemos realizar este procedimiento.

Una manera de abreviar este procedimiento es aprovechar que el Selector de color de Photoshop tiene la capacidad de identificar los colores a partir de su código hexadecimal. Este código se puede ver en la parte inferior central de la ventana de la herramienta. El código hexadecima es una serie de 6 dígitos (letras y números) precedidos del símbolo “#”. Como Photoshop ya trae fijo este símbolo sólo nos preocuparemos de los 6 dígitos.

Es bueno que nos acostumbremos a usar el código hexadecimal porque nos ahorrará mucho tiempo el poder cambiar de colores con un simple copy/paste. Como podemos ver en la imagen, el color de la ropa de Belldandy tiene un código #f5c035, cada vez que necesitaba usarlo no tenía que realizar todo el proceso de seleccionar con el cuentagotas o peor ir tanteando cual era el tono. Bastaba copiar los 6 dígitos del código en la caja correspondiente del selector de color y listo.

Para un acabado de calidad: Las sombras y el manejo de la luz (brillo).

PhotobucketAplicados los colores y preservados los trazos del dibujo sólo nos queda darle algunos toques finales: los brillos y las sombras. Nótese, por ejemplo, en la imagen de la izquierda como añadimos un pequeño triángulo debajo del ojo para marcar el brillo natural del pómulo. Lo mismo aplicamos un pequeño triángulo a manera de sombra del labio inferior, la sombra en la punta de la nariz o en las comisuras de la boca. El brillo y la sombra de de la ropa también requiere de cierto arte para que sean coherentes con el foco de la luz que supuestamente ilumina todo el conjunto. Algo difícil de explicar en este momento pero que explicaremos en artículos posteriores.

Todos estos detalles buscan darle naturalidad al dibujo, de manera que parezca realmente una composición de 3 dimensiones, sin caer en un diseño acartonado o “demasiado perfecto” que lo haga parecer artificioso. Situación en la que a veces caen los coloreados basados en vectorización. Si usamos nuestra creatividad y sensibilidad artística en su justa medida el resultado puede llegar a sorprendernos.

PhotobucketPhotobucketPhotobucket

Espero que se animen a probarlo. Hasta la próxima…

Etiquetas: , ,

17 Comentarios

#1

--Zero--

11. Feb, 2009

se t agradece q t hayas tomado tu tiempo haciendo este tutorial, la verdad q esta bastante bueno, yo por mi cuenta lo ando probando, mas tarde posiblemente lo deje en el Fc para ver q dices, solo q lo q me di cuenta q esto es bastante parecido al vectorizado(solo q t omites lo peor es el trazo d las lineas) incluso por medio d capas como lo mostraste en el tuto, con la pen tool podes “contornear” areas y luego rellenarlas…esa seria otra forma q fucionaria por ejemplo en el cabello de belldandy…. bno muchas gracias por el tuto, se q a muchos les sera util…

salu2….

#2

sami_sonic

11. Feb, 2009

Lo he dicho y lo sostengo, ¡cuando sea grande quiero ser como tu! XDD

Yo recien hice mi primer coloreado con una tecnica que me enseñó Leu y es similar a esta. Aunque aquella no abarca los acabados que le hiciste tu y que mencionas al final.

#3

Admin

11. Feb, 2009

@Zero,
La herramienta “pen tool” la considero de un nivel intermedio, he tratado de mantener el tutorial lo más básico posible. En futuros artículos sobre otros coloreados me extenderé en otras herramientas de Photoshop. Incluso de artículos dedicados exclusivamente a este fantástico programa de edición.

@sami
Los acabados a mi modo de ver son “la piedra de toque” de un buen coloreado. No he encontrado referencias sobre este punto a pesar de que he buscado. Trataré de extenderme en futuros artículos sobre el tema.

Muchas gracias a ambos por sus comentarios.

#4

Rick4hunter

12. Feb, 2009

Increíble como explicas las cosas sensei, a ver si a punta de tutoriales algo aprendo de Photoshop que no me va.

De todas formas como anuncias futuras articulos donde te explayaras en este tema voy a esperarlos con impaciencia. Especialmente uno donde expliques las herramientas de photoshop sería util o que otros programas usas para esto del manga y el coloreado.

Sos grosso, maestro!

#5

celestine-mithos

12. Feb, 2009

Exelente tuto, lo dije en el Fc y lo digo aki, aunque tambien sostengo que mi unica herramienta de marcado es el lazo poligonal, es con la que me llevo mejor, las demas son medio dificiles asique las paso.
mayoritariamente las uso para cosas como los renders y los las restauraciones, que cabe aclarar que yo empese con eso de restauraciones gracias a ver un trabajo de Camelot que me avia parecido tan fantastico (aunque no era grande la zona el trabajo me parecio increible a tal punto que no savia que se podia hacer) que desidi imitarlo XD en realidad la mayoria de las cosas que ago y que me llevo mejor son cosas en las que veo a nuestro compañero Camelot participar (las pruevas son los coloreos y las restauraciones)
pero Bweee… espero que el compañero no se enoje por andar siguiendo en lo que puedo sus pasos >.O

exelente todo y puesss… con lo de mi estilo de coloreo no es tan bueno como el tuyo pero como me extendi ya mucho esta ves paso y no digo nada >.O

Nos vemos

#6

Admin

12. Feb, 2009

Caray, son muy generosos sus comentarios. Por lo demás, celestine, me acabas de dar la idea para un futuro tutorial: Restauraciones; algo que realizamos con frecuencia dentro del fansub y con las cuales me acostumbre a usar la herramienta Pluma, entre muchas otras que ofrece Photoshop.

Bueno, material hay para seguir tratando el tema… muchas gracias a ambos.

#7

Juan Victor

12. Feb, 2009

Me lo llevo… jajaja.
Yo también me anoto para futuros entradas sobre este tema, espero que saques pronto otros trabajos de coloreados que se ve que tienes talento para esto.

Chaito

#8

Sasu_Tsukune

21. Feb, 2009

Excelente tutorial, siempre me pregunte como era que colororiaban las imágenes de los mangas ya que nunca había buscado información sobre ello, pero ahora que llegue aquí pues me puse a intentarlo, como principiante que aun soy en el coloreo se me es laborioso pero me ando diviertiendo haciendolo, claro más ando usando la pen tool para el contorneado un poco más que la varita magica que en algunos lugares de la imagen no le va bien xD.

Te agradesco Camelot por el tuto y pues tienes bastante talento para ello compa y bueno andare atento a más entradas de de este tema que esta bastante bueno.

Saludos

#9

Admin

21. Feb, 2009

Me alegra mucho que te agradara el tutorial, la verdad es que es bastante básico. El pen tool (la pluma) no la menciono mucho precisamente por esa razón.
De la pluma hablaré y mucho cuando empiece los tutoriales sobre la edición de manga. Esta herramienta es valiosísima cuando nos vemos en la necesidad de reconstruir secciones enteras de una imagen, especialmente con bordes curvados.
Manténgase atentos que habrán novedades muy pronto.

#10

Rick4hunter

23. Feb, 2009

En realidad, mirandolo con más calma tu coloreado de verdad se parece bastante a un dibujo de anime, hasta uno puede preguntarse de que capitulo lo sacaron. Por cierto ¿de donde consigues tus imagenes para colorear?

#11

fedex3344

24. Feb, 2009

Bastante bueno el tutorial, muy practico e interesante, se agradece q te hayas tomado el tiempo para armarlo

#12

SG7

24. Feb, 2009

Wenas, wenas.
Primer comentario, y lo hago aquípor una razón especial: cuando comencé con el PS, este dibujo coloreado de Camelot fue lo primero que analicé con calma y que implementé luego. A partir de sus explicaciones me fui creando una serie de “mañas” para el coloreo de imágenes mediante el uso de selecciones. Dejo algunas para el que le interese:
* Si las líneas son bien definidas y cerradas, se puede usar la Varita, con la salvedad de que a la selección habrá que Expandirla, 1, 2 o 3 pixeles de acuerdo al grosor medio de las líneas (Selección /Modificar selección /Expandir…).
* También puede combinarse con Desvanecer selección, que hace que los bordes se difuminen (Selección /Modificar /Desvaecer…; o CTRL+ALT+D). Entonces se puede Expandior la selección 2 px y Desvanecer 1, 3-2, o las combinaciones que veamos necesarias. El Desvanecer ayuda cuando a la capa de los contornos la ponemos con opacidad por debajo del 70%.
* Para el Selector de Color también se puede usar el Cuenta Gotas que aparece al desplazarel cursor fuera de la ventana del Selectos. Obviamente, necesitas estar con una imagen donde esté el color que quieras copiar en la ventana activa.
* En mi caso, para colorear uso la función Rellenar, que tiene la ventaja de no cambiar de herramienta al colorear(botón secundario sobre la selección /Rellenar…, para esto tiene que estar seleccionado o el Lazo o la Selección Rectangular, no sepuede con la Varita; o Edición /Rellenar).
* Para lo que es sombras o luces, suelo usar el mismo color base en distintos modos de fusión y opacidad: para sombras, por lo general en Multiplicar al 50%; para luces, en Luz Suave al 70%. Eso me ahorra trabajo de elegir colores XP.
Sobre el acabado final: es todo un arte, sobre todo porque la piel no tiene el mismo acabado que una prenda de algodón o una campera de cuero, o un pedazo de metal. Yo en eso todavía tengo materia pendiente.
Trataré de pasarme más seguido por el blog, hoy quería pensar en otra cosa que no sea el estudio (y se me fue la mano con el largor o longanismo del comentario).
Saludos a todos.

#13

Camelot

24. Feb, 2009

Excelentes aportes GranSiete (¿”SG7″ es Súper Gran Siete?), los tomaré en cuenta aunque de verdad que algunos no los uso así que han llamado la atención.
Y no sabía que escrutabas así mis trabajos lol, es fue estresante…
Saludos.

#14

SG7

24. Feb, 2009

¿Estresante? XP
Tampoco es que los escruto a todos XP, cuando lo posteaste en McA a este trabajo, andaba viendo cómo pintar algunos de mis dibujos por CG, y como lo habías explicado aquella vez, pues tomé eso como base para comenzar a probar en el PS.
Saludos a todos.

P/D: SG7 por “Satrapa Gran Siete”, he usado esa firma para mis dibujos del último año y medio, y parece que la voy a adoptar para todo XP.

#15

Farsalia

25. Feb, 2009

Un tuto fantástico, se ve que tienes talento, he visto muchos coloreados antes pero este es el primero que realmente me gusta mucho.

Gracias por compartirlo

#16

ChangManSion

09. Mar, 2009

Gracias por el tutorial. Quizá lo vaya a utilizar para saber como hacerlo o practicar porque es bueno el resultado.
Nos leemos!!!

#17

jurta

15. Sep, 2009

yo ya sabia eso porque manejo photoshop mi problema e presisamente las sombras, y las iluminaciones ademas de tomas el color de piel que es el mas complicado aveces por ser que aveces queda o muy rosado o un color que no corresponde pero la verdad no habiapensado en hacer eso de sacar la imagen jajajaja para que vea

se te agradece

Tus comentarios le dan valor al tema, participa y da a conocer tu opinión. No olvides mantener siempre un lenguaje alturado y respetuoso de las opiniones diferentes.

Si es tu primer mensaje en el sitio necesariamente requerirá aprobación del moderador, para los siguientes mensajes ya no se requerirá este paso.

XHTML: Puedes usar estas etiquetas para añadir formato a tus comentarios: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>