Published on November 18, 2004 By d3adz0mbie In DesktopX Tutorials
I've been pretty outspoken lately about the quality of Stardocks DesktopX widgets. After writing up 5 articles about how DesktopX could be improved, I figured it was time to give something to DesktopX users instead of just running my mouth. So a new DesktopX widget was devised.

Brad Wardell, top dog at Stardock and resident celebrity, directed me to Martin Conroy for help. Martin is pretty much a genius with DesktopX widgets, and was able to piece together a rough draft of my idea in no time at all. Now it was my time to put up or shut up! This record is something for those of you that wonder how icons are made to get a little insight into what's goes on behind the scenes. And for you icon artists better than me (and there are plenty of you) to give me tips and pointers to make my icon work go smoother, or perhaps turn out a little cleaner.

I started with an idea of what I wanted the icon to be. The widget being made delivered 'secret' messages from the Illuminati to a users desktop. So I went with a symbol that millions of people come into contact everyday, the All Seeing Eye:


Look familiar? It should, it's on the back of every One dollar bill in the USA. But this was too rough, I wanted something a little more attractive, so I opened up CAD and created a rough sketch:


I added a little perspective to give the icon depth. This sketch was saved into a format Photoshop could read, then used as my guide for the actual creation process. Here, I add solid shapes under the guide for a background to the pyramid base, with a little shading (I know my light source will come from the top of the pyramid):
||

Now I've got a solid pyramid shape, but no detail. Bricks on the pyramid were the next thing. The bricks are nothing more than shapes with bevel filters and a gradient over them. I really don't like bevels, but in this case they worked out pretty well. Here's the front:
|

More shapes for the left side, darker gradients and a shift in the bevel angle. Once the left side was done, I cut corners and mirrored it over to the right side by copying the layer folder and giving it a horizontal transform:
|

Now I added the top bricks. In the guide I show the top divided by a dual layer of bricks, but I decide to go with a single brick for the top, I know I'm going to drop some sort of eye on this later. After the bricks it's time to turn the guide off and add a shadow to the base of the pyramid to give it some volume:
|

This is where it gets a little fun. I love lighting, and I wish I was better at highlights than I am. The All Seeing Eye is a mystical symbol, and should have interesting shadows and highlights streaking across it to give it a metaphysical look. I add a single curved shadow to the front (which doesn't make sense, but looks cool) and curved shadows to each side. What's casting those dark shadows? I don't know, but I'm certain it's ominous:
|

To continue with the lighting, I need to add the halo effect that will be coming from behind the actual eye on the pyramid. So I add a few streaks from the top, and a few coming from the back:
|

That looks ok on a white background, but not everyone uses a white desktop. So I add a few additional background types to work over, and decide some white lighting mixed in would add to the effect:
|

Now comes the hard part. I never actually claimed to be an artist. I do technical design for a living, so drawing an organics eye isn't my thing. Up until now this has been pretty straightforward work with solid shapes and gradients. My first attempt at an eye uses basic shapes and is discarded immediately. It sucks. To try to get artistic, I take a creative license and try my hand at adding another symbol, the Eye of Ra:
|

Ack! So I try my hand at another eye, and this one seems to work. A little adjustment in the position of the pyramid top and things are coming together. Notice the original image from the dollar bill has text at the bottom, so I add some of my own:
|

After deciding the text doesn't work and giving it the axe, we have the original icon as it was released. After seeing it posted on a website, I went back and shifted the color hue a little more into the reds to give it warmth and a little more depth:
|

At this point it's just a matter of hiding the image background and saving just the image as a 128x128 transparent .png. Drag and drop the .png file into Iconworkshop or Aves Iconvertor and you have an icon ready to distribute!

So there you have it, the fun and interesting world of making icons. You can find the icon for download at WinCustomize and the resulting DesktopX widget, Illuminati!.
Comments
on Nov 18, 2004

Suggestion - make this a tutorial - i.e. change the category to tutorial and the sub-category (topic) to DesktopX. Then it'll show up in tutorials in the DesktopX area on the new WC.

 

Great article btw.

on Nov 18, 2004
Thanks for the tip Brad. I'd set up my WinCustomize site tonight, but now my wife's recruited me for a yearbook logo. Kids... if they only knew that as much as they work at school, parents are in the background working just as hard. You gotta love em.
on Nov 18, 2004
zombie: I don't know anything about any of this stuff, but this was a really interesting article. I enjoyed reading your thought process as you worked to create it, and then seeing your ideas implemented and changed and tweaked. Very cool.
on Nov 18, 2004
Very nice tutorial...the symbol is actually one of the very old Masonic symbols. I'm definitely looking forward to seeing more from you, Sir Zombie.
on Nov 18, 2004
Yeah, I agree with the Doc about the level of interest this article could generate. Isn't there a way to rate articles?
on Dec 16, 2004
Good tutorial dude, thanks
on Dec 16, 2004
Thanks for the good comments. I will hopefully have another icon tutorial out by the end of the year.
on Jan 02, 2005
could you make a tutorial on how to do the stuff you did? or send me an e-mail? it isnt all that detailed on how to do it.

Email

on Apr 04, 2006
I want mp3 player. What will advise?
on Apr 04, 2006
I would relly love to see this, but the images aren't showing up . Right clicking to view them brings me to a 404 . I will keep checking back .
on Apr 11, 2006
Hi
To write the letter, it is necessary ...
on May 16, 2006
I thought the tutorial was very detailed but the pictures did not show up. I think that with the pictures on I could maybe try this and I have never made anthing like that before...total novice among the very experienced. sprinkle

Posted via WinCustomize Browser/Stardock Central