Are you new to Designerside? You should subscribe to our RSS feed so you can keep up with our great content. Thanks for stopping by!

Photoshop has become a tool that most designers as well as artist rely on for their day-to-day workflow. Web design, graphics, illustrations, Photoshop is a very versatile tool. There is one type of graphic that intimidates a lot of people. Thats icons! Those nifty little graphics that form the basis of any good GUI. Well, no more vectors people. If you need a basic icon for your site or application and don’t want to beat around the bush, I’ll show some basics in creating a good Mac style icon. As a case study, I will be recreating the .Mac icon which is simple, yet beautiful…

First, open a new PSD file, a 200 x 200 PX canvas will work nicely. The thing with icons is to to things big, because when minimized, they can and should look awesome. Luckily for us, a not so great detail in the big picture can look awesome when shrunk to the size of the icon.

Step 1

First make a new layer over your background layer and name it “base”. Make a nice big circle by holding shift (to make it perfectly round) while draging it. Right click the layer you made the circle and right click ”blending options”. Here you can adjust various things, including gradients which I used for this icon. Now you have a nice blue canvas.

Step 2

Now you need to “brighten” up the lower part of the icon to make it look more realistic. Take your brush and set it up like I did, activating the airbrush feature with the flow set to 50%. Now control click the “base” layer (to get a selection) and create a new layer called “highlight” not deactivating the selection. Click “highlight”! Now you can work on that layer with the selection from “base” so get your brush and start easily brusing to get the look just right.

Step 3

Now we go on to the lines. Select your eliptical marquee tool (right click on the rectangular marquee tool so you can select it) and use it to make a selection that has the outer broder in the shape of the line you want to draw (you may also prefer using the pen tool) and then go to Edit > Stroke (select white and inside, as well as 1px) to finish it. The only problem now is that the line goes outside the circle. Control click the “base” layer and go to “Select > Invert” to invert the selection. Now you can delete the part of the line you don’t need. To get the faded edges of the line right it is best to use the eraser set up like the airbrush (just select the right brush type and flow) and work around the edges.

Now repeat the process for each line to get the desired effect.

Step 4

As far as the dots go, it’s pretty easy. Just draw a little circle and use Photoshop blur filter on it. Use more blur for the bigger circles. Don’t worry to much about perspective, just be sure to have not too many and not too little circles.

Step 5

Now it’s time for a little more highlighting… Control select “base” again and drawing on a new layer, highlight the top with white using the airbrush.

Create another layer on top and using dar blue and the “base” selection brush in some dark blue edges to get a nice realistic perspective.

Step 6

Now for the blue edge. Control select “base” and make a new layer in which you’ll Edit > Stroke a 3 pixel dark blue border inside.

Having that layer selected go to Layer > Layer mask > Reveal all. Now use the default “white to black” gradient in the layer mask to make a portion of the blue border visible and a portion invisible.

Step 7

Now to finish the icon. Merge all the layers to one layer (by selecting all the layers and then using Layer > Merge layers). Copy that “master” layer (We’ll need it later). Open the “blending options” of the top layer and apply a small inner glow. Obcourse, you want that glow only at the lower edge, so use the technique which we used to make just a portion of the blue border visible here as well. Since you have the same layer (except for the glow) under it, it will look nice and finished.

Step 8

But… We musn’t forget the shadow and reflection. Copy the icon and lower it… Using the “white to black” layer visibility technique you can make quite a realistic reflection.

Now just use the airbrush style eraser to finish it up and make it look more natural. Lower the opacity of the layer to finish it up.

Now for the actual icon shadow. Now make an oval and give it a shadow effect like I did. Now just put that under the actual icon but over the reflection.

The finished product:

Now that your work is finished, you need a way of exporting it into an icon, expecially if it’s for an application. I suggest using IconFactory’s Icon Builder. It’s a Photoshop plugin which you can use (and misuse :)) to give your icon that extra edge.