29/01/2010 - Editorial.Iconshock

icon tutorial: Administrator icon using Illustrator

Hello.! In this tutorial we will pursuit 2 main goals: first, we will make an administrator icon in Clean Web 2.0 style, having as a tool Adobe Illustrator CS4. Second, we will experience the process of mixing a daily reality of the corporate world with some of the concepts of what we call Web 2.0 The man with a tie comes from a very complex world, now you will translate it to a cleansed, catching and easy to understand point of view.

Fig. 17

Step 1.

Open a new document in Illustrator CS4. Set the size to 500 x 500 pixels (later you can resize it to fit your needs).

Step 2.

Draw a circle and remove the stroke. Fill it using a gradient, radial type; see image below for RGB values. Fig. 1

Step 3.

Now select the bright sun you just created, copy and paste in the same place (Ctrl/Command+C, Ctrl/Command+F) Then resize it to be slightly smaller than the original. Fill it with a single color as shown below.

step0024

Step 4.

Copy and paste in place this smaller circle again (Ctrl/Command+C, Ctrl/Command+F). Give it a radial gradient as shown below. Note that both sliders have the same color, but one of them has been set to 0% opacity. This way we add inner light to the gorgeous head.

step0035

Step 5.

Now it’s time to put some reflections. Do the shape by copying and pasting in front once again the smaller circle, then making an oval and selecting both figures in order to divide them using Divide tool on the Pathfinder panel. After the path operation is done, press Shift+Crtl/Command+G to ungroup all the pieces and delete those that won’t be used.

step0045

Step 6.

Now add a radial gradient to this shape. See the image below. Note again that one of the handlers has 0% opacity.

step0065

Step 7.

One more time use the small circle (select, copy and paste in front). Leave it without fill and put a bold white stroke (5 pt will be fine). Open the transparency panel and set opacity to 73%.

step0074

Step 8.

Next, do the neck. This is just as easy as drawing a rectangle wide enough, filling it with the color specified below and cutting the corners (later we will put the shirt over this zone). Send the neck backwards (Object – Arrange – Send to back). If you started with a big head, like in this tutorial, you may want to group all the elements and scale to a smaller size. If so, don't forget to check the Scale Strokes and Effects option at the Transform panel.

step0084

Good job. There is now a brilliant clean head full of ideas. Let’s now give it a noble office portrayal.

Step 9.

The body is simple to make but it needs however a bit of fine adjusting in order to give a correct look. The following image shows that the basic shape comes from a circle. Then you just drag the upper and bottom nodes as needed. Finally apply a light gray fill.

step0094

Step 10.

As in step 4, use a smaller version of the body to give inner light.

step0104

Step 11.

Like in step 6, make a new copy of the small shape, remove fill and add a white bold stroke to a new copy . See the settings below:

step0114

Step 12.

Use an oval for reflections. In this case you may want to add a couple of points to better adjust that shape. Apply a radial gradient as in step 6.

step0124

The employee of the month is about to be ready for work. Put the final details on place.

Step 13.

This time you will have to use the Pen Tool. Drawing the tie isn’t difficult at all. Just click some 5 points, and pay attention to the Stroke settings: round cap and round join. Fill and stroke colors are the same.

step0134

Step 14.

Use the same tie shape again (copy and paste in front) to give light. The linear gradient used here has both handlers set to the same blue but one of them is 100% transparent.

step0144

Step 15.

It’s 7:20 a.m. Time to finish placing the shirt. Use the Pen Tool to make a 4 points shape. Use white fill, bold gray stroke as shown below. Once made, select it, copy and paste in front. Use Transform – Reflect to make a mirrored shape and put them around the tie.

step0154

Step 16.

A convenient shadow can be made by using the body and tie shapes. Use the Unite operation at the Pathfinder panel to make a single shape, use a dark fill, and then apply some blur (Effect – Blur – Gaussian Blur). Send the shape to back.

step0164

step0174

Now you have created a proactive administrator with the style of Web 2.0 - Well done! It should look great on your screen. If possible, make some variations and then go spread your inner magic outside the computer.

Fig. 17

Got any question? Any obscure step you cannot deal with? Drop a comment. One solution might arise.

If you would create something, you must be something.
Johann Wolfgang von Goethe

ThemeShock

11 Responses to “icon tutorial: Administrator icon using Illustrator”

  1. SherwoodNo Gravatar
    August 3rd

    Awesome….as soon as I get my program running, I’ll be trying this! Thanks for showing us how to make an icon…:) Sweet

  2. SherwoodNo Gravatar
    August 4th

    Awesome….as soon as I get my program running, I’ll be trying this! Thanks for showing us how to make an icon…:) Sweet
    Oops…forgot to say great post! Looking forward to your next one.

  3. Jjay
    August 5th

    I dream of CS4 but its still useful for illustrator, very nicely detailed n illustrated. Gj team IS

  4. iconoclastNo Gravatar
    August 6th

    G – I tried this tutorial with Pse and with Visio… am a bit handicapped without Illustrator… but had success, nonetheless. Really cool!

  5. Blogger.IconshockNo Gravatar
    August 7th

    Glad to hear IC! I did not make this tut though. Its a collaborative work of our designers. More will be coming!

  6. Chris
    October 23rd

    Lame tutorial. Yuck!

Leave a Reply

*