Adobe Photoshop CS3 Style Icons
The Adobe Photoshop tutorial will show you how to create icon that resemble the new icons included with Adobe Photoshop CS3. This tutorial is quick and easy. With the old icons it was hard to tell which program each one represented. The new icons are simple and easier to recognize. The funny thing is that this tutorial is done using Adobe Photoshop CS2. I haven’t upgraded to the CS3 version yet.
Start with a new document 120×120 pixels with a white (#FFFFFF) background.
Create a new layer. Using the Rectangular Marquee Tool create a selection slightly smaller than the canvas.
Fill the select with any black.
Now open the Blending Options Window by right clicking the layer and selecting Blending Options.
Now Apply the following settings.
Gradient Overlay.
Double click the gradient and adjust like below.
Drop Shadow:
Select OK to apply the changes. Your image should look like the one below.
Now select the text tool. Open the text options and apply the following options:
Now type your text on the layer.
Now open the Blending Options for the layer and apply the following options.
Gradient Overlay:
Here is the gradient I used:
Apply the settings and you are finished. You now have a Adobe Photoshop CS3 styled icon.
You can also apply different colors to the gradient to create icons like the other icons in Adobe Creative Suite CS3.
Popularity: 46% [?]
Other Related Tutorials
on May 8th, 2007 at 2:45 pm
Hope you guys enjoyed this tutorial.
on May 16th, 2007 at 9:32 pm
Great tutorial, but the font is supposed to be myraid pro. it’s included with mac os x
on May 17th, 2007 at 6:34 am
Thanks, I had a hard time trying to find out what font it was.
on May 27th, 2007 at 4:09 pm
Great tutorial, 5/5 easy to follow and great results.
on July 11th, 2007 at 6:39 am
Very good tutorial. Using your tutorial I was able to make an acceptabe icon set for my RKlauncher dock.I believe the actual font is AkzidenzGroteskBE but I don’t know how to get that so I cheat and use the Trebuchet MS font. I feel that it is very similar to the official font. I feel that the Myraid Pro font does not look like the Ps logo but it does look like the iBook logo.
on August 4th, 2007 at 10:50 pm
An unreleased font called Guage is the font used in the real icons.
on August 12th, 2007 at 12:13 am
Hey,
does anyone know how to get the blending options with the little circle inside? I managed to get this up on my cs3 once but now all that comes up is a different style blending options. Can anyone who knows what I mean help?!
on October 2nd, 2007 at 7:31 am
confusing!!!
on October 2nd, 2007 at 11:55 am
What par are you confused about?
on November 19th, 2007 at 1:19 am
Also, I made it with Calibri. It looks similar. Go to my website and its my favicon. If you want me to make one for you, email me at admin@toloratedmeat.com / toloratedmeat@hotmail.com
on November 21st, 2007 at 10:09 pm
I SAID HOW TO SAVE AS ICON!
on November 21st, 2007 at 10:11 pm
I SAID HOW TO SAVE AS ICON
on December 20th, 2007 at 1:43 pm
[...] Adobe Photoshop CS3 Style Icons from Team Tutorials – Simple tutorial for creating icons that look like the new Adobe CS3 icons. [...]
on January 5th, 2008 at 5:53 am
http://saved.im/nzi4mgd2age/photoshoplogobynamronia.png
on May 8th, 2008 at 11:45 am
u really do not need to save it as icon to use it as icon… save it as a .png format and keep the background transparent
on July 28th, 2008 at 3:42 am
la tipografia debe ser MyriadPro
the typography is MyriadPro…
on September 8th, 2008 at 1:57 am
[...] Team Tutorials » Adobe Photoshop CS3 Style Icons Tutorial Categories. Hardware Guides · Other Tutorials · Photoshop Tutorials · Basics · Logo Tutorials · Web Graphics · Web Layouts · Programming Tutorials … [...]
on September 26th, 2008 at 5:07 pm
@c3c & tominated: It’s not Myriad Pro. Myriad Pro has none of the small flurishes.
E.g., lowercase “L’ and capital “I” are the exact same in Myriad Pro. A quick glance at the Flash icon shows you that’s not the case.
Joe may be right.
on December 29th, 2008 at 2:07 am
Nice tutorial, step by step!
on March 18th, 2009 at 3:33 am
You shown how to create. But i want see in which format how to export.
on April 22nd, 2009 at 8:25 am
but how do you apply it after saving ????? what does it help me to have an icon if i cant apply it as my icon fo the program?
on April 28th, 2009 at 4:33 pm
To get the image to work as an icon, you need to go Save As -> PNG. Then you need an application to convert this file into an .ICO file (icon file). There are a few good free apps that can do this and are very small and easy to use.
Alternativly, you can upload your .PNG file to an online PNG>ICO conversion website. This is what I do. It saves on having so many programs installed on your computer. The website I use is: http://www.convertico.com/
Then once you have your .ICO file, all you need to do it create a shortcut of the program you wish to change the icon of. Right-Click on that icon and choose (In Vista) Properties -> Customize -> Change Icon. Then Browse to where you saved your new icon. Done!
You can also change the icon of the original .EXE but that requires a little more effort and chances are you’ll be accessing that program via a shortcut located on your Desktop/Start Menu/Quick Launch etc.
on May 11th, 2009 at 7:23 am
The font is all wrong.
It’s not verdana and also not the suggested myriad.
The font is called clean (not published)
on May 27th, 2009 at 6:28 pm
Nice tutorial, step by step!
on July 23rd, 2009 at 11:02 pm
i follow all the steps..but i think that the adobe program on my computer is not complete on icons..like the gradient editor..
hope to help me so that i can make that kind of icon..
and u have a nice tutorial..^_^ thank you
on November 13th, 2009 at 11:50 am
cool tutorial.
else, look for Icon Generator (an AIR app) – that does the job too.
on November 14th, 2009 at 4:07 am
very nice tutorial vcoz i want to know more then that
on December 6th, 2009 at 10:08 am
Do you by any chance have a tutorial or lists of colors to make the Flash icon? I love this tutorial. But the text is black and slightly see-through, so you see the back of the icon through the text.
on March 5th, 2010 at 2:02 pm
yall are crazy ppl..lol..