Icon-A-Day 2.0, Day 3. Seems like I've done this before.

Thursday, August 7, 2008 by mormegil | Discussion: OS Customization

The first Icon in the original Icon-A-Day series was the Closed Folder. I have to admit that I was not quite sure what I was getting into at the time. This time I do, so we will begin once again at the beginning, with the Closed Folder.


Day, 3
(Wednesday, August 6th, 2008) Line

The funny thing about the Closed Folder icon is that by default, in Vista it is no longer closed, it is just an open, empty folder. I must admit that I kind of like this convention, but if you have a logo or something you want to showcase you lose one of the most often seen blank surfaces in Windows.  So in icons, like the My Colors NBA Icons that I did last year, I made the folders completely closed.

To further complicate things, in Vista we have Live Folders, so unless a folder is empty, you pretty much never see the default Closed Folder anymore. It is still seen in the tree view in Explorer, but only at 16x16. I want to keep more or less the same feeling that we had in the original Icon-A-Day icons; the same Sci-Fi brushed metal finish, but we have to make sure that they fit into the new Vista scheme of things. What all this means is that the Closed Folder will more or less be our blueprint for the Live Folder icons that we will be tackling on Day 5.

One Last Important Note: I am going to jump right into these tutorials where we left off, in that I will be assuming people have seen the original series. These tutorials are more to help people understand how to create high quality icons, not a "How to use CorelDRAW" tutorial set. I have one of those, it is called CorelDRAW for Skinners and even though it is also a few years old, it you can use it to better understand some of the terms I toss around. I will be updating it as well, as this project picks up steam. But in the mean time I will be keeping some of the technical aspects pretty basic. If you have CorelDRAW questions, or questions about my techniques, please ask in the comments and I will try and answer; at the least it will give me ideas for new CorelDRAW for Skinners videos.

With that said, lets get this party started.
Closed Folders:
The most obvious change to the folders in Windows Vista is their orientation. Though not the first ones to do it, it is now known as the Vista Style.

Sadly I was not aware of this change back in January 05, much less the fun that would come with the Live Folders, so our original Icon-A-Day folder was quite simple and followed the more conventional orientation of the time.

Because of the complications that Live Folders add, it will be simpler for us to adopt the Windows Vista Style folders in 2.0.
Defaul_Folders

Step 1:
The first thing we will have to do is establish our new default size. This time In Corel we create a new Document and create a box, 2.56"x2.56". When we export our final icon, it will be 256x256 at 100dpi.

  IAD_3_S1

Step 2:
Now, in almost the exact way we did last time, I start with two (2) rectangular Mesh Fill Objects, each with only 1 grid length. I will then start to push them around with the shape tool to get our basic shapes established.


 IAD_3_S2

Step 3:
As I mentioned above, I want to keep the same basic look and feel as the original folders, so using the shape tool, I will begin by sculpting our mesh's into more or less the same folder we had before, just standing on its side.

Once we have the basic shape, I also give it the base colors, we will need. I do this by selecting each shape and assigning the same colors to all the nodes in the mesh.

    Corel

Step 4:
Now we begin to use the Mesh Tool in earnest. This is basically the same as in Icon #1 of the original series. You can learn a lot more about the Mesh Tool In the CorelDRAW For Skinners Tutorials.

First I go through and add several new mesh nodes. These will be used to give our folders depth, and realism. As I do this I start tinting the colors by selecting one or more nodes and holding down control, while clicking on a color in in the Palette. In this case I will more or less be using black and white. I just keep this up until I am happy with the end result.

IAD_3_S4    

 Step 5:
Once we have our shapes and fills set, we need to add some flare. We will do this with the same tricks that we used in our original series, starting with adding a the signature brushed metal texture.

We will do this the same way as before. We copy both the folder front, and the folder back. We give them both a 50% black fill, and then use the interactive transparency tool on both new objects, giving them a multiplied and stretched texture. See Corel For Skinners for transparency tips.

   IAD_3_S5

Step 6:
After we have our texture established, we have to get in the ever present gloss. This we do by drawing in a few shapes and filling them white. Then, once again we use the Interactive Transparency tool, to create a gradient blend, fading out our white shapes, leaving the classic gloss.

Since our folders our now facing up, and the front of the folder is not facing directly into the light source we will have to fake the gloss a bit more, but we want to keep it in order to maintain a uniform look.IAD_3_S6

Step 7:
One of the staples of the Icon-A-Day icons was the shadow. At this point we run into our first Vista Style conflict. The original icons all had a shadow dropping to the left, and back. Windows Live Folder thumbnails, actually generate their own shadows that drop to the right and back.   

In order to deal with this, we will have to change our shadow to the Vista Style. However the lighting on our icons is still in the 1.0 direction. Hopefully this will not tell on us too badly.

IAD_3_S7

Step 8:
The shadow brings us to one of the big changes in the new version of Corel. In the original icons, when we made a fancy shadow, I would just use the drop shadow of a shadow mask shape, then I would break it apart and fade out the resulting bitmap with the interactive transparency tool.

In Corel X3 or above when you break apart a shadow, it does not leave a bitmap, it leaves a mask. Rather than going into why, just understand that now you have to convert that mask into a bitmap to use the original technique. So that's what we will do here.
Corel   

Step 9:
The final signature feature we need to make this truly an Icon-A-Day icon is the reflection. This is going to be a bit difficult, because of the much taller aspect of the new folder. But we will do it the same old way. By copying the front and back of the folder, converting them each to bitmaps, then flipping them.
Once we have our flipped bitmaps, we can squish them down, and skew them into place. Once they are in place we use the Interactive Transparency tool to fade them  out.

IAD_3_S9

Finished Icon:
There we have it, the first new Icon-A-Day icon in almost 3 years. We will be using this folder as the base for our next few icons, so they should go pretty quickly.



Icon-A-Day2_Closed_Folder    

Wrap Up:
As I get back into the flow in the creation of these tutorials, and as I get to know who is reading them, and what they are interested in hearing about, I should be able to streamline. But I seems kind of fitting that our 2.0 Closed Folder took the same amount of steps as the original.

Once again, I welcome feedback. As a mater of fact I am relying on it, so please comment. Join me tomorrow as we make our new Open Folder icons.

Download Closed Folder Icon: 
Get today's Icon form the Miscellaneous Icons Library.
IAD_Download

All Icon-A-Day artwork, copy, and Icons, are copyrighted by Paul Boyer © 2008, and may not be used with out express permission.

sAARGe
Reply #1 Wednesday, August 6, 2008 8:53 PM
Very helpful ....   
blazz
Reply #2 Wednesday, August 6, 2008 9:23 PM
If you ever decide to package your tutorials for purchase count me in!!! They are so well done !! Long time fan of your work.        
Finhbar
Reply #3 Thursday, August 7, 2008 11:16 AM
Very good and helpful. Looking forward to the rest of the series.   
messiah1
Reply #4 Thursday, August 7, 2008 11:38 AM
Excellent and quick. Not many steps at all for such a great looking icon. Nice job.
Elsius Saint
Reply #5 Thursday, August 7, 2008 12:06 PM
Very very and very nice
WebGizmos
Reply #6 Thursday, August 7, 2008 12:25 PM
L0_0king good Paul! But in the last image where you have the top part of the folder accentuated by the raised edge...I think it would look better if that ran down the whole front edge rather than just the top part...it looks like you did that everywhere else except there where it disappears from the shadow down.....just my 2 cents!
mormegil
Reply #7 Thursday, August 7, 2008 1:35 PM
Im not quite sure what you mean, are you saying that the shadow dose not incude the Tab?
ArileenDesign
Reply #8 Thursday, August 7, 2008 1:40 PM
cool  
WebGizmos
Reply #9 Thursday, August 7, 2008 2:05 PM
Im not quite sure what you mean,
If you look at the very last image next to "wrap up"....you see the the area in the forefront....just above where the shadow begins...above that....the edge is accentuated a bit...and if you carried that down the rest of the edge I thought it might look even better. It just seems to disappear where as in the back part it doesn't. But hey.....I don't know squat about making icons!
mormegil
Reply #10 Thursday, August 7, 2008 5:07 PM
Ah, good point.
However That is the style of the gloss that we are using thought the pack, in order to get that edge to pop like that all the way down I would have to make the gloss run the legth of the folder, or make a slightly lighter gloss that did, this would probobly work, but would would not match the rest of the pack.

Thanks fo the feedback though. Maby I can get it into the USER Folders, which will be entirely new.
WebGizmos
Reply #11 Thursday, August 7, 2008 7:23 PM
Well...actually...when looking at it again....it seems to be there very slightly around the bottom side...and maybe just a tad bit more lightness on the right or darkness on the left of it would bring it out.
Asect
Reply #12 Friday, August 8, 2008 10:27 AM
These series are fantastic. Thanks for taking the time.

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!



web-wc01