Subscribe to our rss feed

Adobe Photoshop CS3 Style Icons

Posted in Photoshop Tutorials, Web Graphics by John Ward on the April 30th, 2007

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.
Adobe Photoshop CS3 Style Icons Tutorial

Create a new layer. Using the Rectangular Marquee Tool create a selection slightly smaller than the canvas.
Adobe Photoshop CS3 Style Icons Tutorial

Fill the select with any black.
Adobe Photoshop CS3 Style Icons Tutorial

Now open the Blending Options Window by right clicking the layer and selecting Blending Options.
Adobe Photoshop CS3 Style Icons Tutorial

Now Apply the following settings.

Gradient Overlay.
Adobe Photoshop CS3 Style Icons Tutorial

Double click the gradient and adjust like below.
Adobe Photoshop CS3 Style Icons Tutorial

Drop Shadow:
Adobe Photoshop CS3 Style Icons Tutorial

Select OK to apply the changes. Your image should look like the one below.
Adobe Photoshop CS3 Style Icons Tutorial

Now select the text tool. Open the text options and apply the following options:
Adobe Photoshop CS3 Style Icons Tutorial

Now type your text on the layer.
Adobe Photoshop CS3 Style Icons Tutorial

Now open the Blending Options for the layer and apply the following options.

Gradient Overlay:
Adobe Photoshop CS3 Style Icons

Here is the gradient I used:
Adobe Photoshop CS3 Style Icons Tutorial

Apply the settings and you are finished. You now have a Adobe Photoshop CS3 styled icon.
Adobe Photoshop CS3 Style Icons Tutorial

You can also apply different colors to the gradient to create icons like the other icons in Adobe Creative Suite CS3.

Popularity: 67% [?]

Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • BlogMemes
  • Fark
  • Furl
  • Live
  • NewsVine
  • Reddit
  • Slashdot
  • StumbleUpon
  • TwitThis
  • YahooMyWeb

Win Your Bid Today At eBay!

15 Responses to 'Adobe Photoshop CS3 Style Icons'

Subscribe to comments with RSS or TrackBack to 'Adobe Photoshop CS3 Style Icons'.


  1. on May 8th, 2007 at 2:45 pm

    Hope you guys enjoyed this tutorial.

  2. tominated said,

    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

  3. John Ward said,

    on May 17th, 2007 at 6:34 am

    Thanks, I had a hard time trying to find out what font it was.

  4. Steve said,

    on May 27th, 2007 at 4:09 pm

    Great tutorial, 5/5 easy to follow and great results.

  5. Lar said,

    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.

  6. Joe said,

    on August 4th, 2007 at 10:50 pm

    An unreleased font called Guage is the font used in the real icons.

  7. Amber said,

    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?! :(

  8. asd said,

    on October 2nd, 2007 at 7:31 am

    confusing!!!

  9. John Ward said,

    on October 2nd, 2007 at 11:55 am

    What par are you confused about?


  10. 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

  11. GRAPIXADK said,

    on November 21st, 2007 at 10:09 pm

    I SAID HOW TO SAVE AS ICON!

  12. GRAPIXADIK said,

    on November 21st, 2007 at 10:11 pm

    I SAID HOW TO SAVE AS ICON


  13. 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. [...]

  14. Namronia said,

    on January 5th, 2008 at 5:53 am

    http://saved.im/nzi4mgd2age/photoshoplogobynamronia.png

    :D

  15. Yusuf said,

    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 :)

Leave a Comment