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!.