Youtube Facebook Twitter Deviantart My feed Feed directly to your inbox

The World’s longest Photoshop coloring tutorial (day 1 to 5)

23 December 2009

Exercises, Photoshop, Tutorials

The World’s longest Photoshop coloring tutorial (day 1 to 5)
Choose your language / Elige tu idioma:englishespañol

Hello buddies, time for a very special tutorial, I will try to write the more detailed tutorial you have ever seen about how to color in Photoshop, SOSFactory color style. I will post the tutorial by issues, every issue will have his own video on real time from my Youtube channel, voice courtesy of Anita Nagu (since my English is quite poor), when we are finish I will offer a pack:

  • The full tutorial in PDF format.
  • A video compilation in high resolution and comments in English and Spanish.
  • The high res PSD file under creative commons license (for personal and commercial use).
  • The PSD layered for your own research.
  • And the color swatches, some Photoshop action…

I think 5-10US$ for the whole pack would be a fair price… what do you think? think running a blog like this is not for free, and I need to spend lot of time and energie. Would be a nice way of support, so I can continue offering good quality content.

INDEX

Day 1: Download the lineart and let´s get started

Some of you already did a try on the lineart, I suggest you color it again following this tutorial, would be nice seeing how you improve your coloring skills. If you didn´t try yet, you can download the lineart here:

Practice coloring skills

So we are ready to start! :)
See you in a couple days, stay tunned and don´t forget tweeting the post if you like it.

Day 2: Extracting the lineart

The best method to color a drawing is by extracting the lines, because we will have the possibility of coloring them later very easily. Download the drawing, open it with Photoshop and follow these steps:

  1. Open your image with Photoshop.
  2. Go to the Channels panel and CTRL+click on the blue channel.
  3. Select the Magic Wand (W) and right click, choose Select Inverse.
  4. Go to Edit > Copy (CTRL+C) and then Edit > Paste (CTRL+V). The lines are already separated from the background.
  5. On the "Background" layer, go to Image > Adjustments > Hue/Saturation (CTRL+U) and put the lighting at +100 to obtain a completely white layer.
  6. Rename the new layer to "Lineart" and CTRL+U again, this time put the lighting at -100 to obtain completely black lines.

Extract lineart in Photoshop

As you can see, the drawing is ultra-clean because I drew it digitally. In this tutorial we will only focus on the color, so if you´re interested in obtaining clean lines you can visit this post to learn how to ink a drawing in Photoshop.

Some advices to get clean lines:

  • The best way to ink is digitally, wether it be with a pen tablet or with the vectorial drawing tools.
  • Always work in high resolution, the higher the better. Make sure at least about 2.500 x 2.500 pixels.
  • If you decide to work from a drawing on traditional paper, scan it in grey scale mode or convert it to grey scale in Photoshop before extracting the lines.
  • Have a look to this post about How to ink a drawing in Photoshop.

Resume of the day

We are recording the voice for the videos, will take a while.

See you soon!!

Day 3: Making the flat colors template

Let’s create a new layer between the "Background" layer and the "Lineart" layer, and name it "Flat colors". Through this flat colors layer we can:

  1. Choose our colors template.
  2. Isolate the different areas to make quick selections with the magic wand (W).

The quicker way to paint our flat colors is making a selection of the area, using the Magic Wand (W) in question the "Lineart" layer (this one of the advantages of having such a clean lines). After this, expand the selection so the edges don’t look jagged (Select > Modify > Expand: 3px). Now choose the colour you like and click with the paint bucket (G) on the "Flat colors" layer:

Expand Selection

Some advises to make a good flat colors template:

  • Although you’re always in time to make changes, visualize the finished design and try to define your color sketch.
  • Use medium colors, neither too saturated/desaturated, nor too bright/dark.
  • Rename the layer as "Flat colors".
  • Lock the pixels of the image in the "Flat colors" layer, this way you won’t paint on it by accident.

Resume of the day

Today we made a flat colors template to make quick selections and increase the workflow. And we decided our color sketch too.

Color squeme

This is my flat colors template.

See you in a couple of days!!

Day 4: painting basic areas.

Finally, our design is ready to color :)

Let’s begin with something easy like the eyes to explain the technique, and as we go forward the tutorial will become more complex. Considering that many people don’t own a Wacom tablet, today I’ll use the mouse, the vectorial drawing tools and gradients. You’ll see the result is the same, but we’ll have to invest more time. The rest of the days I’ll use my Wacom to go faster, if you need any help you can check this post about how to draw using vectorial drawing tools in Photoshop.

First of all, let me explain a piece of theory. You’ll find this very useful when it comes to apply a correct lighting:

Pintando ojos estilo cartoon

As you can see in the image, I placed the source of light above and slightly on the left. This means that the illuminated areas will be on top and the shadows below. On the shadows, we’re adding some reflections to give volume. We’re not looking for a realist finish, but it must be coherent.

Step 1: shadows.

Let’s create a new group of layers. Name it "Eyes" and create a new layer inside it, on which we’re painting the shadows. Name it "Shadows" and put it in Multiply blend mode.

Pintamos sombras duras

Now make a selection of the eyes using the Magic Wand (W) on our Flat Colors layer, then let’s go back to the "Shadows" layer and paint an outline with the same blue color of the background (#92b6e6). Looks darker because the layer is in Multiply mode. As we said, the light comes from above, so the shadows will be thicker below.

TIP: the dotted lines of the selections can be bothering sometimes. You can hide them pressing CTRL+H.

Difuminamos las sombras

Now we’re going to soften the outline we created. Let’s use a thick brush with soft edges. The key is to paint from a distance, to make the outline blur but not to dissapear. Once you’re finished, put the layer in Normal mode again.

Eyes are easy to make because their shape is quite simple. Unfortunately, the whole process is not that easy, we must learn how to use the History Brush for more complex shapes (we’ll talk about this next day).

Step 2: light.

Añadimos un gradiente

Let’s create a new layer under the "Shadows" layer, and name it "Lightness". On this layer we’re creating a gradient from white to transparent, from above on the left until below on the right. The key is to make this sofly, not covering in white the whole eye.

Step 3: reflected light.

Pintamos la luz reflejada

Now we’re creating reflections to give volume to the eye. Create a new layer and name it "Reflected light". Make a white outline that doesn’t cover the whole shadow area. Then merge the inner outline, this time using the Eraser (E). Be careful not to erase it completely, we only want to make it a bit transparent.

Step 4: painting pupils.

To paint the character’s pupils we’re creating a new group of layers named "Pupils"above the "Lineart" layer.

We’re painting the pupils through 3 layers as we can see in the image:

Pintando ojos estilo cartoon

  • Image 1: layer we’re naming "Glow", we create a slightly oval circle and apply gradient from white to transparent. Try to leave the oval with some transparency instead of fully white.
  • Image 2: create a new layer and name it "Glow 2", do a circular gradient with blue colour (#10a4fa), and put the layer in Linear Dodge mode.
  • Image 3: create a new layer we’re naming "Pupil", and paint something similar to the image with the same blue.
  • FINAL Image: this is what we get when we activate the 3 layers.

Step 6: coloring the lines.

Finally, we create a layer above the "Lineart" layer, and name it "Color hold", we’ll use this layer to color the lines.

Pintamos las lineas

CTRL+Click on the icon of the "Lineart" layer to make a selection of the lines, and go to the "Color hold" layer. Choose a slightly darker blue color (#223171) than the one we used for the eyeballs, this way we make the line merge with the design, but it’s still recognizable.

Summary of the day

Today we painted a simple shape, like the eyes of our character. Next day we’re painting the teeth, which is more complex, so we’ll have to learn how to use the history brush.

Ojos estilo cartoon

I see you in a couple of days!!!

Day 5: painting complex areas: the history brush.

Hello guys, tomorrow I´m flying to Berlin and I´m going to take several days off but before I leave I would like to post the last video of The World´s most detailed Photoshop coloring tutorial.

For now there is no tutorial just the video where you can see how I color more complex areas thanks to our buddy the History Brush, I put lot of care so hopefully you will understand how the History Brush works by yourself, anyway I will post the tutorial whithin the next days, until then, enjoy the video.

See you soon!!

This post was written by:

- who has written 58 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

  • http://www.jevc05.net Darky

    El primero en comentar!!.. asi que me merezco un descuento no?… :) .. Me parece justo el precio y estaremos atentos a esos videos..

    Saludos…

  • Mikael Cubillan

    I’m excited!

  • Mikael Cubillan

    Hello Sergio! (Maybe I will choose between 5$-10$) Yeah your right running a blog is not easy… and your tutorial also is a high quality… I think its worth to pay or donate… (I hope some vector coloring tutorials in the future =)

  • http://www.rppd.net Susan Johnston

    HI – great tutorial that i just went through. I’m hungry for more that will show me how to colorize the cartoon figures. I am an illustrator but primarily traditional / realistic.
    I’m doing a project that requires cartooning and am chomping at the bit to
    get good at it.

    You definately can charge or ask for donations on our tutorials – I’m ready to pay!
    please let me know if you have any finished that show how you work with color. I think I have the line art down! Wow – THANKS!!
    Susan

  • http://greatdiane.daportfolio.com Diana

    No sé si sería buena idea, hmm, que una parte la des gratis y el resto sea de pago :) , como por ejemplo el psd, Sergio. ¡Está genial todo esto!

  • http://dibucartoon.blogspot.com Josue

    te felicito por tus aportes sergio, y me parece una buena idea, aunque para colorearlo necesitas una tabla digitalizadora? porque desgraciadamente aun no tengo una.

  • vlad

    I think that’s a great idea! Looking forward for the tutorial :)

    Vlad.

  • http://www.sosfactory.com Sergio Ordonez

    @Mikael: nice idea, if it works fine maybe we could do the same but with vectors.

    @Susan: check this link: http://www.smashingmagazine.com/2008/02/13/drunken-monkey-photoshop-tutorial/

    @Diana: la idea es ofrecer el tutorial gratis, y el pack completo de pago, así quien quiera puede contribuir a la causa y de paso sacar más partido.

    @Josue: la tabla ayudará bastante pero intentaré que los que no tienen puedan seguirlo.

    Thanks for the support buddies!!

  • Jonathan

    estaré pendiente de este tutorial y además listo para pagar :D

  • Lou

    Sounds good. I’ll pay $5 to $10 for the tutes. Hey, would love to see one from start to finish, video that is, with voice over. Like what pencils you use and if you draw on regular typing paper or something else(some creatives use tracing paper or velum) and if you prefer PS or Illustrator, things like that. Thanks

    Love your blog, great resource.

  • http://aijemart.blogspot.com/ Ramon Mejia Jr.

    This is a great idea and I’m all for it! Una idea muy buena y pagar de 5 ha 10 para eso no es mucho para lo que compras. Disculpa por mi castellano, no lo escribo muy bien:)

  • http://www.radioflash24.es.tl radioflash24

    ola sergio, exelente lo que estas aciendo! Pero yo soy menor y no se como comprar las cosas xD

    Deberias ponerlo gratis, ya ganas algo con la publicidad, tampoco el hosting es tan caro creo xD

    Un saludo =)

  • http://www.sosfactory.com Sergio Ordonez

    @Radioflash24: el tutorial es gratis, el resto es para soportar los gastos de traducción (bastante trabaja Anita de forma altruista), de energías y de tiempo… los ingresos por publicidad actualmente son 0.

    Por favor, no creamos que todo en la vida tiene que ser gratis… esto es un servicio al que dedico muchísimas horas al día, si no pensara que va ser rentable algún día simplemente dejaría de hacerlo.

    Igual al contrario, cuanto más rentable sea, más tiempo podré dedicarle.

  • http://www.nelutu.info Nelutu

    very nice :) thanks

  • JCMaziu

    Esperando impaciente la continuacioón.
    Gracias por el trabajo que te tomas en estos tutoriales Sergio.

  • http://elboligrafobic.blogspot.com Miguel

    Hola Sergio, me llamo Miguel y tengo 24 años y soy de malaga(nerja no se de donde seras tu :P ), tradicionalmente siempre he dibujado con boligrafo o lapiz sin importarme mucho el hecho de color. Pero mira desde que topé con tu blog me he estado manejando con photoshop(con raton por ahora ahora) y la verdad es que el resultado me motivó bastante por lo que me voy a comprar una Wacom Intuos4 S(la pequeñita) ¿como lo ves?¿es preferible gastar los doscientos y pico euros que cuesta en una bamboo que es menos gama pero mas tamaño?¿o por lo contrario es mejor la intuos peque?

    Por otro lado para comprar el tutorial este una vez completo de 5-10US$ como lo compro desde aqui desde andalucia/españa??¿cual es el metodo de pago?esque ya tienes un cliente para eso(que aki poco dolares shikillo :P )
    Bueno lo dicho muchas gracias y enorabuena por este blog y sobretodo gracias por tomarte la molestia y perdona por tanta pregunta y tanto texto.

    • http://www.sosfactory.com Sergio Ordonez

      Hola Miguel, ¿cómo estás paisano? Yo soy de la capital, zona Rosaleda.

      Te recomiendo ir a por la Intuos 4 al tamaño más pequeño. Echa un ojo a este post: http://www.sosfactory.com/blog/articles/manual-to-choice-your-first-graphics-tablet/

      El tema del pago aun no está resuelto, seguramente usaré Paypal que es el sistema más extendido, pero hay que estudiarlo un poco :)

      Saludos.

  • http://elboligrafobic.blogspot.com Miguel

    una cosa para entintar el dibujo a partir de un boceto a lapiz con la intuos4 se puede?o solo con la cintiq esta de gama alta porque me interesaria tambien el tema de dibujar con ella(calcar diria yo a partir de un dibujo escaneado)¿¿como ves esto??
    perdona que sea tan cansino pero esque soy novato en esto del dibujo digital :) por cierto estuve mirando el post ese de las tabletas me fue muy util que solo avia mirado tutoriales y eso y hay cosas mucho mas interesantes
    saludos y gracias por la atencion :D

  • Lesha’

    Hello,Sergio
    Thanx for the tut!I really think you do a great thing!
    I have a question and a comment
    the question goes like this why it is the Blue channel you pick to select all in it? is it cause it’s usually the darkest?
    and the comment is kind of silly:
    when i ctr clicked the blue channel i accidentally selected it only so when i then tried to copy and past my Background laer nothing happened :)

  • http://www.sosfactory.com Sergio Ordonez

    Thanks for the support guys :)

    @Miguel: para entintar o dibujar te va a costar un poco. Las tablas para lo que realmente sirven son para pintar. Te aconsejo este otro artículo: http://psd.tutsplus.com/articles/tools/how-to-choose-a-graphics-tablet-that-fits-your-needs/

    @Lesha: if the image is in grayscale it really doesn´t matter, you can pick any channel.

  • http://led2escape.com yellowfiv3

    Another way which you could do is always use the Multiply Layer Blending Option if your too lazy to extract the lines. But I would suggest this method, allows for a more flexible document.

  • http://Elboligrafobic.blogspot.com Miguel

    Hola Sergio soy el de nerja de nuevo ! :D perdona que no leí el post de respuesta que me diste y lo veo ahora que con el curro macho estoy que no paro una cosa ese 2º link que me das me interesa muchisimo tio pero en español no esta por ai??pfff macho esque eso es justo lo que yo buscaba y yo de inglish ando muy bad jejeje bueno compañero gracias por la ayuda y este post esta ya en mi lista de favoritos que no se me olvida visitarlo periodicamente jeje, bueno compañero aver si me dices si esta por ai http://psd.tutsplus.com/articles/tools/how-to-choose-a-graphics-tablet-that-fits-your-needs/ in espanis :D :D
    un saludo

  • http://www.sosfactory.com Sergio Ordonez

    Lo siento Miguel, está sólo en inglés, tienes dos opciones: o usas un traductor o intentas traducirlo tú mismo. Yo optaría por lo segundo, el inglés abre mil puertas ;)

  • http://www.quartouniversitario.com Sarna

    Fantastica tua idéia de compartilhar o conhecimento nesta área. Muito bons teus desenhos.

  • vp203

    hey sergio i think donating will be awesome man! just try and make it that we can pay with VISA too because with paypal is always a bit of a problem for some!! thanks so much for what you have done!!

  • Omar

    Segio, antes que nada gracias por compartir tus técnicas.
    En mi caso que soy principiante me guío mejor con el vídeo en tiempo real. Alcancé a seguir las instrucciones hasta antes del suavizado de las sombras en los ojos. No supe como hacerlo. Intente continuar con lo demás pero quede perdido.

    Sería muy bueno que crearas cursos en línea como los de schoolism.com.
    Si el precio es razonable pagaría por un curso tuyo de creación de personajes.

    Saludos,
    Omar
    Colombia

  • http://www.sosfactory.com Sergio Ordonez

    Hola Omar, en breve postearé el video de los últimos pasos. De todas maneras es bastante sencillo, leelo con calma.

    Por ahora impartir cursos online es imposible, necesitaría una infraestructura que no tengo, pero gracias por la idea ;)

    Saludos.

  • http://greatdiane.daportfolio.com Diana

    Hola Sergio, hice un comentario, más bien una pregunta en tu canal de youtube, pero creo que no lo viste, era sobre el software que usas, sé que es Photoshop CS4, me preguntaba si es mejor descargar una versión de prueba cada mes, pues no lo puedo costear, ¿lo descargas de algún sitio? yo hice eso y me ha salido con virus :/. Saludos

  • http://www.sosfactory.com Sergio Ordonez

    Perdona Diana, creo que se me pasó contestarte. Puedes descargarlo desde la misma web de Adobe: http://www.adobe.com/downloads/

  • Diana

    Gracias por tu respuesta, de hecho pensé también que el comentario no se había publicado y que por eso no lo viste :P

  • Jonathan

    hola Sergio, realmente me considero fans de tu trabajo, y pues no me queda mas que decirte gracias por compartir tus conosimientos con nosostros los novatos… bueno aunque puedo admitir que ya tenia conocimientos de photoshop, pero con tus tutoriales se me han abierto mas los ojos con respecto al programa, espero con mucho entuciasmo la 5ta, parte del tutorial, pues el manejo del pincel de historia, y la forma en que tu la usas en tus ilustraciones me parese muy interezante, desde Colombia un admirador de tu trabajo! GRACIAS.

  • http://www.edenarius.com Jose

    Hola Sergio, muchas gracias por el tutorial, es genial!!!
    Me he quedado un poco atascado en el paso 3 del día 4. ¿En que orden hay que colocar la capa nueva? ¿Como realizo el contorno del que hablas?
    Llevo como 3 horas dandole y no logro conseguirlo, que inepto soy!!

    Un abrazo!!!

  • http://www.sosfactory.com Sergio Ordonez

    Hola Jose, en la última imagen puedes ver el orden de las capas.

    Para hacer el contorno lo mejor es usar las herramientas de dibujo vectorial. Primero rellenas todo el ojo de azul, después creas un circulo para borrar la parte de adentro, botón derecho y haces selección, por último borras el área seleccionado.

    En breve pondré un video.

    Saludos y gracias a todos :)

  • http://www.radioflash24.es.tl radioflash24

    o.O que bueno :D me prestaron una tabbleta digitalizadora jeje al principio fue muy dificil de usarla pero ya m estoy acostumbrando :D
    ahora a practicar… muy buen tuto :D

  • LostDZ

    no sé si te he dicho alguna vez que eres mi ídolo :D
    apúntate 10$… estoy ansioso por ver como lo terminas!

  • manu

    hola, Sergio.
    estoy deseando contribuir a la causa.
    Aunque el dibujo sea mi hobby, viendo tu blog cada dia me haces mejor.
    saludos desde Jaén.

  • Aaron

    Hola Sergio estoy planeando crear un blog paresido al tuyo =) me gusta mucho como tratas de transmitir tus conocimientos y ayudas a la gente, tambien me gustaría poder intruirlos aunque sea un poco (no tan bien como tu). Te deseo lo mejor y sigas teniendo exito. Y a la gente que lee este blog no ahi mas que seguir practicando y practicando para mejorar =).
    Saludos

  • http://blog.jopicar.com jopicar

    Hola Sergio,

    La iniciativa, ESPECTACULAR!, el precio, moderado ;-) , y el tutorial es increíble, estoy alucinado viendo como avanza y alucino todavia más con tu forma de expresarlo y presentarlo.

    Gracias campeón, un saludo enorme desde Galicia y en estas entrañables fiestas desearte lo mejor: salud, amor, paz y prosperidad (que seguro la tendrás)

    Hasta siempre!

  • amzg

    ENORME!!!!! Que magnifico mega-tutorial!!!! Eres un crack!!

    Esperando con muchas ganas el dia 5º!!

    5-10$ es un precio genial.

    Un saludo y gracias por estos fantasticos tutoriales.

    PD: No se porque, en esta entrada en la version en castellano el blog esta totalmente descuadrado, los comentarios me salen a la derecha y no abajo, en la version en ingles se ve perfecto.

  • amzg

    Se me olvidaba apuntar, cuando saques el tuto completo, lo compro si o si.

  • http://www.sosfactory.com Sergio Ordonez

    @amzg: muchísimas gracias a ti por decirme que algo iba mal, ya está solucionado :)

  • Cholo

    Hola Sergio.
    Gracias ante todo por tu tuto.
    Tengo un problema con la varita mágica. Al hacer la selección de area me coge todo el lineart y al usar el bote de pintura sobre la capa color me la rellena entera.
    Como haces para seleccionar solo un area determinada?
    Gracias.

    • http://www.sosfactory.com Sergio Ordonez

      Hola Cholo, ¿estás usando este dibujo? ¿Has mirado el video? No tiene mucha complicación, ¿quizás tienes marcada “sample all layers” (arriba a la izq)?

  • radioflash24

    esperando el dia 5!!!!!!

    xD

    estoy ansioso D:

  • Diana

    Sí, yo también notaba eso al igual que amzg pensaba que era mi navegador :S Feliz Navidad y año nuevo , Sergio :)

  • http://www.nelutu.info Nelutu

    Very nice tutorials, Thanks :)

  • http://www.radioflash24.es.tl radioflash24

    primero en comentar :D

    yo ya se usar el pincel historico por que practique viendo tus videos jeje xD

    D:

    ahroa vere el video un saludo :D

    pero no se pintar zonas ams complejas T_T

  • amzg

    Ultimo video????? :( no se porque me habia hecho a la idea que veriamos todo el proceso de pintado, o almenos una zona mas compleja como por ejemplo el cuerpo y no los dientes.

    Aun asi gran video, esperando el tutorial hay algunas partes que me pierdo jeje

    Gracias!!!

    • http://www.sosfactory.com Sergio Ordonez

      @Amzg: me refiero al último video publicado, habrán varios más :)

      Por cierto, el contenido de estos post se va añadiendo al post original y después se borra, si teneis alguna duda por favor, comentad en el post original.

      Saludos

  • http://simiographics.daportfolio.com/ Salvador Lopez

    Buena tecnica sergio eres un grand diseñador y se ve que todavia no pierdes el toque con el raton jeje bueno adios

    Saludos!!!

  • Cronus

    Sergio

    Thank you so much for taking your time and doing things like this. You are awesome!

  • Pingback: Anonymous

  • Miguel

    Hola de nuevo sergio mira se que quieres que comentemos en el post original, pero esque mi duda no tiene nada que ver con el tema y no se, e decidido comentartelo aqui por que es el lugar mas concurrido ahora mismo(supongo). mira quiero crear una pagina web(pero de estas que sean .com o .es no blogger ni cosas de estas) y si me puedes decir tu que sabes del tema que compañia elegir, el precio(en euros plis) asi por encima,y otra duda es ¿como ago para personalizar la web una vez que es mia?es decir si quiero poner un apartado,no se, musica otro imagenes por ejemplo eso es muy dificil…???esque yo de informatica se lo justo
    perdona las molestias y gracias otra vez