Musings on, Art, Skinning, Computers, and the True meaning of Life. (AKA The Lego Theory)
A Icon a day Keeps the Creative Block away. (I hope)
Published on January 8, 2005 By mormegil In OS Customization

An Icon a day Keeps the Creative Block away. (I hope)   

    As some of you may have noticed, and gotten mad at me for, I have not had a new free Iconpack out for quite some time. This is not so much because I have been doing Premium Suites, it's because I just have not been able to find any time. Since I have started working at Stardock, over a year ago now, I have been doing a lot of fun stuff at work. Making video game UI's, Skins, and 3D. This has been sapping the amount of creativity I have left when I get home. Not to mention my cursed time sucking addiction of Halo 2.

    This brings me to the point of this blog. Starting today, I am going to find some time every day to make one (1) Icon. This will give us a new complete Iconpack in about 60 days.

Here is my plan.
    1) Design 1 Icon a day, starting with the folder. (Can't help but do this)
    2) Post that Icon in the
Misc Icons section over on wincustomize. This way anyone who wants to can get the Icons as they are made, and not have to wait for the completed pack.
    3) Post a short blog on the making of each Icon. This hopefully will allow for feedback from users, and help make the pack better.

With that lets get started.
 

Icon 01 (Closed folder)

   The folder is always one of the hardest Icons to do. It sets the style for the entire pack of Icons. I tend to spend the most time on the folder Icon, but I am going to force myself to crank this one out. Because this is the first article in this series I am going to show a bit more of the "making of" than I will have time to do in the future.
   I am going to be using CorelDraw to do all the designing in this pack; if you want you can get a free trial copy at
www.corel.com. If you are more comfortable with other graphics programs hopefully you will be able to get the basics of what I am doing and translate it into that programs tool set.
   One last thing; I am going to be referring to a lot of tools and techniques over the life of this blog series and I won't have time to describe them in these articles. I will try and do some individual tutorials on how I use each tool and technique as time goes by, if requested.
 
Step 1:

Using the Rectangle Tool, I Draw a 1.28 x 1.28 box. I use this to make sure to keep my Icon in a square aspect, and so the Icon dose not become stretched or distorted when I make it.
Then I create another rectangle and, using the Mesh fill tool, "Sculpt" it into the back side of my folder.

Step 2:

Using the Mesh fill tool I go in and do some detail. In this case I am adding in some bevels and gradients. I am winging this, so I think I will go ahead and make the back black. I am going to go with a metal and composite look for this. I am doing a lot of this in the Galactic Civilizations GUI, and am in that kind of mood. Plus maybe in the process of making this pack I can use some of the ideas in the game screens, and vice versa.
 

 
Step 3:

I want some texture in all of these Icons because I am in that kind of mode at the moment, plus it is a simple technique that can make for a nice rich feel. I don't have a lot of time for these Icons, and I will be using allot of the more popular looks.
So using the interactive transparency tool, I take a copy of the back of the folder. Change it to 30% black and add a stretched wave texture, setting the transparency to Multiply.

Step 4:

Now following the same steps as in Step 1, I use another rectangle and the Mesh tool to mold it into the shape I want the folder front to be.
As in Step 2, I use the mesh fill tool to give the folder front some detail.

Step 5:

Now I use the same steps as in Step 3 to make transparent texture over the front part of the folder.
Then I draw some of the obligatory white glare on the front of the folder and the tab. Then use the Interactive Transparency tool to fade it out from top to bottom. Giving us that Shiny look.

Step 6:

Now I just draw a black shape that I can use to pull a drop shadow off of for my shadow. I am having to do the shadow this way because I want it to look slanted back, and I don't want the standard shadows.
The only trick here is to set the shadows opacity to 100% so I can do something with it in the next step.

Step 7:

Now I break the shadow apart from the shadow shape I drew and delete the shape. Then using the Interactive Transparency tool I fade the shadow out. Also using Arrange I send the shadow to the back of the folder.

Step 8:

I see a lot of people do a reflection of their icon in their screen shots, but I thought it might be fun to try and do it in all the Icons of this pack. So lets do it.
To do this I simply copy the elements of my folder, Flip, Move,  and Skew them into the location I want. Then convert them into a bitmap (24 bit RGB).

Step 9:

Now to get that reflected look, I can simply crop the created bitmap to fit inside my guide box, and using the Interactive Transparency tool fade it out.

Finished Icon image.




Download the finished Icon.

Now I use IconDeveloper, or other Icon program, to create the Icon. There are several other tutorials out there telling you how to do that so I will make you look them up. For this pack, in the interest of not limiting what we can design, I have decided to only do 32 bit Icons for Windows XP.

So there we go, Icon # 1 is done. You can download it here if you want to play with it.

Tomorrow. I will do the Default File Icon. This is another of those Icons that sets the mood of the entire pack.

And don't forget to check for all the Icon-A-Day icons as they get made, in the
miscellaneous Icons Gallery at Wincustomize.com


Comments (Page 1)
2 Pages1 2 
on Jan 08, 2005
This just amazes me....I am in awe at the abilities of folks that create icons.
on Jan 08, 2005
Hey...you're pretty cool!
on Jan 08, 2005
Awesome idea Mormegil. I'll have something to look forward to everyday for the next 60 or so days...

Love your work.
on Jan 09, 2005
Fantastic idea, man.

Looking forward to each day on this one. I use Illustrator, so I think I will be learning some very valuable ideas.

Thanks again.
on Jan 09, 2005
Very cool...It's great to see the actual steps involved in this process.
on Jan 09, 2005
Excellent - wonderfully drawn and well delivered.
on Jan 09, 2005
....

Make a video!!!!!


....

Oh and nice icon you got there. I guess that is the secret... to start with the folder icon!
on Jan 10, 2005
Very informative article. Thanks
on Jan 16, 2005
really very helpful for us starters of making icons,god bless u for this.and looking foward for more tutorials.
on Jan 16, 2005
I guess that is the secret... to start with the folder icon!


No, the secret is to be incredibly talented.
on Jan 17, 2005
I learned a couple of things today. One, that Icons are easier than I thought to make (however I have zero talent therfore 'easy' has been cancelled out) and two, someone actually uses CorelDraw.
on Jan 17, 2005
[edited by admin]
on Jan 17, 2005
These are some great tutorials Paul!!!!! Makes me think I should put Corel on my puter.... (is there enough room?)
on Jan 18, 2005
very good, is
on Jan 18, 2005
Great series, Mormegil.

I just wanted to give you a ping that The Design Weblog featured your series in this week's "How-To's Day" tutorial feature. Link
2 Pages1 2