Illustrator: The wizard's hat

by Kahlil Gibran

Welcome back to the virtual space where some of the secrets for creating iconic beauties are unveiled.

The word 'wizard' has its root on concepts like wisdom and guidance. Most probably that's the reason why those helping user interface elements, the assistants, are also called wizards and are represented by default with a wizard's hat and wand icon.

The spell will be performed using Illustrator CS4.

Step 01.

Start with a new 256 x256 px document. The brim of the hat will be an ellipse (A) with a small rotation (B). Duplicate that ellipse, reduce its size and place as the inner part of the hat. To help visualize the perspective you can use a line segment as an axis or reference.

Note: When talking about 'duplicating' an object, we will refer to the procedure of copying (Crtl+C) and pasting in front (Shift+Crtl+V).

Step 02.

Now duplicate the smallest ellipse. This will be used to make the cone of the hat. The idea is to move upwards the top anchor point, however, in order to make a round corner, first create a new anchor point near to that one using the Add Anchor Point Tool. Move those two points to the end of our guide axis and adjust the outer handles of both points until you get a cone like in figure B.

Step 03.

A) Apply a basic gradient fill to the cone. RGB values here are: (13, 59, 96) and (4, 33, 66).

B) Draw a triangle with the Pen Tool, this will be the shine. Fill with color (84, 151, 192). Keep this triangle selected, bring on the Appearance Panel (Shift+F6) and press there the Add New Effect Button. From the drop down menu, go to Blur - Gaussian Blur and use 5.0 pixels for radius.

C) The shine is almost ready but it flows over the brim area. Let's mask it. Duplicate the base cone and place it on top of the triangle so that you do not see the light blue triangle. Select both cone copy and triangle and press Crtl+7 (Make Clipping Mask).

D) The base cone will disappear but its shape is now a kind of window through which you can see the shine, with no overflowing. We will use this technique several times along this tutorial.

 

Step 04.

Now make a new duplicate of the cone, remove the fill and use a 2 pts stroke with color (4, 33, 66). Apply a 2.0 radius Gaussian Blur. Finally use another cone as a clipping mask for this inner shadow. (click image for enlargement)

 

Step 05.

Let's now work on the brim. Remove the initial stroke and apply a gradient like that used in step 03, part A. Then duplicate that oval, send it to back and apply a solid fill with the light blue of step 03, part B. move it a bit down-left.

NEXT PAGE: Add power by drawing some stars of 5 points.

 

... continues on the next page!