Monday, August 11, 2008

Vectorman -or- Bitmaps versus Vectors and a crap load of writing

I can't remember if it was Vectorman or X-Men 2: Clone Wars that I rented from Blockbuster on the day in 6th grade when I fell on my face, busted my upper lip area open and had to get stitches. It's actually a funny story which why I'm going to be talking about vectorizing bitmap images.

With two shots left for the new Ronin Dojo Community College DX episode- we're entering Scanning Week. It's kind of like Shark Week, but with twice as many dead Australians. In an effort to save myself some clean up time, I've been fooling around with vectorizing my images to make the clean up and coloring process easier.

Normally, I'd start with scanning a cleaned drawing into Photoshop :
It always comes out gray and with strange colors and specks, so I have to de-saturate the drawing and tweak the levels of black and white (Image>Adjustments>Levels):
I've created an action to do this all one fell swoop so it's really not a difficult process. But there's still problems, inevitable lines that didn't get connected and such.
But since I don't have time to ink any of my drawings, there's always little white specks left in and around the pencil lines and black pencil smudges within the drawing.
This image is better than most, but my cleaned drawings tend to have thick lines which contain even more miscellaneous white and gray pixels. Because of this, when I select and erase the area surrounding the character so that I can composite it against a background in After Effects, I get this ghosting effect. Even when the magic wand tolerance is set to 100. (For those unfamiliar with Photoshop, the magic wand is a valid tool not just me trying to make a nerd joke)
If you click on this frame you'll see, close up, that there are white lines and specks around David. I used the Matte Choke tool in After Effects to contract the Alpha Channel so it bites into the line slightly- but it still had those gray and white pixels. Sure this doesn't look like a big deal, and it probably isn't even visible on YouTube, but all this extra clean up takes up a lot of time, especially if it's just going to look "ok" at full resolution.

So I thought I'd try out Toon Boom, which Jules suggested to me in the raging comments section of an earlier post. I don't know much about Toon Boom, but I do know that it can vectorize your drawings when you scan them or import them into the program. If you want to know about vector images scroll down to the bottom of this post- I'll explain it there. For everyone else- onto my date with the Toon Boom Studio Trial Version.
I didn't really delve into the instructions, I skipped right to third base and tried to vectorize a drawing. It actually worked pretty well, and I didn't even have to clean anything. But the limited vector settings left my lines looking kinda wobbly.

And I kind of missed my smooth round lines, even though they had pixel junk around it. If anyone is more familiar with Toon Boom, maybe they could give me some tips on working it. I know that Toon Boom Digital probably works way better, but I can't drop 3 g's on it.

Anyways, I remembered that Illustrator CS2 has that livetrace option that vectorizes images, so I tried that out. You can really tweak the settings so it actually turned out pretty good.
Though close up there were still some funky artifacts from trying to vectorize the smaller details like the pupils. But it sure fixed up my white spots.
I'm pretty sure that you can run a script in Illustrator to batch live trace a bunch of images at once, so I may try to do that. Not sure, but this line looks pretty clean, and decent enough for something I didn't draw in the computer. If anyone has any tips or thoughts on using Toon Boom or Illustrator for this, let me know. I'm gonna stop writing now. Here's a screen grab of my Livetrace settings in case anybody wants to know.

Lite Brites & Robot Rights

What's our vector, Victor?

Vector images- oy vey how am I going to put this-I guess you could think of them in terms of a Lite Brite.

You make an picture on a Lite Brite by putting a single green peg in one hole, and a single red peg in another hole and so forth. That's how a computer stores bitmap images- images like jpeg's or digital photos or what have you. It displays that awesome Jonas Brothers screen saver by making pixel 1 red and pixel 2 green and pixel 3 a dreamy dreamy blue- until you have the Jonas Brothers looking all deep and faux indie.

Now if you turned that screen saver into a vector image, it's like you said to the Lite Brite "Fuck all these pegs! I want everything from peg hole 2 to peg hole 58 to be red!" In a really rudimentary way- it's like instructions for the computer on how to make the image using coordinates rather than being a map of the image.

If you tried to scale up a bit map image real big, it would start getting all weird and pixelated and blurry because the computer doesn't know where to put the new "pegs". It's like "Damn it man, we had a system but now I got all these extra peg holes and I don't know what to put in them! Is this supposed to be a ballerina or Mickey Mouse!?"
But with vector images- when everything is written in these instructions going from one peg to another, the computer can scale up the image as big as you want, because it just scales up the coordinates.

Of course the downside of this is that you're Jonas Brothers screen saver is going look like a still from A Scanner Darkly.
The "coordinates" contain less information so the picture looks like everything is rounded off into patches of color and line.

That's why bitmaps are for photos and paintings and vector images are usually for logo artwork or advertising stuff you want to put on the side of a huge building. But if you use them right- they can work well for cartoons because the lines are so clean and easy to color. The trade off is that you'll have to either draw the pictures using a program like Illustrator or Flash, or you have to vectorize the a hand drawn image, which depending on the program and drawing, can produce odd results. If you go back and read the rest of the post you can see why.

PS- I don't know much about how computers actually work, so nobody cite this on wikipedia.


MCBurnett said...

Can't we just use our For Tax Reasons millions to have Koreans do this for us?

Mom said...

That IS a crap load of writing. Interesting, though.

beautiful jules said...

Looks like illustrator will do the trick, but here's another crazy Internet possibility:
I'm curious what kind of results you can get out of that.