Musings on, Art, Skinning, Computers, and the True meaning of Life. (AKA The Lego Theory)
Let us sum up what we have learnd, and make a important Icon.
Published on June 2, 2005 By mormegil In Icons
Icon 102 (Recycle Bin - Empty)

At last we come to the much anticipated and much dreaded (by me) "Recycle Bin". This icon is always somewhat daunting since it is seen the most of any, with exception of the folder perhaps. You can count on people judging your entire pack by it. The pressure is not so bad in this pack, since it is not being done to "wow" but rather to instruct, but still we want to do something nice.

This is the second to last icon for a standard IconPackager 3.0 icon pack, and since many of you have been following along closely I decided to be a bit more thorough on this one, using it as a kind of summery of what has been shown through out  the tutorial series. We will use almost all of our techniques in this one, and I will show a bit more detail on some of the fanciers steps.

So without further ado, I bring you, da, da, da... The Recycle Bin.
Step 1:

As has almost always been the case, we start with some rectangles and the
Mesh Tool. You can see here how we start to give the bin some shape. At this point we only have four shapes, two of them are almost entirely hidden behind the others.

Step 2:

Now the theme of this set has become, more or less, Metal and Glass. So what I have decided to do is make the body of the bin glass, and the bottom and rim metal. So I create a few more
mesh rectangles and start shaping them to our needs. You can see that the top and bottom are actually only one shape each, even though they show two sides of the can.

Step 3:

Now to get our glass we do a few things. First I edit all of our glass sections with the Mesh Tool to give them some gradients, like in our first
gloss tutorial. Then using the Interactive Transparency Tool, I set the rear piece of glass to a 50% uniform opacity, and give the two front pieces nice Transparency Blends; each slanting away from the other, to give the illusion of dimension.

Step 4:

Now we give the front, and side faces of the bin some simple glare. Just like in our Gloss tutorial.

Step 5:

This brings us back to the
Mesh Tool, We start giving the top rim of our can some dimension. You can see here that I start by adding simple edge Mesh lines, giving the overall shape I want before I start doing more detail.

Step 6:

Now we go in and do some
more detailed mesh editing, making sure that we are keeping with the paneled style we have established thoughout the icon pack. In this case, I make an end panel on the rim and tint all the nodes slightly darker.
Step 7:

I more or less repeat this same thing on all the edges of our rim, giving it the same kind of panel effect we have used in most of the metal icons of the pack.


Step 8:

We move down, doing the same thing to the bottom of the bin, except in this case I only add two two grooves.


Step 9:

One mesh shape to note here is the back of the bottom of the tray. It is pretty simple, but since it is beside the glass, it adds a lot of believability to the overall image. The little details can make or break the "reality" of an icon.


Step 10:

Now we have the basic Empty Bin done, we need a shadow. Since we want our shadow to reflect that the bin is made up of two different materials, glass and metal, I draw a few template shapes where I want my shadows to end up.


Step 11:

Now I put a 50% shadow on the gray piece, which is the shadow of my glass. Then I pull a 100% shadow off my black shape, which is the shadow of my metal pieces. Once I have this, I delete the template pieces, select both of my new shadows, and convert them to one bitmap. I also send it to the back of our image.


Step 12:

Last we take our resulting bitmap and bleed it out with the Interactive Transparency Tool.
See the shadow
Tutorial for more on how we did steps 10 - 12.


Step 13:

One thing we have on all the metal of this pack is the brush texture.
So I copy our rim, and bottom shapes, give them a grey fill, and a Brush Transparency.
See Icon # 1  and the Interactive Transparency Tool tutorial for more on this.

Step 14:

Now we need our reflection. This will be done with our
standard reflection techniques, but I wanted to point out a few details. In this case we could not simple mirror the image because it has a lot of dimension to it. So I had to copy the can and skew and edit the new image quite a bit to make it match up with the bottom of our bin.

Step 15:

Last we convert the resulting image to a bitmap. Crop it to the bottom of our guide box, and blend it out with the Interactive Transparency Tool.

Finished Icon Image.

Download the Completed Icons here.

This has turned into one of the longest, and most detailed tutorials in our series so far. Hopefully it will be useful.

Tomorrow we will add some more detail and color in the "Full" version of the Recycle bin. This will use all the techniques we used today as well as everything else that we did not cover.

Read the other Icon-A-Day Articles:
(Icon-A-Day Index)

Check out the CorelDRAW for Skinner Index, for links to all the related Video Tutorials.

And don't forget to check for all the Icon-A-Day icons as they get made, in the
Miscellaneous Icons Gallery at
All Images and Text in this tutorial are © Paul Boyer, and may not be reused without written permission.

on Jun 02, 2005
Just WOW!!!

And also,

on Jun 02, 2005
on Jun 02, 2005
Now I know how to make a Recycle Bin properly!

Thanks, Teach.
on Jun 03, 2005
I am blown away every time I see a new icon in this set... I have been waiting for the recycle bin for over a month. Can't wait to try out IconPackager 3.0

Thanks Mormegil... you're the shiznit!