Crisp Lines?

[Meljen]

Hello all...

I've worked with Illustrator and Photoshop before when inking my comics...I think Illustrator is best for 'inking', and then I usually take the artwork to Photoshop and add the color, boxes, balloons, and text. But then when it comes to saving it and uploading it to the internet, and sometimes BEFORE (when I'm still working on it) the lines appear fuzzy.

Is there some way to make sure the lines stay really crisp as I'm working on the comic strip? And once I go to save it for the internet, what would be the best file format for clarity?

FYI--my comics aren't gradient or anything...I use solid colors, solid lines. Very simplistic. Would a PNG format be good for this? I really want to avoid saving in JPEG format...

Thanks!

--meljen

[Kris X]

There's your problem. JPEG always ends out fuzzy, well usually. I'd agree to save in another format. I personally save as GIF, but that does lose color.

[Smight]

If you don't have gradients and only use simple coloration, then gif would be the best. You can selecively limit the color palette to exactly the colors you use and shrink the file size way down. You can also play with the level of dithering. at 0% all of your edges will be sharp down to the pixel, but it might look kind of jagged.

[Derenge]

So far as keeping lines and all crisp and clean one of the main things I find that helps is working at a higher resolution and then shrinking the image down for the web after the fact.

Where file format is concerned some people swear by pngs for images with a little or no gradiation, other people like gifs. In many instances I'm hard pressed to tell the difference. I use jpgs and large ones at that for most of my work because there is a great deal of gradiation in it.

[Caduceus]

PNGs are very good. In the future, when IE starts having translucency compliance, they will be even better.

I tend to turn line art into a 4-8 color Indexed image as this is usually enough to account for the anti-aliasing, at least at 800x600 and above.

[Caduceus]

Where file format is concerned some people swear by pngs for images with a little or no gradiation, other people like gifs. In many instances I'm hard pressed to tell the difference.

They are almost identical with two major differences:

There are full color, non indexed PNGs. They are bigger than JPEGs but not so big you can't use them. They are lossless, which means no colors are changed when you save as a full color PNG.

They also allow for translucency, which allows thing behind the image to show through if you do the file right. This is fully supported in Mozilla based browsers but not supported in IE at all. (Except the Mac version I think?)

Other than that, they look the same. On certain images PNGs will have a smaller file size and for other images GIFs will.

[Chibiartstudios]

I use photoshop and only regular lineart when I do things. Meaning that I don't use flash and go over the lines again to make them smoother. The effect can be very nice, but try and do something complicated and suddenly you are looking at hours and hours of work.

Instead I scan lineart at 300 DPI. This leaves you with a fairly large image. The thing I have started to do lately that differs from other artists is that I scan at pure black and white. This leaves me with a fairly Jagged image, but it works out better in the end leaving both cleaner lines and less time wasted coloring. It looks something like this when first scanned:



Big no? That Eye is about an inch wide on the actual page in case you where curiouse.

So why do that at pure B&W? Coloring! Just about every one of us has had trouble with those little pixles that show up around the edges of lineart. A good sign of a new artist is a failure to be rid of these. Now, Normally lineart is scanned in greyscale and then levels are tweaked to get the desired effect. However that leaves a fatal flaw. The edges of the lines are in many shades of grey. The result is that the paint bucket cant get quite as close to the edge as we would like:



By scanning at pure black and white there ARE no greys and the paint bucket knows exactly where to go. So using the magic wand I can quickly and easilly select and paint areas I want (be sute anti aliasing is off, contiguouse is on and Paint bucket tollerance is 0) pixel free leaving me with something like this:



Normally I would add shading, gradients, etc. This is just the way I make the flat colors level that is below the lineart one. Go to the Machall tutorial if you want more info on shading. The Polycarbon ones are good to look at too, but that technique has the pixel problem.

Finally I flatten the image and ad a gausian blur of .3-.5 and lower the DPI to 72 (interner resolution) and reduce/increase the phisical size to whatever it is I need as long as it's not TOO diferent from the size created after the DPI change. Changing it too much causes bluryness. The end result is that the jagged edges of the lines go away and you are left with a clean, smooth final product:



For best results you could scan at an even higher resolution. Be sure to clean up any artifacts in the lineart before coloring and finally, don't be afraid to use other tools. Paint by nubers coloring gets boring, no?

As for file formay I like Gifs. Jpegs get on my nerves as they tweak the image's colors quite a bit. I may switch to pngs, however, since I hear that some people swear by them.

[Corgan_dane]

That's what I do, too.

Scan in B&W, then paint bucket the night away.

Scanning in B&W just seems to make the lines more crisp on my drawings, too...which was one of the things I had a problem with.

[Chibiartstudios]

I forgot to mention that this idea won't do squat for pencil drawings. This is for coloring inked drawings only. I recomend the traditional way for pencil comics. Though I doubt many pencil comics do anything TOO in depth with photoshop. They certainly should NOT be coloring as color with lineart needs that strong black line to look good.

(sorry for my crappy typing. My cat is driving me nuts and it's a little distracting.)

[JexKerome]

PNGs are very good. In the future, when IE starts having translucency compliance, they will be even better.

I tend to turn line art into a 4-8 color Indexed image as this is usually enough to account for the anti-aliasing, at least at 800x600 and above.

Strange; I've checked my comic with IE and the transparent PNGs show up alright.

As for PNGs, they work best with solid colors, are lossless, and usually compress even better than GIFs or JPGs unless they've got insane color gradients and blends. I've found that PNGs with almost no white compress much better than if it has a significant amount of white; must be something about the compression algorythm used.

Note that there are two main PNG formats: PNG8 and PNG24. PNG8 only allows 256 colors, like a GIF, has little tolerance for gradients, and usually compresses far better. In my experience they can drop a JPG by more than 50% in file size. PNG24 allows far more colors, but the images tend to be large, and in some instances JPGs will compress far better than PNG24s.

I'd really recommend you play around with the "Save for Web" settings of your image editor to find which format suits your work best.

[Van Douchebag]

AHA HA HA! AHA HA HA HA HA HA HA! Another opportunity to exhibit my tutorial for lines in Flash... AND RULE THE WORLD!

[Faub]

PNGs use the same compression algorithm as winzip. It works best when it has a repeating pattern of bits to go by. The difference between PNG8 and PNG24 is that there is 3 times more data to compress in PNG24. And technically, if you reduce the colors to say 16 you are only storing half the data you would with a PNG8. If you saved with 4 colors, you would store half the data you would at 16 colors. The 8 and 24 are the number of bits being stored.

2 colors = 1 bit
4 colors = 2 bits
8 colors = 3 bits
16 colors = 4 bits
32 colors = 5 bits
256 colors = 8 bits
Anything more would need to be saved as 24-bits because 256 colors and lower stores the colors in a 24-bit palette. There's a point where the palette size is larger than the image so 256 colors is a good cutoff point.

Grayscale is typically saves as 8-bits.

Jpegs use an entirely different compression algorithm. It takes an 8x8 block from the image and tries to match the block to a simple set of patterns. The number of patterns required to make the match determines how complex the block is. A sharp edge, for example, requires a lot of patterns to match it and each pattern is represented by a bit. When you compress, you lose some of the less important bits which is why you get the fuzz along the edges in your image.

If you compress a jpeg down to 0 quality you can actually see the blocks I'm talking about.

A jpeg is much more capable of compressing a photograph than an inked line drawing. You should only use jpegs if you need to store gradients and soft shading. Cell shading and inked lines would be best stored in a PNG using as few colors as possible. Even then, you would probably get a smaller image with a jpeg. You would just have to deal with the fuzz the jpeg creates.

[Meljen]

Thanks...I've been using PNG's now instead of JPEG's. Even though you would think that the JPEG's would be fine because my coloring and lines are so simple, but PNG's make it so much more CLEAR. Which is nice. AND they have a small file size! Which is even NICER...

[HarukaKou]

I use photoshop and only regular lineart when I do things. Meaning that I don't use flash and go over the lines again to make them smoother. The effect can be very nice, but try and do something complicated and suddenly you are looking at hours and hours of work.

Instead I scan lineart at 300 DPI. This leaves you with a fairly large image. The thing I have started to do lately that differs from other artists is that I scan at pure black and white. This leaves me with a fairly Jagged image, but it works out better in the end leaving both cleaner lines and less time wasted coloring. It looks something like this when first scanned:



Big no? That Eye is about an inch wide on the actual page in case you where curiouse.

So why do that at pure B&W? Coloring! Just about every one of us has had trouble with those little pixles that show up around the edges of lineart. A good sign of a new artist is a failure to be rid of these. Now, Normally lineart is scanned in greyscale and then levels are tweaked to get the desired effect. However that leaves a fatal flaw. The edges of the lines are in many shades of grey. The result is that the paint bucket cant get quite as close to the edge as we would like:



By scanning at pure black and white there ARE no greys and the paint bucket knows exactly where to go. So using the magic wand I can quickly and easilly select and paint areas I want (be sute anti aliasing is off, contiguouse is on and Paint bucket tollerance is 0) pixel free leaving me with something like this:



Normally I would add shading, gradients, etc. This is just the way I make the flat colors level that is below the lineart one. Go to the Machall tutorial if you want more info on shading. The Polycarbon ones are good to look at too, but that technique has the pixel problem.

Finally I flatten the image and ad a gausian blur of .3-.5 and lower the DPI to 72 (interner resolution) and reduce/increase the phisical size to whatever it is I need as long as it's not TOO diferent from the size created after the DPI change. Changing it too much causes bluryness. The end result is that the jagged edges of the lines go away and you are left with a clean, smooth final product:



For best results you could scan at an even higher resolution. Be sure to clean up any artifacts in the lineart before coloring and finally, don't be afraid to use other tools. Paint by nubers coloring gets boring, no?

As for file formay I like Gifs. Jpegs get on my nerves as they tweak the image's colors quite a bit. I may switch to pngs, however, since I hear that some people swear by them.

Wow... This helped me out a lot, actually. I've been having trouble just churning out some quick pictures and I hadn't thought about scanning in b&w. Thanks! ^_^

[Krytos55]

So why do that at pure B&W? Coloring! Just about every one of us has had trouble with those little pixles that show up around the edges of lineart. A good sign of a new artist is a failure to be rid of these. Now, Normally lineart is scanned in greyscale and then levels are tweaked to get the desired effect. However that leaves a fatal flaw. The edges of the lines are in many shades of grey. The result is that the paint bucket cant get quite as close to the edge as we would like:

one way I've found to get around that and be able to scan pencil linart right into photoshop and work with it is to set your lineart layer to multiply and then put a layer bellow the layer with your colors with a black fill. That way you can select the areas you want to color with the wand tool and the shades of grey left uncolored will show up as black becasue of the black "bleeding through" the multiply layer.

I know it sounds complicated but if you don't have the time to ink every comic you do it's a great way to go.[/quote]

[Driving Without Pants]

If your comic uses flat colors and solid lines, I would save them in PNG or GIF format at 256 colors (GIFs must be at this color depth anyway.) When decreasing the color depth, I find that the "optimized octree" method works the best at preserving the original colors while not giving you too much unnecessary dithering. If you ever have the need to use a gradient, this method also works very well.