Clik here to view.
Today’s tutorial is a little special since it’s a part of a larger series meant to show some love for all of you Wizard of Oz fans out there. We’re going to recreate a character from the story, and not just any character—we’re going to have the honor of building Tin Man.
We are going to be using some of Adobe Illustrator’s basic shapes combined with the Pen Tool, but you shouldn’t worry, because the process is really straightforward. So if you have some basic Illustrator knowledge, you should ace it!
OK, let’s jump into
Illustrator and start creating!
1. Set Up the Document
First things first, let’s start by creating a New Document by either going to File> New or using the Control-N keyboard shortcut. We'll adjust some of its settings:
- Number of Artboards: 1
- Width: 800 px
- Height: 600 px
- Units: Pixels
And from the Advanced tab (which can be found under the little right-facing arrow):
- Color Mode: RGB
- Raster Effects: High (300 ppi)
- Align New Objects to Pixel Grid box: checked
Clik here to view.
2. Set Up Our Layers
Once we’ve created our little document, it’s time to layer it so that we can separate the different sections of the illustration, which will allow us to focus better later on when we start adding details.
Open up the Layerspanel, and create three layers. Let’s name them so that we know which one is which:
- wood frame
- character
- axe
Clik here to view.
3. Create the Wooden Frame
We will work our way up, from the wood frame layer all the way to the axe one, making sure to lock all but the layer that we are currently on. This will help you keep your shapes organized, while making things a lot easier to edit.
Step 1
The first layer that we are going to work on will be the circular wooden frame, on top of which we will then position the rest of our illustration.
So, assuming
that you’re on the wood frame layer, use the Ellipse Tool (L) to
create a 320 x 320 px circle, which we will color using #99847B.
We will then align the shape to the center of our Artboard using the Horizontal and Vertical Align Center options found underneath the Align panel.
Clik here to view.
Step 2
Next, let’s give the shape an outline by selecting it and then going to Object> Path > Offset Path and giving it an offset of 6 px.
Once you have the outline, change its color to
something darker (#453F3C) so that we can distinguish the two, and then select
both it and the previous shape and group them using the Control-G shortcut.
Clik here to view.
Step 3
We will be
creating a slighter smaller circle, just 280 x 280 px, which we will color using #806E67, and then position
on top of the previous one, making sure to center it, and then give it the same6 px outline.
As before, group the circle and its outline, since in the next step we will start adding details that will overlap with some of the shapes, making it harder to work if they aren’t grouped.
Clik here to view.
In case you’re wondering why we added this second piece, the reason is that the first circle will end up being our actual frame, while the smaller inner one will act as a background. If you don’t see it yet, well, let’s change that by adding some details.
Step 4
In this step we will add the vertical lines that will give the impression that our background is made out of wooden tiles.
To do that, simply select the Rectangle Tool (M) and create five 4 x 328 px shapes (#453F3C), which we
will position 48 px from one
another, making sure to group (Control-G)
and align them to the center of our circle afterwards.
Clik here to view.
Step 5
Once you have the first set of vertical lines, we need to create a copy (Control-C > Control-F) of them, which we will position towards the left side, so that the elements of the two groups sit side by side.
Since these will act as
shadows, we need to change their color to black (#000000) and set the Blending Mode to Multiply while lowering the Opacity
to 20%.
Clik here to view.
Step 6
Now, since we want both the vertical lines and shadows to cover up just the surface of the smaller circle, we will have to select create a copy of the circle (not the outline) and paste it over them.
Once we have the copy in place, we need to select it and our lines and then right click > Make Clipping Mask. This will mask the sections of the lines that go outside the surface of the circle, which is exactly what we wanted.
Clik here to view.
Step 7
As soon as we mask the lines, we can cut (Control-X) and paste (Control-F) them inside the inner circle group by double-clicking on it to enter Isolation Mode.
Clik here to view.
Step 8
Next, we need to add a small inner shadow, by creating two circles, one 280 x 280 px one, and one smaller 260 x 260 px one, which we will then extract from the larger one using Pathfinder’s Minus Front function.
Once we have the resulting shape, change its color to black (#000000) and set
its Blending Mode to Multiply while lowering its Opacity to 20%.
Clik here to view.
Step 9
Following the same process as with the ring-like shadow, we will be adding a circular highlight to the edge of the wooden frame (the larger circle, not the outline) by creating a 320 x 320 px ellipse, from which we will cut out a smaller 312 x 312 px one.
We will then set the
resulting shape’s color to white (#FFFFFF) and change its Blending Mode to Overlay,
while lowering the Opacity to 30%. You should also make sure to
position the highlight inside of the larger circle group, since we will be
adding more details along the way, and this way it will be easier to keep track
of your shapes.
Clik here to view.
Step 10
Since we now have a circular highlight, how about adding two vertical ones too? First, grab the Rectangle Tool (M) and create one wider 8 x 332 px shape, and one narrower 4 x 332 px one, position them 6 px from one another, and then place them in the illustration, a little towards the right side.
Clik here to view.
Step 11
Now, as we did with the previous vertical lines, we will mask the highlights, and then set their Blending Mode to Overlay while lowering the Opacity to 30%.
Clik here to view.
Step 12
This next step will require you to get a little creative, since we will start working on the wood detail lines.
First we will
have to go inside of the larger circle group by double-clicking on it in order
to enter IsolationMode, where using the Pen Tool (P) we will start drawing little
curved lines. We have to make sure to set the weight of the lines to 2 px and color them using the same tint
used for the outline (#453F3C).
Once you’re done, your design should look something like this.
Clik here to view.
Normally we would need to add the wood detail lines to the inner section of our frame, but since we don’t have the silhouette of our character drawn yet, it will be easier to leave it as it is for now, and come back later on once we have everything laid out.
4. Create Tin Man
From this point on, we will focus on creating the character, but I’m going to switch things up a little bit.
If you've read some of my previous tutorials, you might have noticed that I usually go all nuts with numbers, positioning, etc. While there’s nothing wrong with that, I felt that for this tutorial, I had to do things a little bit differently since I want to get you in a more creative state of mind, and actually see you express yourself by giving you some pointers here and there.
That being said, grab a cup of coffee or tea, and as the Great Oz put it, “You have plenty of courage, all you need is confidence in yourself.”
Step 1
First, make sure
that you’re on the character layer, and using the Pen Tool (P) let’s start working on Tin Man’s metal collar by
drawing a trapeze-like shape that we will color using #CCC4C4.
As you can see, I’ve drawn a relatively large shape in terms of width, and positioned it towards the bottom-center side of my inner circles, since we will have to mask it later on.
Clik here to view.
Step 2
Next we need to add an outline to the collar by
selecting it and then going to Object> Path > Offset Path and applying an offset of 6 px to it. Since the outline has to stand out from the inner fill,
we will have to change its color to #453F3C.
Clik here to view.
Step 3
Once we have the bottom section of our collar, we can start working on its top side by adding an ellipse shape that will act as the inner section, and then give it that 6 px outline.
Clik here to view.
Step 4
Next, we will be
adding a subtle shadow to the top side of the inner collar element that we’ve
just created. I recommend you use the Pen
Tool (P) and draw a path that is narrower towards the top, but then comes
out wider toward the edges. Once you’ve drawn the path, simply change its color
to black (#000000) and then set its Blending
Mode to Multiply while lowering
the Opacity to 20%.
Since the shape will go outside of the surface of the ellipse, we will need to create a copy of the ellipse itself and use it as a clipping mask for our shadow.
Clik here to view.
Step 5
Using the Pen Tool (P) start adding some details to the lower section of the collar by creating some highlights. Then use the Ellipse Tool (L) to add a little round highlight that we will tilt slightly towards the left.
Make sure that once you’re done adding the details, you position them underneath the top ellipse, by selecting the lower part of the collar and the highlights and then right click > Arrange > Send to Back.
Clik here to view.
Step 6
Once you’re done
adding the highlights, we need to add the little bolts and the vertical divider.
First grab the Ellipse Tool (L) and
create four 6 x 6 px circles (#453F3C)
and position them evenly at a distance of 4 px from one another. Group the bolts (Control-G) and then align them to the center of the bottom section of our collar,
pushing them a little towards the right side.
Add a 4 x 48 px rectangle (#453F3C) to their
right and a smaller 2 x 48 px shadow
right next to the divider.
Also, at this point it would be a good idea to select all of the collar’s shapes and group them (Control-G) so that things don’t end up flying around.
Clik here to view.
Quick note: keep in mind that some of the values indicated above might vary since your dimensions will be different from mine. That being said, don’t get discouraged—try to use what I’ve used, and adjust the shapes as you need to.
Step 7
Since we’re done working on the collar, we can now start focusing on the neck.
As always, the first thing we need to do is create the main fill section. Draw a rectangle and push its top anchor points slightly towards the inside.
Color the shape using #CCC4C4 and then position
it towards the bottom-center of the collar’s ellipse.
Clik here to view.
Step 8
Once you have the base for the neck in place, give it
an outline, and set the new shape’s color to #453F3C. It might be a good idea
to group the two (Control-G) since
we will have to make some adjustments in the next step.
Clik here to view.
Step 9
At this point, you might have noticed that the bottom sides of our neck’s inner shape and outline are going outside the ellipse’s surface, which is something that we need to correct.
Clik here to view.
The simplest solution is to select and create a copy of the collar’s ellipse (not the outline) and then remove its top anchor point by selection and pressing Delete. Then using the Pen Tool (P) continue drawing the shape, creating a top section that goes over the top side of our neck’s outline. Then we simply select both the neck and the outline and create a clipping mask.
Clik here to view.
Step 10
Once we’ve fixed the neck, we can start adding some details such as the horizontal line dividers and some highlights and shadows. Please keep in mind that once you start working on the details you first have to go inside the neck group, since otherwise you might lose things.
Also, you will have to group all of your details and mask them using the neck's inner section, since otherwise they will go outside its surface.
Clik here to view.
Step 11
Since we’re basically done with the neck, we can now move on to the head itself.
I started working on the head by first drawing a 92 x 134 px rectangle with a 46 px Corner Radius which I then adjusted by playing with its anchor points.
The shape that you will be going for will have a slightly flatter top section, while the bottom one will look a little elongated.
Take your time and play around with it until you
have a nice looking shape, and then color it using #CCC4C4 and position it above
the neck so that it goes ever so slightly over it.
Clik here to view.
Step 12
Give the head an outline, and then start adding the eyes, nose and mouth to it.
Clik here to view.
Step 13
Once you have the eyes, mouth and nose in place, it’s time to start adding the ears.
In my
illustration, I’ve created the ears by drawing two 10 x 26 px rectangles (#968F8E) with a 5 px Corner Radius, to which I’ve applied a 6 px offset path effect in order to get the outlines.
I then changed the outline color to #453F3C and
positioned a pair on each side using the eyes as reference points, making sure
to send them to the back of the head itself.
Clik here to view.
Step 14
As soon as we’re done creating the ears, we can start drawing the funnel hat.
So, using the Pen Tool (P), start tracing the bottom section of the hat, making it
just a couple of pixels wider than the head itself. Color the shape using #968F8Eand then give it an outline.
Clik here to view.
Step 15
Next, we will continue by drawing the top
section of the hat. We will have to make sure that the bottom anchor points
align themselves nicely with the top ones on the shape that we’ve just created.
Once you’ve traced the shape, color it using #7B7472 and of course, give it an
outline.
Clik here to view.
Step 16
Since the original hat had a handle, we need to make sure to add one to ours as well.
Using the Ellipse Tool (L) create a 28 x 28 px circle (#968F8E), and then
flip its fill with its stroke by pressing Shift-X.
Since our circle should now be a ring, we need to adjust its weight by setting it to 4 px. Then, simply expand the shape by going to Object > Expand > Fill and Stroke and give the resulting shape an offset path of 6 px.
Finally, group (Control-G) both the fill and outline and position the handle to the right of the hat.
Clik here to view.
Step 17
Once we’ve finished working on the hat, we can start adding finer details to our character, by adding highlights, shadows, and a couple of bolts and dividers to give it that metal look. Take your time, and be as detailed as possible.
Clik here to view.
Step 18
Once you’ve finished adding the details, you might notice that the bottom section of the collar is going outside the surface of the interior wood section. Since we want it to be framed inside it, we will first group (Control-G) all the elements that form our character and then mask it using a 280 x 280 px circle that we will position on top.
Clik here to view.
Step 19
But hold on, something feels wrong, as if we’re missing a piece.
Well Dorothy, we are. Since I thought we should first focus on the main components of the character, I left the cherry for the end. If you still don’t know what I’m talking about, I’ll let you know—it’s the bow.
So get back in there, and draw a nice-looking
bow, which we will color using #ED7161 and then position over the collar
towards its bottom side.
Clik here to view.
Step 20
Before we move on to the last piece of our illustration, we will first have to take a couple of minutes and work on our wood lines, which we need to position within the second circle group. As before, use a 2 px stroke weight and play around until you have some nice-looking lines.
Now, since the details need to go onto the wood frame layer, you will have to lock the character one, and work inside the previously mentioned one.
Clik here to view.
5. Create the Axe
We are now down to our last segment of the illustration, which is Tin Man’s signature piece, the axe.
If you've read the story then you know that Tin Man (which should actually be Tin Woodsman), wasn’t originally made out of metal. Instead he was a real person like me and you, named Nick Chopper. He used to make his living by chopping down trees in the forests of Oz.
Now, to make a long story short, he had some beef with the Wicked Witch of the East which enchanted his axe in such a way that it chopped off his limbs one by one, but instead of dying he somehow magically replaced them with tin prosthetic limbs.
Ok, so you now know why the axe is so important. Let's start creating it.
Step 1
First let’s lock all the other layers, all but the axe one, and using the Pen Tool (P) start drawing the wooden handle.
Try to get a
more organic feel to it, and once you have something that you think looks nice,
color it using #806E67 and give it a 6
px outline (#453F3C) using the offset path effect.
With both the inner section and outline selected, group them (Control-G) and then position them towards the bottom side of the wooden frame so that they end up masking about half of the surface of the bow.
Clik here to view.
Now, in case your outline gets a little funky like mine did, don’t worry—we will make that side overlap with the blade, so everything will turn out fine.
Step 2
Okay, so now that we have the handle, how about adding some details to it, such as the wood lines, a top highlight and a bottom shadow?
Clik here to view.
Step 3
Let’s start
working on the blade, by creating a 24 x
40 px rectangle (#B1A9A9) with a Corner
Radius of 2 px. We will adjust
the shape by selecting its bottom center anchor points using the Direct Selection Tool (A) and then
deleting them by pressing Delete.
Then, using the Pen Tool (P), continue the shape by drawing the bottom section of the blade, making sure to close the path that you’ve traced.
Clik here to view.
Step 4
Once you have a nice-looking blade, give it an outline and then position it on the right side of the handle, making sure to mask any imperfections created by the handle’s outline.
Clik here to view.
That's It, Folks!
Start adding a couple of highlights and shadows to the blade, and you should be all done.
I hope that you had fun doing this little tutorial, and I’m looking forward to seeing your final results, so don’t keep me waiting!
Clik here to view.
Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.