Del Papel al Photoshop

15 December 2007

Portada
Actualización 02-04-2013:
Este tutorial intenta reproducir uno de mis métodos de trabajo de hace ya algunos años, con el tiempo he ido cambiando, descubriendo nuevas formas, nuevas técnicas, etc., lo importante -al fin y al cabo- es conocer nuestras herramientas y las técnicas para luego poder elegir que camino tomar.

Hace algunos días Julia formuló una pregunta relacionada con el escaneo de imágenes y también con la preparación / optimización de un dibujo escaneado para colorear en Photoshop, y si bien internet está plagado de tutoriales para esto mismo, he decidido hacer mi propia versión del asunto, incluyendo además del paso a paso una acción de Photoshop que automatiza parte del proceso (adjunto el archivo al final del tutorial).
La idea básica es terminar de limpiar un dibujo en blanco y negro después de escanearlo y separar el dibujo lineal en una capa, es decir, las línes negras sin el fondo blanco del papel, eso nos permitirá luego colorear sin necesidad de aplicar el "Modo Multiplicar" en la capa del dibujo e inclusive, cambiar el color de las líneas de manera bastante sencilla y sin afectar al color de fondo.
Lo ideal sería escanear el dibujo ya entintado y sin restos de lápiz ni suciedad, pero como bien sabemos, a veces el tiempo nos cae encima y necesitamos saltar pasos para llegar a un resultado "decente" ¡en menos de lo que canta un gallo!
Por eso elegí este boceto realizado con bolígrafo sobre un papel cualquiera y lleno de imperfecciones.
En el primer paso, vemos lo que obtuve luego de escanear (recomiendo ir cliqueando cada imágen para verla en su tamaño original):
Paso 1
En una situación "ideal", la redibujaría, entintaría prolijamente y luego sí la pasaría a la máquina, pero aquí vemos trazos desprolijos, líneas para borrar y algunos detalles a mejorar ...
Necesito eliminar esas líneas de mas y oscurecer el resto de las líneas, para eso abro la ventana con los Niveles (CTRL+L) y levanto los blancos hasta sobreexponer definitivamente los grises claros y bajo los negros hasta subexponer totalmente los grises oscuros, algo así ...
Paso 2
... es probable que eso no sea suficiente, si aún quedan cosas para limpiar habrá que hacerlo a mano, con la goma o mejor aún con las herramientas Dodge (Sobreexponer) y Burn (Subexponer), Dodge seteado en Highlights a un 25% suele funcionar muy bien para eliminar esa suciedad gris clarito y Burn seteado en Shadows a un 40% oscurece completamente los grises oscuros ¡hasta dejarlos negros!
Por si no saben dónde estan estas herramientas, aquí les muestro:
Dodge Tool - Sobreexponer
Una vez que hemos limpiado el dibujo, abrimos el Panel de Acciones (ALT+F9) y cargamos la acción que les adjunto, la seleccionamos y cliqueamos el botón PLAY, se abrirán dos mensajes que nos guiarán ...
Paso 3 - Separar líneas del fondo
... en la acción he creado dos opciones: una capa con las líneas resultantes de la vectorización (trazado) y otra con las líneas tal y como las habíamos dejado luego de la limpieza, cada uno/a decidirá cual prefiere utilizar.
Las líneas originales se conservan en un Canal Alpha y las vectorizadas en forma de Path (trazado).
Aquí les muestro los resultados, luego de aplicar la acción:
Paso 4
Por supuesto que de contar con algo de tiempo, podríamos corregir los trazos del Path, ajustando los nodos (inclusive podríamos hacer un Copy & Paste, pegando las líneas en Illustrator y retocándolas allí).
Bien, ahora que tenemos las líneas negras con fondo transparente podemos crear una nueva capa (SHIFT+CTRL+N) por debajo y comenzar a colorear. Algo así ...
Paso 5 - Colorear
Una de las ventajas de tener las líneas solas, es que podemos cambiarles el color de manera relativamente fácil ...
Paso 6 - Coloreando las líneas
... además de cambiar el color de las líneas, he agregado un tramado y luego apliqué una textura. Aquí está la ilustración final ...
Versión Final
Pueden bajar el archivo comprimido (.rar) con la acción desde aquí:
Dukal PS Vector LineArt.atn
pesa tan solo 2,24 Kb.
Actualmente trabajo con Photoshop CS3 Extended y no he probado si esta acción funciona con versiones anteriores (ver comentarios)
Actualización 13-02-2008: He modificado y actualizado la acción así que si habían bajado la versión anterior les recomiendo actualizarla.
Actualización 27-05-2008: Hoy Pablo me preguntaba acerca de la parte en que coloreo las líneas, ya limpias, así que paso a explicarlo.
No hay ni magia, ni acción de un solo click, sino "trabajo" ... puro seleccionar y cambiar el color con Hue/Saturation, línea por línea (mas abajo explico otra manera de hacerlo).
Veamos:
Coloreando líneas - Paso 1
Esa es la imagen de la capa con las líneas solas, ya separadas del fondo. Un solo color para todo el dibujo.
Coloreando líneas - Paso 2
Utilizando la herramienta "Lazo Poligonal" selecciono una línea o alguna sección que vaya a necesitar determinado color, en este caso el sombrero que quiero pintar de azul.
Coloreando líneas - Paso 3
Una vez hecha la selección abro los controles de "Hue/Saturation" (Image > Adjustements > Hue/Saturation) y muevo los sliders hasta dar con el color que buscaba. Le doy a Ok y ya tengo el primer fragmento de línea coloreada.
Coloreando líneas - Paso 4
Sigo haciendo lo mismo hasta tener todas las líneas del color que quiero.
En realidad, esta parte del proceso la hago luego de haber puesto todo el color básico, porque me resulta mucho mas cómodo encontrar el color adecuado para las líneas cuando debajo ya hay superficies coloreadas.
Otra manera de colorear las líneas podría ser creando una selección del dibujo lineal, sin color e ir pintando dentro de la misma con un pincel.
O, lo mismo, marcando la opción "Lock pixels" en el layer donde están las líneas.
Actualización 16-06-2008:
Jaier me preguntaba ¿Cómo he aplicado la textura? Y aquí no hay demasiados secretos, en esta ilustración lo hice de la manera mas sencilla que conozco que es poniendo la textura en una capa superior, por sobre el resto, y le aplico el Modo Multiply, Overlay o Soft Light, es decir pruebo con alguno de esos tres modos y también jugando con el grado de transparencia de la capa, no hay una regla fija así que es cuestión de jugar un poco modificando esos valores, y en caso de ser necesario tambien se puede ajustar un poco los niveles de la textura (los valores de luces y sombras).
El gran secreto está en encontrar la textura adecuada, y mantener el equilibrio entre la textura y la ilustración porque tampoco es cuestión de ocultar defectos o el contenido mismo con una textura.
Otra manera de texturizar sería utilizando una máscara de capa, pero eso ya lo he enseñado en otro tutorial.
Actualización 03-02-2009:
Para lograr el tramado de medios tonos utilicé el Filtro Color Halftone con éstos números:
Radius: 4 (esto es a gusto)
Channel 1: 15
Channel 2: 75
Channel 3: 90
Channel 4: 45
Actualización 27-03-2010:
Actualizados los links de descarga de la acción.

37 comments:

Gustavo Aimar said...

Genial Alex... justamente en estos días estoy haciendo un laburillo y lo voy a colorear de esta forma... Como no hay mucho tiempo, estoy pasando fibra negra directamente los bocetos, borro el lápiz y al escáner!! GRACIAS, super util... Lo subiste al Coso??

Reinaldo Dimon said...

Alex fantastic your work and this tutorial helped a lot
my english it´s terrible and my spanish more !!!
am a Fan !!

I am in the flickr also later passes there and take a look in the pictures

www.flickr.com/photos/reinolds

Saludos brasileños

costi-k said...

Gracias por compartir tanta sabiduria!
Para las personas poco amigas de las tecnología como yo, tu explicación es MAGISTRAL
salU
c

Rocío said...

Genial, nunca te acostarás sin aprender una cosa nueva! No tenía ni idea de la opción de "cargar acciones"... Gracias!!!! :)

Alex Dukal said...

Bueno, me alegra que les sea útil! Gracias!
Rocío: las acciones son una de las cosas más útiles que tiene Photoshop! DEBEN aprender a cargarlas y también a crear sus propias acciones, además de servir para crear efectos, sirven para ahorrar tiempo en tareas repetitivas.
Thanks Reinolds! I will!

buep said...

Muy bueno, Alex! Suelo trabajar de esta manera, sin el paso para vectorizar el diseño. Hasta ahora, siempre preferí dibujar con uno de los pinceles sobre las líneas originales del dibujo, así queda algo más imperfecto ;) Voy a probar esta técnica que tan bien explicaste.

Buen fin de semana!

pinol said...

Gracias Alex, este tuto se esperaba desde hace mucho, me gusta la ide de la textura en "moaré" (tipo reimpresión)

aunque a mi de un tiemo en adelante me gusta conservar las manchas y rayones.

un enorme saludo centroamericano

Alex Dukal said...

Como digo en el tuto, hay mil maneras de hacer esta clase de trabajos en PS. Personalmente también me gusta conservar las "asperezas" del original, pero depende del tipo de trabajo que vaya a hacer. Lo de los trazos vectorizados en el propio Photoshop no lo había utilizado hasta hacer este tutorial y me gustó. Todo esto es parte de una búsqueda: conseguir un proceso de coloreado rápido que no me lleve días, es decir, me gusta tomarme mi tiempo con cada trabajo, pero a veces es necesario que las cosas salgan ya! (y "ya" no debe significar mal! ¿cierto?).

pabloh said...

Además de ser utilísimo, está explicado para que cualquiera lo entienda. ¡No puedo decir más que gracias!

Francisco said...

Muy buen tutorial. No sabía que se podía vectorizar en Photoshop.
Pregunta: ¿cuál es la ventaja de escanear a 600dpi y después reducir? Yo suelo escanear directamente a 300.

saludos!

Alex Dukal said...

Pregunta: ¿cuál es la ventaja de escanear a 600dpi y después reducir?
---
Respuesta: No sé si tengo una respuesta convincente. Mi idea es que los arreglos que haga en 600dpi se verán mejor cuando baje a 300dpi., es como cuando hacés un original al doble del tamaño de publicación (se me vinieron a la mente historietas de Alberto Breccia, Altuna y Moebius).
¿Tendré manera de comprobarlo? Lo intentaré.

MrRK said...

simplemente te amo.(soy marko). me viene de pelos tu tutorial, ya que desconocía ciertas cositas.

los primeros días de enero andaré por allí, estará ud.?

zime said...

Muchisísimas gracias Alex!!! Sos un genio!!! Gracias por compartir tus conocimientos con nosotros, es super-útil!!
Felices Fiestas!!
(^v^)

La Carla María said...

Alex, gracias miles!!
No sabía lo de las acciones ni lo de vectorizar en photoshop y cuando recuerdes lo de por qué a 600 dpi dilo, dilo!
Salut

Carla

Evgeniy Ognarev said...

thanks for real intresting tutor. your illustrations is very impressive :) i will try somthing in my own illustrations.

Alex Dukal said...

Огнарев Евгений, Charlie, Zime, Marko: Thank you! Gracias! Спасибо!

Andrea said...

Que genial!!
Gracias!!!!

jaier said...

exelente tutorial.
justo por estos dias estoy haciendo un trabajo en mi universidad y me interesó mucho la textura que utilizaste para esa ilustracion. Me podrias explicar un poco mejor como aplicarla?

Gracias.

leon said...

muy genial!!
me ayudo mucho mucho!!
ahora podre trabajar mas rapido...
(antes tenia q dibujar a mano, scanear, y despues usar la pluma..pero gracias a esto se me aligera el trabajo)
muchas gracias

Nova said...

Muchas gracias Alex, eres muy amable y generoso al compartir algo que seguramente te costó tiempo y esfuerzo.
Quisiera preguntarte sobre retocar el trazado: un detalle no me gustó, ajusto los nodos y después cómo se completa el cambio para que el trazado negro cambie también?

Alex Dukal said...

Gracias nuevamente por los comentarios!
Pilaraña: No es tan complicado! Hay muchas maneras de hacerlo. Si querés que el trazado quede relleno con color, al elegir la herramienta "Pen Tool" tenés que activar la opción que te muestra el relleno ... umm, es algo complicado explicarlo por acá ... pero entiendo lo que decís. La cuestión es que yo no trabajo de esa manera, por eso mi tutorial apunta a crear el trazado automáticamente para luego convertirlo en selección y recién ahí rellenarlo con color.
Se podría hacer otra acción para que actúe de la manera que vos buscás ...

Oscar Grillo said...

Yo hago el scan en "bitmap" a 750 DPI. lo convierto a "grayscale", lo bajo a 300 DPI y de ahi lo paso a RGB y lo trabajo de manera similar a la tuya. Ester proceso te elimina un monton de suciedad del papel y a veces te quedan unas lineas deliciosas.

Alex Dukal said...

¡Gracias por el aporte Oscar!
Saludos

DarkAngel25xD said...

me gustaria q subieras la accion otra vez xq en mediafire lo eliminaron... Gracias espero tu pronta respuesta

Anonymous said...

Hola Alex soy un seguidor de tus ilustraciones me encantan, estoy estudiando Diseño Gráfico, y pues estoy en busca de mi estilo de ilustrar digitalmente, tus tutoriales me han ayudado muchisimo, solo te queria hacer una pregunta en este tutorial, cuando aplicas la accion de vectorizar el boceto, como haces para que el trazo o vector te quede con ese estilo como de lapiz, esque tengo quisiera encontrar o saber si se puede vectorizar y darle un toque mas artistico al vector asi como el trazo a lapiz, por el momento solo he dejado el trazo original a lapiz pero en el escaneo no se ve muy bien, ojala me entendas y me podas ayudar o guiar para conseguir un mejor resultando,
saludos,
Miguel Polanco.

mts! said...

Excelente tutorial!.. podrias actualizar el link a la acción que aparentemente está caido? o compartir el nombre de la acción para buscarla?

Gracias!

Alex Dukal said...

Ahí les actualicé los links para descargar la acción. En mi website siempre hay una sección de Recursos con todos los archivos que subo. ;-)
Abrazos

miuc said...
This comment has been removed by the author.
Anonymous said...

Soy una bestia por preguntar esto, pero bueno, tus tutoriales son bestiales asi que me animo... este... Como se colorea la imagen despues de vectorizarla?

Te explico: mi técnica de coloreado digital es de las mas primitivas -dibujo con rotring, escaneo, hago un par de capas con la linea de dibujo sobre fondo transparente, dejo la capa superior intacta y coloreo la que esta abajo con el Paint bucket (es un poco embolante andar cerrando bien todas las areas a colorear, pero bueno). Hace poco me pidieron que les mande uno de mis dibujos vectorizado. Empecé a explorar el tema, me bajé tu paquete de acciones, lo puse en marcha, me quedó bastante bien (!!) y cuando lo quise colorear, me di cuenta que no tengo la menor idea de como se hace!

Vale también que me contestes que esto es algo que requiere un curso de 3 meses, así sé a lo que me enfrento.

Y una vez mas, gracias por tu generosidad par compartir conocimientos -y por tu habilidad pedagógica! Hasta un orangután informático como yo pudo experimentar tus consejos!

Alex Dukal said...

Julia, como seguramente intuirás, esa pregunta no tiene una sola respuesta. Hay muchas maneras de pintar con la máquina, y depende un poco del estilo que uno busque, de la paciencia o necesidad que uno tenga, porque ya sabemos que a veces las papas queman y hay que sacar el trabajo "para ayer".
MI manera de pintar no tiene demasiadas complicaciones:

1. Escaneo el lápiz o tinta
2. Limpio el escaneado (las líneas) si es necesario
3. Separo las líneas del fondo
4. Pinto el fondo (Background) con algún tono medio a modo de base
5. Hago otra capa (layer) entre el fondo y las líneas
6. En esa capa, con uno de mis pinceles, pinto el esquema básico de color sin preocuparme por los detalles.
7. Creo otra capa por encima de las líneas (es decir, una capa por arriba de todas)
8. Allí comienzo a pintar (sigo con pinceles) el color definitivo, puliendo detalles.

Es decir, NO utilizo el balde (Paint bucket), solo pinceles, más que nada porque me gusta pintar, controlando el ritmo de la pincelada y tratando de lograr algo mas natural y menos digital (¡vaya paradoja!).

En éste mismo blog hay algunos videos y algún otro tuto mostrando mas detalles de ésto que cuento.

Detalle fundamental:
Utilizar una tableta Wacom!

Hablando de cursos ... estamos analizando si dan los tiempos para ofrecer el Workshop de Ilustración Digital antes de fin de año, en Buenos Aires. Si se dá, lo publico aquí en el blog y en Facebook.

miuc said...

buenas

Alex me parecen muy vacanas las ilustraciones que hace, y seria de gran ayuda para mi seguir un tutorial echo por usted y mas ahora que acabo de comprar la tableta digital, pero no se si sea solo yo pero no puedo ver las imagenes y ya he intentado en varios sevidores de internet.

un saludo desde Bogota, Colombia.

Alex Dukal said...

Sí, Miuc, tengo que corregir muchos artículos que tienen las imágenes rotas. Eso sucedió cuando ingresé en Google Plus y toqué algo que no debía. No tengo tiempo ahora, pero prometo corregir las imágenes y actualizar los tutoriales.
Gracias por avisar!
Abrazo

marcela said...

Tendrías todavía la acción?

Alex Dukal said...

Marcela, desde que renové la sección recursos varios archivos han quedado afuera, la verdad que lo mas rápido hoy es hacer una búsqueda en Deviantart, hay muchísimas acciones similares a la que yo uso o usaba al momento de hacer este tuto (a decir verdad ya ni siquiera uso la acción porque son básicamente 2 o 3 pasos muy fáciles de memorizar). Fijate acá:
http://www.deviantart.com/browse/all/?qh=&section=&global=1&q=remove+background

marcela said...

Es que necesito la acción porque tengo el siguiente problema:
Tengo mi dibujo ya limpio, voy a la parte de canales, click + Alt en RGB, y supuestamente debería invertir la selección.
Sin embargo cuando agrego una nueva capa y quito la visibilidad a la selección no ocurre lo que vi en los tutoriales.

Alex Dukal said...

Click + Alt en RGB?
Pero no es así, los pasos, luego de limpiar el dibujo son:
1. Seleccionar todo Ctrl + A y copiar al portapapeles
2. Crear un nuevo canal y en ese canal pegar lo que habías copiado
3. invertir ese canal Ctrl + i
4. Seleccionar ese canal con Ctrl + click sobre la miniatura
5. Sin deseleccionar ir al canal RGB
6. Crear una nueva capa y rellenar la selección con el color deseado
Listo!
Igual, si te parece complicado ahí en ese link que te pasé tenés un montonazo de acciones que hacen esto mismo.

pia_178 said...

hola.. estaba siguiendo tus pasos pero no encunentro el link de descarga del Dukal PS Vector LineArt.atn ahora fui a tus descargas pero no hay el link .. espero q lo subas algùn dìa porque se ve muy entendible :/

Post a Comment