Ever wanted to get into Icon making? This tutorial aims to get you started, if not interested in creating icons for the web. Icons can provide a great finishing touch to a website and give it unique character. I'll be showing you how to create a simple looking Apple Cinema Display icon using Photoshop. Some of the simple techniques we're about to use will proove invaluable to you in the future.
Download the PSD for reference
Creating the Screen
1. Grab the Polygonal Lasso Tool and draw out a rectangle like the one below. If you can't see the Polygonal Lasso click and hold over the Lasso Tool. As you can see from the rectangle below it has some perspective as a flat icon wouldn't look great. After all we're going for a 3d look. 
2. Go to Layer > New Fill Layer > Solid Colour and fill it with #BABABA which is a light grey.
3. To make it look like light is hitting the monitor we need to give it a gradient overlay. At the bottom of the Layers Palette click the 'Effects' button and choose Gradient Overlay. Apply the settings below.
 |  |
4. Now to add the blue part of the screen. Hold CTRL and click the grey layeryou created in Step 2. This will bring up a path around the rectangle. Go toSelect, Modify, Contract and enter 4 pixels. 
5. Next, go to Layer > New Fill Layer > Solid Colour and choose a blue.
Adding a Mac OS X Type Wallpaper
1. Grab the Pen Tool and draw out a shape like the one below. To create a smooth curve click, hold and drag. To get the dotted path up right click once you've finished with the Pen Tool and choose Make Selection. 
2. Make a new layer. Take the Gradient Tool, change your foreground colour to white and drag from top to middle over the selection. 
3. Do the exact same as Step 2 above for a smaller shape in the bottom left of the blue. Use the finished example at the top of this tutorial for reference. You'll end up with this below.
3. The screen looks a bit flat don't you think? Add a Gradient Overlay to the blue layer with the settings below.
Creating the Base
1. Click and hold on the Rectangular Marquee Tool - this will bring up more tools. Select the Eliptical Marquee tool and drag out a circle as shown below. 
2. Create a new layer below all your current layers on your layer palette. Layer > New Fill Layer > Solid Colour, and choose the colour #BBBBBB. 
3. With the Eliptical Marquee Tool draw out another smaller circle inside the previous one and fill it with white.
4. Now go to Filter > Blue Gaussian Blur and choose a value of 6 px. You might need to make the circle a little bigger. If so, press CTRL + T. 
5. Time to make the shadow cast from the monitor onto the base. Grab the Pen Tool and draw a shape like the one below. Right click and choose Make Selection to get the dotted selection come up. 
5. Layer > New Fill Layer > Solid Colour and choose black. Now go to Filter > Blur > Gaussian Blur and set it to 5px.
TIP: If you need to tidy up the shadow and make it less visable one side (depending on where the main light is cast) grab the rectangular marquee and set a 10px feather. Drag out a selection, position it over the shadow and hit backspace.
The Final Shadow
1. To jazz this up a little we can add a shadow cast by the whole monitor. Again take the Eliptical Marquee tool and drag out a selection similar to the one below. 
2. Making sure the layer your about to create is below all the other layers go toLayer > New Fill Layer > Solid Colour and choose black. We need to blur this.Filter > Blur > Gaussian Blur and set it to about 10px. Finally you may need to lower the opacity a little and thats it! 
If you want to go on you could even add a slight texture to the base to make it look more metallic. I did this is the first image at the start of the tutorial.
This tutorial may not be redistributed without SigSource's permission!
