Tutorial: Illustrator, the Radium Way

[Radium]

First, let me say that I'm not a fan of Photoshop. It has its times, sure, such as when you need to edit a photo. But there's plenty of other things it ISN'T meant to do. Such as everything else.

It upsets me that so many artists use Photoshop, especially for cartooning. Whever they say "look I found an awesome new fast way to ink" or "look I found an awesome new fast way to color outlines", I die a little on the inside. Admittedly, I'm horribly biased towards vector artwork. It's an aquired taste, and I'd DEFINITELY reccomend using a trial version of Illustrator before shelling out any cash. Oh, and make sure you're getting Illustrator CS2 or higher, since older ones don't have a Live Paint tool.

The following is a description of the method I went through to draw one page of my "Concentration Portfolio" for AP Studio Art (the portfolio was a comic. About birds with knives). By the end of the 12-page project, I was so fast with this method that I drew the last 6 pages the night before they were due.

http://foxmage.com/Art1.jpg
Here's my sketch. I did it with a Wacom tablet on one layer, creatively default-titled "Layer 1". I like to do my sketches with the pencil tool. A lot of people hate illustrator from the get-go because the pencil tool's default settings make it change lines you just drew. Here's the settings everyone inevitably puts the pencil tool at one day after getting the program:
http://foxmage.com/Art1b.jpg

I don't know what Fidelity is, but 2 sure seems to work well. Also, when drawing lines, MAKE SURE you have the fill color off. Illustrator is for drawing shapes, and it needs to know if you don't want anything inside them. Sketching in it is nice, however, since you can easily select and move lines.

http://foxmage.com/Art2.jpg
Then I created a new layer and inked it up. I like to ink with the Paintbrush tool and a custom pressure-sensitive brush. You really have to play around with the brush settings until you find something that hums for you. The settings I use for the Paintbrush tool itself, though, are:
http://foxmage.com/Art2b.jpg

Okay, next step is more part of my personal coloring method I used to turn out six of these pages in one day. First, duplicate your ink layer. Hide the one on top.
http://foxmage.com/Art3.jpg
The red lines are part of how I cel shade. I use the red lines to block off the flood fills, then use the Magic Wand to select all red lines and delete them. There's plenty of other ways to color; in an older picture I drew here (http://www.jazz2online.com/jcf/showpost.php?p=366633&postcount=54) (for Hare's contest), I just made a shading layer and drew some transparent colored shapes over the characters as shadows and highlights.

http://foxmage.com/Art4.jpg
Anyway! Then I predictably crack out my Live Paint thingy and go at it. You need to select everything on Layer 2 and click it with Live Paint to convert it to a Live Paint object. Note, however, that this makes the varied line thickness go away. That's why I duplicated the ink layer.

The next thing's kind of unique to my style, too. I'd been abusing gradients regularly in this comic, so I had no choice but to hit this page with my gradientstick as well.
http://foxmage.com/Art5.jpg
Note that I made Layer 2 Copy (the inking layer's duplicate) visible again. To add the gradients, I first selected the Live Paint object (aka all of layer 2) and used the "Expand Live Paint" function. This turns it into shapes - in a group of two groups however, one containing fills and one containing lines. You need to ungroup these, throw the blob of lines away, then ungroup the shapes from eachother. Then I went to the shapes and began clicking gradients onto them.

http://foxmage.com/Art6.jpg
Slam in a background. I named that sonofa "Layer 4". Look, lightning. Apart from being a horrid cliche, the lightning helps me move the viewers eyes in a "U" shape, both to guide him throug the page and to imply downward impact force.

And now, for the part you've all been waiting for, <b>how to do colored outlines in Illustrator</b>. You've got "Layer 2 copy", which contains all your outlines. Go there, select the outlines, and pick a color. You can select more than one outline by dragging over it. And then you're done; you've colored the outlines.
http://foxmage.com/Art7.jpg
Note I deleted the sketch layer and put on a few effects. Also, I made the outlines gradients too, by using the "expand" command on them (converting them to fills).

So, then you're done. Or I was done, anyway. It sounds complicated, but when you get the hang of it Illustrator blows Photoshop away. And it lets you do things like this at a rate of 6/day, evidently.

http://foxmage.com/7_5.png

Oh, and don't forget you also have the advantage of infinite rescaleability. Here's a zoom on the little terrified guy in the background.
http://foxmage.com/Art7b.jpg

[MoonBlazE]

How are the layer panel in comparison to photoshop? I often use tons of layer effects (e.g. dropshadow, outer glow, textures, and so on).

The vector shading looks soo tempting but unless I can find a *cough* cheap way of getting it, it'll have to wait a few months. ;-)

[n00b]

I've been meaning to get into Illustrator for awhile now since the paintbrush tool in Flash just sucks, and I can't really find settings in Photoshop that work for me.

[Radium]

How are the layer panel in comparison to photoshop? I often use tons of layer effects (e.g. dropshadow, outer glow, textures, and so on).From what I know of Photoshop layers, Illustrator is completely different. In Illustrator, layers are more or less just used for keeping things in order, sometimes for masking. Any effects, like textures, shadows, outer glows, etc. are added to the individual objects. Or faked; for a dropshadow you can easily just put a blurry black copy of an object under something. Of course, if you need to put a photoshop effect on something, sometimes it's easier to just copy and paste into Photoshop. Illustrator and Photoshop integrate like peanutbutter and jelly, really.

Something else that takes getting used to is that everything is object based. Like, every line I drew and every shape I put down can be modified, moved, and has no effect on things under it.

The vector shading looks soo tempting but unless I can find a *cough* cheap way of getting it, it'll have to wait a few months. ;-)I got CS2 for about 100 USD off one of those sites that sells with an educational discount. If you look around, you can find stuff for cheap.

I've been meaning to get into Illustrator for awhile now since the paintbrush tool in Flash just sucks.YES D:
One of the nice things about Illustrator is that you can copy and paste into Flash. The stuff for Illustrator CS3 says this is a new feature, but you can actually do it in every version.

[n00b]

The vector shading looks soo tempting but unless I can find a *cough* cheap way of getting it, it'll have to wait a few months. ;-)

Download a trial of Flash and when thats up download a trial of Illustrator, it's the same technique in both programs and you get two months for free.

[MoonBlazE]

I'm having a problem with the Live Paint Bucket tool, it's mainly that it doesn't want to "select" all areas properly but I'm guessing it's mainly because my outlines aren't properly closed off?

[Radium]

I'm having a problem with the Live Paint Bucket tool, it's mainly that it doesn't want to "select" all areas properly but I'm guessing it's mainly because my outlines aren't properly closed off?Did you convert the lines to a live paint object? If not, you need to select everything you want to color and then click the LP tool on it. If done properly, a red outline should appear around areas you can fill when your mouse is over them.

Otherwise... yeah, maybe you left holes in them. Just draw something in any gaps with an obscure color you can easily magicwand-out later.

[MoonBlazE]

Yeah, I did convert. It was only willing to fill out a few areas which seemed properly closed off. I tried to do as you say and it worked now.

I'm gonna continue bugging you with questions to learn this quicker if you don't mind. => Like, how do Ì get the gradient tool (G) to work?

[Radium]

Yeah, I did convert. It was only willing to fill out a few areas which seemed properly closed off. I tried to do as you say and it worked now.

I'm gonna continue bugging you with questions to learn this quicker if you don't mind. => Like, how do Ì get the gradient tool (G) to work?No problem; I find this fun. There's two kinds of gradients: the normal ones, and meshes.

Gradient tutorial time!

First, draw a shape. I made something kind of like an apple.
http://www.foxmage.com/applemysticky.jpg

Select your apple with the normal selection tool thing, and click on pretty much anything in that gradient window to the right, and your apple will start to look like whatever the last gradient you used was.
http://www.foxmage.com/applemystickier.jpg

Fix up the gradient to be how you like. You can drag colors down from the swatches window, select a color on the bar and then modify it using the color tab, or even copy colors by holding down Alt and dragging them. Also, you can change it from being linear or radial. Here I've concocted a pretty appley gradient:
http://www.foxmage.com/applemystickiest.jpg

THEN the gradient tool comes in. With the apple still selected, drag the tool across it. This will decide the direction or size of the gradient. I gave it a bit better positioning:
http://www.foxmage.com/finalapple.jpg

The other kind of gradient is meshes. They are pretty sloppy on hand-drawn shapes, but can do amazing things with primitives. To use one, pick the Mesh tool and click somewhere in the middle of your shape. This creates a node in the middle and some points along the corners. Also note that it makes the outline go away for some reason.
http://www.foxmage.com/applemesh.jpg

From there you can use the point selection tool to select individual points on the apple and change their color. It will make a gradient between them.
http://www.foxmage.com/applemeshiest.jpg

Hope that answers.

[MoonBlazE]

What brush shape do you usually use? I managed to pick a different one than the default while experimenting and now I'm no longer sure which is the best for typical out lines. There seem to a lot and I don't know how to access them so a tip would be appreciated.

[Radium]

What brush shape do you usually use? I managed to pick a different one than the default while experimenting and now I'm no longer sure which is the best for typical out lines. There seem to a lot and I don't know how to access them so a tip would be appreciated.Hm.. are you asking how to change brushes or their settings? The brush tab is next to the swatches (here (http://www.foxmage.com/applemystickier.jpg)), and you can modify them by double clicking. I usually change the first one to be 3 px wide with 3 px of pressure variation.

[MoonBlazE]

you can modify them by double clicking. I usually change the first one to be 3 px wide with 3 px of pressure variation.

Heh, that's exactly what I'm getting lost at. There's so many settings and I don't know which does what. "Calligraphic Brush Settings", right?

[Radium]

Heh, that's exactly what I'm getting lost at. There's so many settings and I don't know which does what. "Calligraphic Brush Settings", right?Yeah. From there you can change the angle, roundness, and size, making them either fixed, contingent on a factor like pressure, rotation or tilt (though most tablets just support pressure), or random.

The trick to Illustrator is that if something isn't working how you like it, you can almost always change it by double clicking the button. This is particularly useful for supporting tools like the eyedropper and magic wand.

[MoonBlazE]

I have a new question for you Radium: How do you do your glows? Such as the glow around the lightning or the glow in his eyes.

[Radium]

I have a new question for you Radium: How do you do your glows? Such as the glow around the lightning or the glow in his eyes.

Gaussian Blur. For the eyes it's just a blurred, translucent circle over his eyes, and for the lightning it looks like I have a blurred copy of the lightning with Screen transparency.

One of my personal favorite ways to do glowy things is to copy the object, color the original and blur it, then use Ctrl+F to paste the copied object in the same place and make it white (example (http://foxmage.com/CandlehawkConcept/Mantes.png)). The blurred object will "bleed" out from behind the edges of the white copy, giving it a nice glow just on its edges

[MoonBlazE]

Thanks for the quick response!

That's what I thought, I tested it out with a lightning in same style as your background. It's a little limited, but it will do for quick comic pages.

I have come to prefer Illustrator for comics where I have to draw many smaller frames and Photoshop for the larger and more detailed illustrations.

So thanks for everything, you have been a great teacher. :)

[Radium]

Glad I could help, Mr. Blaze! And happy to know it's been working out for you.

[Torkell]

Out of curosity, what is the thing you linked to meant to be? It looks like some sort of armoured angel figure, except without the body.

[Stijn]

I think it's a bird-like creature, perhaps a phoenix?

[Radium]

Out of curosity, what is the thing you linked to meant to be? It looks like some sort of armoured angel figure, except without the body.It was originally concept art from one of my old unfinished projects. But given the frequency with which I scrap ideas and redesign things, it's now just an example of how to do glow effects in illustrator.

It looked pretty and shiny enough, though, that it made it into the portfolio I took to an art critique event at MICA (though horribly off-topic, the full story on that is that I went to the event just for art criticism, and ended up getting a letter afterwards that my portfolio had been accepted by MICA. This pissed off all my friends who actually wanted to get accepted to fancy art schools but couldn't.)

[n00b]

Damn it I hate you so much right now Radium. I effin' love MICA, my Aunt works there.

*goes to don his mica baseball cap to lessen the pain*

[Bboy Type7]

"The Radium Way"

LOL I don't know how long I laughed at that. You need a truly original style dude. What you call your style is unbelievably generic and dull. I don't feel like I'm gonna give a second look. Your inking is horrible. You got no "in" and "outs" for the pen tips. The whole work looks like one of those cheap flash CGs done by amateurs all the time. What makes you think you have the ability to produce something original?

[n00b]

The point of posting art is so hopefully people can give constructive feedback. Radium is ace at this and is actually quite good at art making him more than qualified to give a tutorial on how he does art.

Unlike you, who fails on both counts and furthermore fail at being an acceptable human being.
<I'm only feeding the troll because his posts entertain me>

[Radium]

Unlike you, who fails on both counts and furthermore fail at being an acceptable human being.
No, no, he's right. I needed someone to tell it to me straight; they were all just trying to make me feel good, giving me scholarships and accepting me to Mica out of pity. My entire being is unoriginal and dull, and my pen tips lacked both ins AND outs.

But from now on, I am totally hip and changed. I am brizinging more hot manga influence into my ludacris drawing style for added originality, and will make sure even my very tone of speech and sweet dialects carry the party down into the hizzouse.

Thanx dude, Bboy, for showing me the right path man. Peace out man!

[Nonomu198]

No, no, he's right. I needed someone to tell it to me straight; they were all just trying to make me feel good, giving me scholarships and accepting me to Mica out of pity. My entire being is unoriginal and dull, and my pen tips lacked both ins AND outs.

But from now on, I am totally hip and changed. I am brizinging more hot manga influence into my ludacris drawing style for added originality, and will make sure even my very tone of speech and sweet dialects carry the party down into the hizzouse.

Thanx dude, Bboy, for showing me the right path man. Peace out man!

http://img111.imageshack.us/img111/985/radiumisfunnycd2.png

I made a screenshot to show the grandkids :-).

The Bboy is leaking out of this picture :confused:

[Bboy Type7]

http://img111.imageshack.us/img111/985/radiumisfunnycd2.png

I made a screenshot to show the grandkids :-).

The Bboy is leaking out of this picture :confused:

hahahahaha nice drawing, but my wife wants it back. don't you mean your mom is leaking out?

[MoonBlazE]

My browser has given up on loading all these pictures of emo Chinese guys.

[Radium]

"The Radium Way"

LOL I don't know how long I laughed at that. You need a truly original style dude. What you call your style is unbelievably generic and dull. I don't feel like I'm gonna give a second look. Your inking is horrible. You got no "in" and "outs" for the pen tips. The whole work looks like one of those cheap flash CGs done by amateurs all the time. What makes you think you have the ability to produce something original?In all seriousness, though, sorry for the sarcasm, but something you missed was the idea that this thread was a tutorial on using the gradient features and brush settings in Illustrator CS2. If I was aiming for originality, I wouldn't be showing people how to do the exact same thing.

Regardless, I feel like from a sociological perspective your comment does bear its own value, as your views represent a fraction of society - possibly just you, <i>possibly</i> everyone but me . Something I have noted in a lot of eastern cartooning is that the lines tend to have very clean, uniform thickness, varying only between subject (such as using a thinner pen for background objects, hatched shading, or facial details). Is that what you mean by "in" and "outs"? That bit confused me. Presuming the above is correct, I'm rather curious if it's a cultural preference. In western cartooning, uniformity in line thickness is generally looked down upon. If differs elsewhere, it would be very valuable to know.

I'm also not entirely sure on what grounds you are comparing the linework to "cheap flash animations". From my experience, the amateur flash animations tend to use the pencil tool for lines, while the professionally produced ones usually favor the paintbrush. Again, perhaps it is cultural; a sickeningly Asian flash animation I've always liked, Nightmare City, uses solely the pencil tool for lines. I'd really appreciate if you explained further.

Alternatively, if the comment about cheap flash CGs was directed towards the apple... I feel for you.

[Erik]

blah blah blah

tl;dr

[Bboy Type7]

haha no worries man. relax, i ain't dissing you or anything, just giving u advice. maybe you should concentrate on writing a tutorial on how to CG, not how to do your own style. that's just so retarded. you claim you have an original cartoon style down, but it isn't there. it looks way too generic cartoon. good luck!

[Speeza]

I like the picture anyway :P. But It looks really complicated. But why did the poor parrot have to get cut ;(. This picture shows me that the gray bird man is just a bully and picks on smaller birds. Just because he has no friends and takes it out on others smaller than him to look good. I can see in the parrats eyes that it does however have a understanding of the gray bird man and is upset about getting cut.

But anyway. It looks cool

[Radium]

haha no worries man. relax, i ain't dissing you or anything, just giving u advice. maybe you should concentrate on writing a tutorial on how to CG, not how to do your own style. that's just so retarded. you claim you have an original cartoon style down, but it isn't there. it looks way too generic cartoon. good luck!Ah, well, it's slightly disappointing that my hypothesis about cultural preference in line weighting was incorrect and it turns out you just didn't read the thread past the title. I've got to stop believing in other people.

I like the picture anyway :P. But It looks really complicated. But why did the poor parrot have to get cut ;(. This picture shows me that the gray bird man is just a bully and picks on smaller birds. Just because he has no friends and takes it out on others smaller than him to look good. I can see in the parrats eyes that it does however have a understanding of the gray bird man and is upset about getting cut.Hahaha, You have no idea how much I loved reading this psychological interpretation of my cartoon birds. In fact, this is going into my sig since Stijn took out my gigantic asian hairstyle.

[Bboy Type7]

I agree with Speeza, very cool and nice art you made there. the background looks pretty stunning, good job with it. I like how the thunder emphasizes the attack from the gray bird man. first focus on finding your style. good luck bro.

[Stijn]

In western cartooning, uniformity in line thickness is generally looked down upon. If differs elsewhere, it would be very valuable to know.
Ligne claire?

http://begbie.files.wordpress.com/2007/07/blake_et_mortimer1.jpg
http://upload.wikimedia.org/wikipedia/en/0/03/General_alcazar.jpg
http://www.davidbordwell.net/blog/wp-content/uploads/swarte.jpg

(Edgar P. Jacobs, Hergé, Joost Swarte)

[Erik]

I believe I bring up an important point with this:

Radium, Y U gotta hate on a (-)?

[Radium]

Ligne claire?Ack, my lack of knowledge about European cartoonists is showing :(. Ignore my generalization about "Western", then; just "American" would be more accurate.

[Nonomu198]

Hahaha, You have no idea how much I loved reading this psychological interpretation of my cartoon birds.

Actually it's not that suprising if you look at his avatar and sig.

[nakke]

What makes you think you have the ability to produce something original?
haha no worries man. relax, i ain't dissing you or anything, just giving u advice.

I think you didn't pass Constructive Criticism 101 :/

[Bboy Type7]

or maybe mr.Radium doesn't really know what constructive criticism is. XD

[Stijn]

Well, if anyone on this forum knows what constructive criticism is, it's Mr. Radium.