Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month. You can view the final artwork, the final website design at full-size, or visit the live site.

Step 1 - Looking at a Wordpress Theme

Below is my Wordpress theme, as you see the theme consists of a few zones, like the "header." Here I want to change the background header image and post something that can express more about me as designer and illustrator as well.

Step 2 - Start with Sketching on Paper, No Digital Here!

I always start with a few sketches on papers. This really help me to focus some ideas better and have something to trace afterwards in Illustrator. Here a fun video I did for this tutorial.

Step 3 - The Sketches

So my idea is to create a strange future world with robot workers and a girl as commander. Preliminary sketches are shown below.

The image below shows the final pencil sketch to post in Illustrator as a template.

Step 4 - Start with Illustrator CS4

Now I'm ready to sit down in front my PC and start with Adobe Illustrator CS4. I open a new document and place the sketch as a template (by double-clicking on the layer and checking Template).

Now I create a new layer above the "template" layer. Then I start to trace the basic sketch lines. I always trace with the Pen Tool palette open to work faster (little tip).

Follow the first steps in the video below.

Step 5 - Inking

With the Pen Tool, I make the black inking; I like to refer to this as inks because I'm into comic book art. See the video below.

In the end, you can see the layer with the characters inks.

Also, see under the background layer ink.

The "template sketch" layer doesn't need to be used anymore, so I deleted it. Here all all the layers placed together.

Step 6 - Basic Color Steps

After inking, I need some basic color, here is the "basic color characters" layer.

Under the background basic color is shown below.

Here are all the basic color layers together.

Step 7 - Depth and Shadow

After the basic colors, I need some depth and shadow to make the illustration more real. Here is a quick study on how the light will fall within this illustration.

I return in illustrator and i start to trace the shadows where needed. For those I often copy and paste the shapes then apply Divide from the pathfinder palette.

In the end the final image is shown below, or view the final artwork.

Step 8 - Saving Images for Wordpress

From this image, I needed two parts for my Wordpress theme, one for the header and one for the body. With the guides I draw the two zones.

After placing the guides, I create the slices by going to Object > Slice > Create From Guides.

Now I save the two images by going to File > Save For Web (I'm only saving the images and no html). Then I upload the final exported image into the Wordpress theme fold. Now it's ready to be coded into the theme.

Conclusion

You can see the final results below, which has been fully integrated into the final Wordpress theme. You can view the final artwork, the final website design at full-size, or visit the live site.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.