Unless you’re playing the text-based adventure game “Zork,” games need graphics.

At Rockupied, we take a three-pronged approach to animation: we create a character or object in Adobe Illustrator, cut it out and separate moving pieces using Adobe Photoshop, and animate characters using Adobe After Effects.

This is the first of three posts where I’ll be showing a super quick demonstration of the type of animation that we do. It’s an extremely quick and dirty foray into graphic design.

Adobe Illustrator is one of the best programs out there for graphic design. It uses vector-based graphics that allow images to be scaled bigger or smaller without losing quality. Basically, it’s a great program to draw stuff in, and it’s what we exclusively use at Rockupied.

Here’s a final image of the character that I’m going to make in Adobe Illustrator:

I call him “Lil’ Bob.”

To make Lil’ Bob, I started with a circle that I created

using the ellipse tool:

Lil’ Bob needs facial features, so I used the brush tool to give him eyebrows, a mouth, ears, and a chin dimple. These features aren’t actually going to actually move, but they give our circle more character. If your marks aren’t showing up, they might simply be the same stroke color as the image you’re drawing on. Your brush marks might also be going behind the object since Illustrator uses a layering system relatively similar to Photoshop.

Layers allow us to put things behind or in front of one another. For example, if I had a backpack on and you were looking at me from the front, you probably wouldn’t be able to see much of that backpack. You could see the straps (a layer that would have to be in front of my body), but you wouldn’t be able to see the backpack itself. Although, you would be able to see the top of it. With layers, we can create that image convincingly by piling things on top of each other with the top layer first.

I quickly scribbled out a hair piece using the brush tool and then joined the two ends to complete the shape (more on that later). With the “Fill” selector shown in the top left corner of the image below, I made the hair brown. I did the same sort of operations to make the eyes.

Lil’ Bob needs a body because he’s not supposed to

be a disembodied head. So, using the brush tool, I drew a simple body and arm. The feet are just ovals made using the ellipse tool.

The image below shows the joining of Lil’ Bob’s body so that I may then fill it in (the same type of operation I did to complete the hair piece and eyes from earlier). Illustrator uses vector graphics. This basically means that the area of my image is calculated by using the points that make it up. The curves that these connected vectors make gives me a basis for filling in the shape. Therefore, Illustrator has no “paint bucket” tool like many other popular graphics design programs.

This means that, to get a shape fully filled in, the shape needs to be completely closed. So, I’ve selected the endpoints of my body section using the Direct Selection Tool (shown in the top left corner of the image below), right-clicked and selected “join.”

To color Lil’ Bob in, I clicked on each individual section of him and used the fill menu (shown in the top left corner of the image below) to give each of his parts different colors. Here, I’m just about to fill in the color of his feet.

These last two parts are entirely optional, but they will definitely liven-up our character.

By going to the Object menu (top menu bar) and clicking on “Create Gradient Mesh” I can give completed shapes of an object that I’ve selected specific highlights that make them look more 3-dimensional. Using this tool can mean the difference between having a character that looks like a cardboard cutout as opposed to having a character that looks entirely flat.

Also, I added in a sword for good measure (it will be easier to see Lil’ Bob’s hand animate in a later post if he has something in it).

Again, this is a really quick and dirty way to get started, but we need something to animate! The next graphic design blog post will be about separating Lil’ Bob’s pieces and bringing them into Photoshop.

Go make your own Lil’ Bob and get ready to tear him apart (quite literally) in the next post!

- Bryan