This is a first attempt at bringing some illustrator goodness to anyone wanting to see how some of those groovy web 2.0 icons are created. I’ve not spent much time creating tutorials in the past, and this one assumes you already have a basic grasp of how to draw shapes and apply colours and gradient fills in Illustrator so it doesn’t show the construction in agonising detail. It does, however, offer the full original Illustrator CS3 file here for download so you can take it apart and see how things were done.
Right, today we are going to be creating a cool traffic cone icon – just perfect for using on those “under construction pages”. This tutorial was inspired by a photoshop tutorial I saw a while ago where a similar cone was created – one of the comments asked if there was a vector tutorial for the same drawing. There wasn’t – so I thought I’d draw the item myself and offer it as a tutorial.
Step 1 – Draw the base of the cone
OK, on with the drawing… The first thing to do is draw the base. This starts out as a rounded square, which we then rotate through 45 degrees to make a diamond. Then reset the bounding box (Object > Transform > Reset Bounding Box), and squash the diamond flat a little to get the shape into perspective (well, this isn’t really perpective, as we are viewing it almost isometrically, but you get the idea). Then apply a gradient, to end up with the shape we see below:
Step 2 – Give the base a bit of depth
OK, so now we have the basis for the bottom of the cone, lets copy this with cmd-c (ctrl-c on Windows) and place it behind the original with cmd-b (ctrl-b on Windows). Then just nudge it down a few steps to create the thickness of the base. Now at this stage you will find the outside of the base looks a bit crumby, and those gaps need filling in, so adjust the rearmost shape to suit, so you end up with something like this:
You will notice that I have applied a gradient fill to the lower base. It takes a bit of fiddling to get it in the right place, but it works very well and avoids having to draw an extra shape just for the front face of the base of the cone. You’ll see in a moment…
Step 3 – Putting the base together and adding a bit of polish
Now we’re motoring (or peddling, depending on your environmental inclinations). Looking at the two shapes together, we can now see how well they marry up to each other. That top surface looks a bit bleak, so we’re going to add some reflections to the front and introduce the effect of a slight blueish backlight from the right-hand rear. These two effects basically started out as a copy of the top shape, which was then hacked away and/or filled with another gradient, and the transparency/blending values tweaked to get the desired effect. Voila!
Step 4 – Build the tower
Still with us? Lets now start on the cone itself. This was constructed from two basic shapes – an ellipse, and a trapezoid. The base of the trapezoid is as wide as the ellipse. Now, before you go merging those two shapes together, keep a copy of the ellipse and the trapezoid on a separate layer as we’ll need them later. For now, we just merge the two shapes together using Illustrator’s Pathfinder tools. We should now have something that looks like this:
OK, too bland for us, so lets add some gradient goodness to give this sucker some depth. Copy the cone shape on top of itself using cmd-c and cmd-f (ctrl-c and ctrl-f in Windows) and apply an inner glow, and set the blend to multiply. You can also apply a gradient to this shape to give shadow to one side of the cone. Then, copy this whole shape again, on top of itself, but this time remove the inner glow, and move the gradient fill to the other side – this way we can apply a shadow to both the left and right side of the cone, as below:
Step 5 – The reflective banding
Now it’s time to bring that ellipse and trapezoid back that we put aside earlier. Using the ellipse, punch out the trapezoid to form the shapes of the bands. This will take a few steps in itself, so don’t forget to keep the original shapes handy as you’ll need them repeatedly. Once you have done this, you should end up with the following two shapes (shown in white):
The shapes now need a texture fill that roughly gives the impression of that criss-cross reflective weaving. This was created by making a couple of rectangles vertically offset from each other, with a gradient fill. These two shapes were then selected together and made into a fill pattern (Edit > Define Pattern…)
Now it’s time to fill the bands with the pattern we just made. Once this has been done we should have something like this:
Shuffle the layers around so the shadow layers we added previously are over the reflective white bands. This keeps the shading consistent.
Step 6 – Blue highlights to be added for backlighting
Not entirely necessary, but it all adds to the 3D effect, especially at larger sizes. Use the original cone shape again, and apply inner glow and also another gradient fill, this time including a slight blue hue on the right hand side. Again use Multiply blending to cast the blue colour shift over the underlying layers.
Step 7 – The bit on top
Just a couple of shapes to round off the top of the cone. I used an inner glow rather than a radial fill for the top ellipse.
Step 8 – The final gloss
OK, now we are almost there – just as we applied some sheen to the base of the cone, now it’s time to break out the polishing wax for the cone as well. I drew a single shape roughly as shown in the image below, and applied another simple gradient fill, and set the blending to screen, or lighten.
Well, that’s it folks. I know this tutorial doesn’t go into excruciating detail, but as you can download the original Illustrator file, then you can at least tear it apart and see all the horrible details for yourself. Please leave a comment if you found this tutorial in any way useful, and I may do some more.