Promotional Poster: Process

Hey everybody, and welcome to the tutorial no one really wanted about illustrating and coloring in flash. Well, partly in flash. Really, this is just about my current process for drawing stuff, and'll teach you how to go from this:

 to this :

Ready? Let's get started.

So first off, I start with a basic thumbnail ...in photoshop? Well, yeah. Flash is awesome and all, but because its a vector based program (it uses math to calculate your every stroke) as opposed to a raster based program (it uses pixels) you don't get the sort of cool opacity based doodling you'd get with a pencil ...or photoshop, since it emulates it pretty well. So I do my basic thumbs and pencils in photoshop.

On that note, once I'm satisfied with those thumbs, I do a second thumbs pass? well, this is weird and awkward. Normally, I'd go straight into pencils, but because this is a promotional illustration, I'm being extra careful. The reason for this is I'm a firm believer of making the next step easier for the next guy in the production pipeline, even if that person is yourself.  That way, that person can focus on what they're supposed to do instead of always defaulting back to you whenever they have a problem they can't understand.  So have a second round of thumbnails, this time fleshing out character details.  

Now that I have a more fleshed out thumbnail, we're going into "pencils" (said in quotes because this is digital).  I start with the furthest character back because its easier to focus on his lineweight being normal rather than starting with the character in the front and worrying if the front guy's lineweight is overpowering the back guys. Start in the back and you don't have that problem.

Let's see what that looks like. Hmmm... Looks good to me! Let's move on.

Now for the guy in the front. Its important to note that we're also establishing lighting with our characters and that its important to keep it consistent. You can have multiple light sources (and its important to use rim lighting to highlight parts of your character that are important to see but would normally be obscured by shadows), but in a pinch, keep it as simple as possible, to a single light source if need be. In this case, I'm implying that whatever's reflecting off his flashlight is illuminating both characters.

With them illustrated, its now time for the rat in the background. You may have noticed that there is a flow to the illustration onscreen. It goes from the Rat, to the Crimson Fly (the jumping character) to Officer Jones (the jumpsuited guy).  Or vice versa. This is called leading the eye and its pretty much what composition is all about.  When you lead the eye of the viewer, You tell them what to look at, and make it easier on them to know what parts of your piece to enjoy. This is important in all visual media (illustration, comics, film, video games) as the prettiest art in the world can still be boring if you don't know where to look.

Now that Pencils are done, we can import them into the properly set up flash file (for those who don't know, in Flash: file->"import to library"->select your file->open).  I don't import directly to the stage because I don't want flash to automatically turn it into a symbol that I have to rename. No, I take it from the library, and do it myself.

Now that its on the stage, I turn into a graphic symbol (select it -> F8) so I can change the color effect (on the right, in "properties") and turn down the opacity/alpha so I can ink over it.

With that done, I now repeat same process the pencils. Start in the back and move foward with my inks. I'm just using the regular brush tool, at the third circle size with the pressure and tilt settings turned on. Also important to note: I have the smoothing set to 40.  Smoothing is the amount of correction flash will apply to a single brush stroke. 100% is your old art professor fixing everything. 0% are those scraggles you made when you were 2 years old. I like to vary depending on the situation. When I'm roughing out animation, 30%. When I'm inking, 40%.

Now that the Fly is done, I turn to Officer Jones. Its worth noting that because my pencils were clean, I'm not having to guess what I was intending when I did the pencil. Making it that much easier for the next guy in the pipeline.

And now all the inks. It's time for coloring...welll... not yet.  First, we're going to fill in some grays to help the characters pop from the background when we add color.

Annd done. Now for some color. Here's where it gets tricky. I'm going to do some things that I would not recommend anybody else to do. Its more of a "follow the intent, not the letter" sort of thing. You with me?

The next thing I'm going to do is fill in the character colors.  This has more to do with the fact that I'm working in flash, than it says about my painting.  Its also about keeping things organized.  Filling in the character colors allows me to keep the characters popped out from the background rather than having them faded in.  Plus, having already done the grays, I don't have to worry about shading.

Now we add the background. I'm going to confess that its really rough for two reasons: 1. I didn't use my reference files (which you should have and use whenever possible) to draw this, and 2. I didn't really care about the environment as long as the characters popped out of it.  Which is bad. Don't do that. Establish your characters (they're what we focus on) and then use them to establish your environment.  These backgrounds are drawn at a lower opacity so they don't detract and distract from the characters.

Now that that's done, its time for some lighting! Another do as I say and not as I do: DON'T USE GRADIENTS. Yes, that's exactly what I did, but there's a good reason. Subjectively speaking, I make them look good (RE: SUBJECTIVELY SPEAKING. IF YOU DISAGREE, THAT'S TOTALLY COOL). Once you know how to work without them, its easier to use them. So do that first.

Now that we've established our basic lighting, let's give it some colored lighting. Something to establish both the mood of the environment, as well as separate it from the characters. First I start a gradient overlay, but that really isn't enough so I added a blue overlay on top of that.  You can see how this pushes the characters out of the environment.

Next we do an overlay over the entire composition.  This helps unify all the elements together, as well as separate it from any graphic design elements that we want audience members to read.  Just as with the environment, the first overlay really isn't enough, so we're going to push it with a second overlay.

Throw in a light for the flashlight, and the logo, and we're done!  Thank you for sticking around this long, and I hope you'll stay tuned for more process stuff from me!

The Crimson Fly: Promotional poster

I didn't really like that the profile picture on facebook was a sketch I'd done half a year ago.  Also, I want  to get some posters up in my school's animation building so I can get more people tracking this stuff.  So I made a poster that gives you the basic premise.

Much better, I think.  That said, there's no info on it yet, because, while I do want more publicity, I also want to be specific about the kind of publicity I want.  I like having you guys watch me work, but I also know that some of you guys may want to help, and aren't sure what you can do beyond promoting it. Well, to be honest, I'm not quite sure either. But when I do, I'll definitely let you know. In the meantime, enjoy this sweet poster.  It also serves as a preview as to what the comic is going to look like. Any questions? Drop a comment!

SPOILER WARNING: How to draw Hobo Joe, the rat

Disclaimer: This post, and the following post, deal with the main antagonist of this piece.  As such, this deals with spoilers.  Nothing plot related, but you can't really talk about the bad guy without mentioning the sort of details certain people would rather avoid. So if you don't like spoilers in any way, shape or form, AVOID THIS POST. THERE ARE NO STORY SPOILERS, BUT IF YOU DON'T WANT TALK ABOUT THE BAD GUY, AVOID THIS POST.

Alright. Let's talk about drawing Hobo Joe. 

Hobo Joe is a bit of a challenge when compared to drawing other Crimson Fly characters Not so much his body and legs, but his head; as it isn't based on any generic shapes, its kinda hard to simplify. That's not to say that it can't be done (I did it somehow)

With other characters, its easy to simply take that basic shape and start pretty much wherever you want on that characters's head. Not so with Hobo Joe.  With him, its better to start with the eyes and follow the specific order listed on the right.  There's a better way, and I'm going to do some tests with some guine-I mean, friends to see if I can refine this a little better.

His body is a lot less complicated.  His upper body is a mix between Jones and the Fly.  Blocky like Jones, but not so blocky that his joints "break" when he flexes. In that regard he's closer to the Fly. 

For his hands and feet, Well, they're a lot more delicate than they look. Sure, Joe will slice you to threads, but that's it. His claws are more for slashing than for smashing.  Also, his legs are very similar, in principle, to the Fly. In fact they're closer to dog legs than to an actual rat.

Well, that's it about Joe. Hope you didn't feel too spoiled by the new revelations.  Next week, we'll be examining the side characters! See you then!

SPOILER WARNING! Character Design: "Hobo Joe" the rat

Disclaimer: This post, and the following post, deal with the main antagonist of this piece.  As such, this deals with spoilers.  Nothing plot related, but you can't really talk about the bad guy without mentioning the sort of details certain people would rather avoid. So if you don't like spoilers in any way, shape or form, AVOID THIS POST. THERE ARE NO STORY SPOILERS, BUT IF YOU DON'T WANT TALK ABOUT THE BAD GUY, AVOID THIS POST.

And now for our antagonist! Meet "Hobo Joe" the rat! (It kind of goes without saying but: SPOILERS!)

Some notes about Hobo Joe:

• Hobo Joe is never referred to as such within the comic.
• Hobo Joe wears a hoodie. His meta-reason for owning it, is that I like hoodies. In-story? You'll have to read the comic later to find out!
• Hobo Joe is surprisingly picky about his food for something that lives in a sewer.

Hobo Joe is a monster of chaos and anarchy when compared to Officer Jones and the Crimson Fly.  His name comes from an earlier time in concept where the main antagonist was going to be a hobo with crazy fire powers. A friend told me that was stupid. I told them that they were stupid.  Then I thought about it and realized I was being stupid. And so I changed him.  Initially he was a lizard, but then I realized that Spider-man had already done that. Then he was a crocodile, but then I remembered that TMNT had already done that. So now he's a giant mutant rat (Which technically, turtles has already done, but Joe is not a ninja)

Next time: Learn how to draw Hobo Joe!