Create a quick glossy web2.0 icon in photoshop

In this tutorial we will learn how to create a quick, smooth and glossy a web2.0 icon. Even though the beauty of design lies in detail, we will try to make an icon in 10 steps.
Open a document 300×300 px.

Photoshop Inspiration 1

Draw guides to to make a center point. Create a circle of 250×250. Apply a color. Here I have put a red color #ed1c24.

Lets apply some effects. Go to the layer style blending options and apply Inner Shadow

Change the gradient to

After applying the result will be like this

Make a new layer. Draw a ellipse with marquee tool as shown below. This is the main reflection layer.

Select white color as foreground. Select the foreground to transparent fill from the gradient fill.

Fill it. It will be starting with white and blending down to red background color. Change the layer transparency to 65%.

To make an outer ring draw another one ellipse of 15px more that the first drawn one. Set the thickness on the outline depending on what size you are going to use the icon size. Fifteen pixel will be fair enough for a 50px – 60px icon.

Apply the following settings for the ring. First we will apply gradient settings from the layer style.

Change the style of the gradient to reflected.

Angle to 13 degree. Scale to 110.

Apply the following settings for Satin.

Change the angle to 59 degree. Distance to 9. Size to 16.

Below you can see the contour settings. Click the anti-aliased and invert check buttons.

Make a new contour as shown.

Apply a pillow emboss for the inner red ellipse to stand out a little more.


From the symbols font select any one and put it below the reflection layer. Here i have used an home symbol. I gave a little black outer glow, bevel and emboss, gradient overlay and stroke. This is the basic layer required to make an icon.

By changing the settings and adding a layer you can modify like below.

Download PSD file from here.

Incoming search terms:

  • creating shiny buttons photoshop
  • relife with symboles photoshop tutorials
  • tutorial photoshop glossy
  • create shiny button photoshop
  • how to make glossy button photoshop
  • background patterns photoshop
  • glossy-and-shiny--button-with-metal-ring- free download psd
  • red shiny psd
  • photoshop glossy tutorial
  • shiny button tutorial

You may also like this

17 Comments

  1. Anonymous says:

    Pro-result in very few steps….
    Wonderfull !!!

  2. acconsslutt says:

    yo, psdguides.com great name for site)))

  3. Naxyanafe says:

    psdguides.com – cool sitename man)))

  4. pneupebsipnew says:

    psdguides.com – great domain name for blog like this)))
    ————————
    internet signature: http://hyundai-hyundai-accent.ru

  5. edishekgeskqfwj says:

    psdguides.com – great domain name for blog like this)))
    ————————
    internet signature: http://dewat.ru/

  6. LagFlitaraits says:

    Hello, I can’t understand how to add your blog ( psdguides.com ) in my rss reader
    ————————
    sponsored link: http://potet.ru/

  7. lubmamsbelisy says:

    psdguides.com – great domain name for blog like this)))
    ————————
    signature: http://cigace.ru/

  8. 45+ Best Icon Design Tutorials | Dzineblog says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  9. Bookmarks for March 20th through March 24th :: I don’t do Sudoku says:

    [...] Create a quick glossy web2.0 icon in photoshop | PSD Guides – Photoshop Tutorials and Inspirations – Create a quick glossy web2.0 icon in photoshop [...]

  10. xea says:

    Always great as usual!

  11. 45+ Best Icon Design Tutorials « One’s Graphics and Design lab says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  12. 45+ Best Icon Design Tutorials « N3T.ir - Web Resources, Web Design News & Tips, Open Source says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  13. 45+ Best Icon Design Tutorials | KolayOnline says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  14. townguyz.com » Blog Archive » Collection : Web 2.0 Icon Tutorials says:

    [...] Glossy Home Icon in Photoshop Tutorials [...]

  15. 45+ Best Icon Design Tutorials, Icon Design | ibuylogos.com says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  16. Boxer.cn » 45????????? says:

    [...] Quick Glossy Web 2.0 Home Icon [...]

  17. 45+ Best Icon Design Tutorials | DzineBook says:

    [...] 23.) Quick Glossy Web 2.0 Home Icon [...]


Website Reference - Business Collective - Publication Sharing - Business Log - Sitemap