Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

Creating an Adobe Application Icon (Photoshop Tutorial)

Jul 26, 2007

This tutorial is designed to create an icon that is similar to the Icons you see on all the new applications by Adobe. Although it is no perfect, it still looks good. You will for this Photoshop. Click any of the image for full size.


Step 1) The first step is to create your canvas. Use the standard size of 120 x 120 px.

Creating an Adobe Application Icon (Photoshop Tutorial)

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 2) Set the layer to a new layer and not the background. This is needed for the effects to be applied.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 3) Add your desired colour. I've used a style from a Web 2.0 Styles pack. You will need to do subtle adjustments.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 4) Some adjustments that you will need to do is add a bevel and emboss. This needs to be very light and added over the top of the style effect.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 5) You now need to add text. Although there is an official font that is used, I can't find it for free. Although I have used Tahoma. Any sans-serif substitute can suffice.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 6) Center the text and enlarge to fit. Make sure it isn't to tight around the edges.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 7) At this point you may need to lock the layers so you can transform both layers with out the need to do each layer in turn.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 8) Transform the layer so there is a small gap on the bottom and right edge.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 9) One thing that you can do that I forgot is add a very subtle colour overlay to the text. This again is in the style pallet of the Web 2.0 pack.

Creating an Adobe Application Icon (Photoshop Tutorial)
Step 10) Export and you are done. Looks Ok.

Creating an Adobe Application Icon (Photoshop Tutorial)

7 comments:

Ricky said...

I'm sorry, but that wasn't helpful, I grasped the idea fine, but Photoshop newbies will not, it's not clear enough for the average beginner to understand.

Ricky said...

I'm sorry, I am an idiot, I didn't see the pictures were clickable! Doh!

Good tutorial.

Lee said...

The turorial was quite nice but you're missing some points for beginners or i just didnt read it right.

Export as what? Cuz i can't seem to find *.icon (extension window uses).

James Powell said...

Just go File > Save As and select .jpg or what ever i'm not sure if there is a complete option for exporting as icons you will have to read up on it.

Jag said...

The only problem I can see with this tutorial is that you are unclear as to what settings you used for your drop shadow. Most semi experienced photoshop users can figure this out, but beginners will have trouble with the little things.

**Note**
Use the "Save for Web" function under "File" and save it as a .png file. There is are several free programs that will convert .png files into .ico (Icon) files.

Anonymous said...

Thanks

Joey said...

Hey, thanks for the tut. I'm guessing that adobe used the font Myriad Pro, for the actual icon font. I've done a recreate of the font myself and i think mine came out preety sweet with the myriad pro. I just saw this tut so i wanted to make a recommendation. Check out my outcome, i did this before i saw your tut :). lol
http://img177.imageshack.us/img177/1796/photoshopiconrd8.jpg

CYa.