Icon-A-Day, Icon #1, Closed folder.
A Icon a day Keeps the Creative Block away. (I hope)
Saturday, January 8, 2005 by mormegil | Discussion: 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. .jpg) |
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. .jpg) |
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. .jpg) |
| 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. .jpg) |
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. .jpg) |
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). .jpg) |
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..jpg) |
 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. | ||
.jpg)
.jpg)
.jpg)
Reply #3 Saturday, January 8, 2005 11:39 PM
Love your work.
Reply #4 Sunday, January 9, 2005 2:24 AM
Looking forward to each day on this one. I use Illustrator, so I think I will be learning some very valuable ideas.
Thanks again.
Reply #5 Sunday, January 9, 2005 5:05 AM
Reply #6 Sunday, January 9, 2005 11:41 AM
Reply #7 Sunday, January 9, 2005 6:25 PM
Make a video!!!!!
....
Oh and nice icon you got there. I guess that is the secret... to start with the folder icon!
Reply #9 Sunday, January 16, 2005 1:34 PM
Reply #10 Sunday, January 16, 2005 1:53 PM
| I guess that is the secret... to start with the folder icon! |
No, the secret is to be incredibly talented.
Reply #11 Monday, January 17, 2005 10:42 AM
Reply #13 Monday, January 17, 2005 7:37 PM
Reply #15 Tuesday, January 18, 2005 7:57 PM
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
Reply #18 Thursday, March 10, 2005 8:58 AM
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Saturday, January 8, 2005 9:20 PM