Photoshop Class: Scanned line drawing to finished colored illustration

[15 Oct 2010 | By | 8 Comment(s) | 10,550 views ]

I bet you guys thought I’d forgotten how to draw, huh? I must admit, art has been on the back burner these days… but I volunteered to do a little illustration for a neighbor’s baby shower. And, since you like our last ‘Photoshop Class’, I thought you guys might like a little peek into how I colored it.

This is a quick method I use for coloring more ‘cartoonish’ drawings… I sketched the drawing in pencil, then went over the line work in ink.  However if you draw your pencil lines dark enough, this method will also let you create an ‘inked’ looking drawing from the pencil sketch.  I use both Photoshop and Illustrator (still on the old CS2, sigh) for this technique.  Click on the illustrations to see them larger.

Tutorial – How to take Line Art to Finished Color Cartoon

Step 1: Scan

Clean up the worst of the stray pencil marks, and scan in your drawing.

Step 2: Levels

Create a new Levels adjustment layer.

Move the white arrow to the left  and move the black arrow to the right (see the Step2 image) until you have a white background and black lines.  This will take a little trial and error, but get it as good as you can.  (If you made any mistakes in your inking, and want to fix them, do it now.)

Step 3: Clean up the Lines

For this illustration, I wanted smoother lines.  (You can skip this step if you like the look of your lines.)  Save the .psd and open it in Adobe Illustrator.

Click on the image, and choose Live Trace.  Check out your lines.  If you want to change them, try other settings from the dropdown box (like Comic Art) or play around with the threshold and min area settings at the top (see step3 image).

Copy, and paste back into your Photoshop image.  (I paste it as a smart vector.  Since it’s now vector, you can resize it if you want it larger, and so forth.)


Step 4: Create a Line Art Layer

I got this technique from the awesome Tom Richmond – Go read the whole thing, but here are Tom’s basic steps:

1. Scan line art as grayscale image
2. Create a new blank layer, rename it “Inks”
3. Go to the “Channels” palette, there is only one channel called “Gray”
4. At the bottom of the channels palette, click the “dashed circle” icon entitled “Load Channel as Selection”
5. In “Select” drop down menu, select “Inverse”
6. Go to your “Inks” layer
7. Press “D” on your keyboard to reset swathes so full black in active color
8. Press “Option” + “”Delete” to fill selection with black
9. On background layer, press “Command” + “A” to select and then “Delete” to delete line art on that layer
10. Convert to RGB or CMYK

Yeah, all that is a lot of work, right?  I do this all the time, so I recorded it as an Action in Photoshop, so I just click one button and it’s done!

Step 5: Paint the Color Layer

Now I set up my layers.  I have a WhitePaper layer that is just a solid white layer.  I put all my old layers that I’m not using any more under that.  

Next layer up is a blank “Under Color” layer, then a blank “Colors” layer, then my Inks layer, then an “Over Color” layer. (You can see the layer setup in the final image below)

Select your Colors layer.  For quicky coloring, I use the magic wand tool (Sample All Layers checked) to select all of the sections that I want to paint a certain color. Then I have another photoshop action recorded that 1-expands the selection by 1 pixel, and 2-fills with the foreground color. (see step5 image)

Step 6: Paint the Under and Over Colors

You don’t have to do this, but I find it easier for the really small areas (like the suckers on the arms) to just paint on the Under Colors layer.  You don’t have to be neat. (see step 6 image).  I use the Over Colors layer for when I want to paint over the black lines.  Some of my suckers ended up like black dots, so I just painted the green suckers on top!

Below is the final image with the layers.

Photoshop Class: Scanned line drawing to finished colored illustration
This entry was posted in art, my art, Tutorials/Tips and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. 10,550 views

8 Comment(s) »

  • Erin [] :

    OHMYHECK. I don’t draw and I don’t do fancy things in photoshop. But I am about to have a baby boy and my most favorite animal in the world is the octopus! So I’m pretending this drawing is totally in honor of me! haha.

    It’s TOO CUTE.

  • Mary Anne [] :

    Talk about serendipity!! I just spent time looking for a pattern to make an octopus to go along with a doll I’m working on and this post was in my reader! I know it’s not the ‘pattern’ I was looking for, but it will certainly help for inspiration! Thanks.

  • regina [] :

    this is cool to see. Love the cute octopus too. Makes me really wish I had photoshop.

  • Nancy Dorsner (Dot) [] (elsewhere) discussed this :

  • dot [] (author) :

    thanks all!

  • Alex [] :

    THANK YOU… I’ve been looking for this exactly for ages and I thought the only solution was to bring my scans into illustrator and draw over every line manually.

  • Helen [] :

    Wow, you make it look so easy. i’ve always wanted to know how to use photoshop but I know there’s so much to it. I even got ‘Photoshop For Dummies’ and found that too much! Ahh well, i’ll stick to the collage and cut out :)

  • Scanning + | Pearltrees [] :

    […] Photoshop Class: Scanned line drawing to finished colored illustration […]