homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

Adding color to pen and ink scans
A Photoshop Project

 10:18 pm on Dec 28, 2001 (gmt 0)

I've taken on a project where an artist has hundreds of pen and ink drawings already scanned and stored as hi-resolution jpegs. He wants to add flat color to these images, in a standard comic-book style, and resize them for a new website.

The goal is to set up Photoshop files for him so that he can choose the exact colors for each area of each image. I'm wondering what suggestions people may have for methods that will work the best. The challenges include:

Jpeg artifacts in the scans
Making selections when an area is not bounded by a closed curve
Ink-shadings in parts of the original drawing
Some highly detailed areas (scales on a dragon, for example)
The artist is a raw beginner in computer graphics

Rather than bias any answers with what we've put together so far, I'd rather have an open ended conversation about this -- someone just may have a magic bullet!



 11:44 pm on Dec 28, 2001 (gmt 0)

I did something like this last summer - took scans and turned them into a low-res (web) posterized style. Because this wasn't high res art for print media, I made selection areas for color replacement by tweaking contrast levels. If you have a clean selection, you can use that as a mask and introduce any color you wish. You can overlay color layers with another color (black?) to get the comic book-effect outlines you're going for.

There are several filters that might make this go easier, depending on how involved the base images are. Painter used to have one, if I remember correctly, that almost did that very thing.

I used to use Adobe Streamline to take scanned lineart for other applications, but it was one of those tools that fell by the wayside when I got into other projects. This is a way to make those outlines work for you for overlay on the base colors.

BUT- what we're essentially talking about is an image that is only going to be for the web. That allows "quick and dirty" to come into play, where you won't get away with that approach in print media. I mean- why labor over a 72 or 96 dpi image that might be 400 pixels of glory on the web? Anything more is going to be overkill for this particular purpose. I think you can get a nice effect doing the colors as layers and using selections as outlines/overlay.

You could conceivably create some Photoshop actions once you've streamlined the process for a person with less experience to try their hand at. (This, however, could be one of those situations where there is not substitute for experience.)


 12:04 am on Dec 29, 2001 (gmt 0)

Having done the same thing before (except at 300ppi, instead of web resolution), I found two relatively easy options, and didn't bother looking for more.

1. Increase contrast until the paper is very white, and the ink is very black... then duplicate the background layer, and delete the paper-white area in the new top layer. That leaves you a background layer you can "paint" (or paint-bucket) your color on, and a top layer that maintains the inegrity of the line work.

2. Play with the brush settings (overlay, screen, etc) until you find one that gives you the color intensity you want while preserving the lines. Paint away.

A helpful visualization when trying to come up with new tehcniques to colorize my images was to think of my "old" technique for cartoon color: photocopy the ink drawing onto a transparency, and literally paint the colors on the back side of the film with acrylics, animation-cell-style.

Basically, you somehow want to be able to fill color in "underneath" the lines, so your color doesn't affect the line integrity. I never found a more effective tool to use than the basic PhotoShop paintbrush though.


 12:41 am on Dec 29, 2001 (gmt 0)

>> ...selection areas for color replacement by tweaking contrast levels.

Aha! I've tried converting to 8 color gif and then back to RGB. I also tried "posterize" and "threshhold". Why I didn't try something as simple as contrast, I can't tell you.

>> Adobe Streamline...

Yes, thank you. Now where did I file that CD? I never even installed it on my new machine.

>> think of my "old" technique for cartoon color: photocopy the ink drawing onto a transparency, and literally paint the colors on the back side of the film

That's exactly the idea. The original artist could easily relate to a workflow set up on that model.

>> Play with the brush settings (overlay, screen, etc) until you find...

Now you've stimulated ny thinking. I could also set up separate layers and play with the combination "mode". I'm thinking "overlay" might be the ideal here. And each color block would then be on a separate layer for the artist to do easy color selections.

I've tried using the Hue/Saturation palette's "colorize" option, which does a nice job in terms of not leaving any halos -- and I can save each selection as an alpha channel. But using layer combining modes might be easier and more intuitive.

What might be very useful is a method for turning grays into black with varying percentages of transparency. Any ideas?


 12:59 am on Dec 29, 2001 (gmt 0)

I found overlay works best, if you actually want to be able to color "on the lines" witht he paintbrush.

I would LOVE to find out a way to convert grey to varying transparency! Just scan the image in greyscale, adjust the contrast until your paper is true white, and then *voila* do a bit of magic, and you have a transparent background with smooth gradient edges on the black lines... perfect for painting under.

Don't know how to pull it off though. :(


 1:44 am on Dec 29, 2001 (gmt 0)

mivox -

Once you've tweaked the contrast and have your selection (your outlines) as a seperate layer, you can grayscale that layer and create a mask based on opacity. By the same token you can colorize that grayscaled outline layer and do a mask based on opacity.

(Save your selections and alpha channels so you can load these to test effects on the different layers).

I guess the latest version of Illustrator allows you to apply transparency to vector objects (COOL!), and Canvas has for some time. I have 7./something - never bothered to upgrade :( If I did more than a few magazine ads a year I'd probably step up and upgrade, but I only do a few. And I'm cheap. And preoccupied. And lazy.

When I did my colorized scans I ended up spending way too much time perfecting my little system. When I was finished I had a really keen system... all for web res images. Seemed silly to spend so much time on them after all was said and done, but it was a fun process.

In a perfect world all I would do all day long is graphics :)


 1:58 am on Dec 29, 2001 (gmt 0)

Ideally, I'd like to be able to just turn the white in a grayscale layer to transparent (sorta like when you select a transparency color for a GIF), and have the transparency fade into the edges of the black lines, so the scanned lines ended up basically anti-aliased into the transparent area.

It's getting the lines into their own layer without a slight white ghost-edge in the first place that I had a problem with. I either end up with that teeny grey/white fringe around all the black lines, or you end up with jagged aliased-looking edges on the lines. The transparency mask (great idea) sounds like it's (unfortunately) a step ahead of what I'm b*tching about...


 2:09 am on Dec 29, 2001 (gmt 0)

In a lot of cases, if I blow that image way up and get my lines as a layer - I convert the lines to a selection and save the selection as its own 'deal'. I reload the selection, feather (in or out - depending ont he original line quality), overlay the selection on any color I want (a solid colored layer or pattern) - then "cut" out my feathered selection and convert to a new layer. My lines are now feathered and can be used as a separate layer to be colorized, resized, tweaked, and abused any way I like.

<added>bye bye halos</added>


 2:24 am on Dec 29, 2001 (gmt 0)


Not to sound like the bearer of bad news- but by the time you're done with these you'd might as well save high res copies and maybe do some of those web postcard mailers so you can milk your efforts for all they're worth. Be a shame for these mini masterpieces to exist only as window dressing for the web site, no?

Or you could look at the breadth and scope of this project and just use some clip art rainbows from an animated gif server, right?


 1:39 am on Dec 30, 2001 (gmt 0)

Well, depending on how "hi-res" the scanned files are (600ppi+?), just adjusting the contrast to 100% black & white, then using the magic wand (with anti-aliasing on) to select and delete all the white might work fine.

If you started out at 600ppi, ran the contrast to 100%, deleted the white, then scaled it down to 300-400ppi, the edges of the "stand alone" lines would "fuzz out" into the transparent area enough to blend with any underlying coloring, would be scalable down to web resolution, and still high res enough to use for most offset printing needs.

If you had 1200ppi files, and could scale them down to 600 after deleting the white, even better.


 8:00 am on Dec 30, 2001 (gmt 0)

Now I'm excited.

Based on idiotgirl's comments about grayscale and selections (thanks heaps!) I've come up with a process to create a transparency version of grayscale, where white="100% transparent" and black="100% opaque". The brainstorm was in remembering that a selection is just an alpha channel.

1. Select and desaturate the whole image, to get rid of any stray color.
2. Copy the whole canvas, and paste into a new alpha channel.
3. Create a new layer.
4. Do a "load selection" of the new alpha channel and invert it.
5. Fill the resulting selection with black.

The result is exactly what I was after -- a perfect conversion of grayscale into degrees of transparency.

>> by the time you're done with these you'd might as well save high res copies and maybe do some of those web postcard mailers so you can milk your efforts for all they're worth.

Yes, we're actually considering selling some full blown posters now, which of course ups the ante on all the work involved -- but given this guy's talent, I think it's exactly the right choice.


 10:19 am on Dec 30, 2001 (gmt 0)

Another plus for this new method: the original artwork is always available in the alpha channel, where an accidental change is pretty hard to make. Whenever I need to reference the original, it's a simple copy (from the alpha channel) and paste (into a new layer).

Now I can easily create versions of the art with custom contrast levels so I can make easier selections in a particularly touchy area -- and never I need to touch the original art, which rides right along in the file, always handy.

I'm like a kid with a new toy here. Can't wait to show the artist. He's very new to the computer, so this more intuitive approach should suit very well.


 6:05 pm on Dec 30, 2001 (gmt 0)

tedster - the real fun starts when you take RGB to CMYK. When I did mine the first time I thought, "But of course I don't need high res - RGB low res will do nicely" and proceeded to toil away endless hours in RGB format, blind the often harsh realities of CMYK.

After the time investment, but before it was too late, I went back and tweaked my colors in CMYK. Whole 'nother animal. That's one reason it's so important to work with alpha channels and selections and layers. Leaves you open to make little adjustments if you decide to take the artwork to print.

Anymore, if there's a glimmer of a chance a client may want high res for print when they send me their stuff for 'just a web site' - I always scan them high res to start. From there on it's a piece of cake. They can change their mind all day long and I'm not stuck doing the same job twice.

And how would I know that? By wasting more than 40 non-billable hours (a weekend) on one job that went from RGB web stuff to high dpi print. I learned my lesson.


 2:49 am on Dec 31, 2001 (gmt 0)


Thanks SO much for the step-by-step tedster... that will definitely come in handy at some point. :)

idiotgirl! What took you so long in coming 'round the gfx forum? I know we're a bit slow around here most of the time, but folks like you are *soo* handy to have around. This thread is a gem, thanks you two!

(edited by: mivox at 4:46 am (gmt) on Dec. 31, 2001)


 4:30 am on Dec 31, 2001 (gmt 0)

Glad I have anything of use to contribute. Generally I'm the one desperately seeking knowledge on these forums - and they're a real lifesaver. I'm just amazed at the brainpower this board represents. It's quite humbling.

While I'm somewhat of an inept scripter... I can make smoke pour out of Photoshop all day long <he he he>.


 8:51 pm on Dec 31, 2001 (gmt 0)

I can make smoke pour out of Photoshop

Hehe... sounds like you need a better fan. ;)


 5:59 am on Mar 24, 2002 (gmt 0)

It's been a few months, and I want to report that this method is proving amazingly useful. Yes, the artist is doing fine with it.

But more than that, I've found many other places to use the technique. It's now a valuable part of my toolkit - any time I need to represent varied lightness as a degree of transparency I know where to go.

I've colorized black and white photos so they look less out of place with the color photos on the same page. I've used it to deal with "edge pixels" when compositing layers - instead of black I use a different color to do the fill, in that case.

So it's coming in very handy and gives better looking results than some of the fudging I've reorted to in the past. The thing about it, in the very old days of Photoshop, before layers came into the picture, working with channels was all people had. I'll bet the veteran Photoshoppers wouldn't have had to think for 2 seconds about it.


 5:49 pm on Mar 24, 2002 (gmt 0)

Personally, I would not use PS lfor this project. Macro Media Flash and Free hand have much better tools for coloring in areas such as what you have described. One or the other, I can't remember which, has a specific tool for coloring in areas that have breaks in their borders. I used them a while back to do something very similar to some old Architetural Renderings of my own.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved