Email:
Name:
 
learn web design
Free Tutorials Send by Email
 Free Web Design Newsletter
 Opportunities to Win Free Prizes
 Subscription to our RSS Feed
Create a Glossy Home Icon in Photoshop

Create a Glossy Home Icon in Photoshop

Posted on 20. Jun, 2008 by Michael in Photoshop

Learn how to design your very own glossy home icon in Photoshop

Heres what we will be making:

1.

Firstly start by creating a new document in Photoshop, or of course, opening up a template you’ve made previously. I simply used a new document size 400 x 300 pixels. I then added in a light blue/white gradient for the background.

2.

Create a new layer (Layer > New > Layer) then using the Elliptical Marquee Tool make a perfectly-rounded selection in the middle of the document somewhere.

You can fill this selection with any old color, just go with Black for now (#000000)

Going into the Blending Options for this orb layer, apply this Gradient Overlay.

And now you will have a gradient-filled orb like so:

3.

Again using the Elliptical Marquee Tool, make a smaller size selection near the left edges of your first orb.

On a new layer draw a light-blue gradient inside of your selection as shown below. Note that you can use either Color to Transparent or Color to Black.

With your selection still active, move your selection up to the left and upwards, to do this hold Shift and press the up/left keys.

Inverse your selection by right-clicking the selection and going to Select Inverse, then press delete to remove everything on the outside of the selection.

To make it look quite a bit nicer you can change the layer mode for the gradient layer to Screen, also lower the opacity if necesary.

Finish off by adding one more shine gradient in the bottom-right of your orb.

4.

Now let’s add in shape that defines the icon. Find and get out the Custom Shape Tool.

Go into the shapes and make sure you have all sets selected.

Scroll down to the bottom of your shapes and find the Home shape.

Now create a new layer underneath all of the shine layers you made, hold shift and draw your shape out. You might need to change the Custom Shape Tool settings for it to come out as a solid shape.

Note that I used #9bcae5 as the color for my home icon.

You will get a home icon that looks like this after applying the following layer styles:

  1. Inner Shadow
  2. Outer Glow
  3. Gradient Overlay

5.

Now you just have to merge the layers together and make a much smaller version. You can resize it down by pressing CTRL+T then dragging the corners inwards whilst holding shift.

Thanks for reading! If you want you can download the PSD file from here.

Tags: ,

19 Responses to “Create a Glossy Home Icon in Photoshop”

  1. 40+ Hand-picked Photoshop Icon Designs [Photoshop Tutorials]

    01. Aug, 2008

    [...] Create a Glossy Home Icon [...]

    Reply to this comment

  2. fikissimo.it » Blog Archive » Più di 40 tutorial per fare le icone da soli

    01. Aug, 2008

    [...] Create A Glossy Home Icon [...]

    Reply to this comment

  3. Photoshop’ ta Görsel ikon Haz?rlama Dersleri +40 | EgitimTUBE

    02. Aug, 2008

    [...] Create a Glossy Home Icon [...]

    Reply to this comment

  4. dev

    03. Aug, 2008

    can help me, why i can’t fill black color in the 2. circle

    Reply to this comment

  5. Photoshop ile el yap?m? icon dizaynlar? | Sadece Bir Blog

    03. Aug, 2008

    [...] Create a Glossy Home Icon [...]

    Reply to this comment

  6. 40+ Photoshop????????? | ????

    04. Aug, 2008

    [...] ????Web2.0????????? [...]

    Reply to this comment

  7. AllTuts - Photoshop Tutorials, Illustrator Tutorials, Free Photoshop Brushes and more

    04. Oct, 2008

    Create a Glossy Home Icon in Photoshop…

    In this tutorial you will learn how to design your very own glossy home icon in Photoshop.
    ……

    Reply to this comment

  8. Texter

    16. Oct, 2008

    This icon is very cool. Thanks for the great list…

    Reply to this comment

  9. jennifer

    23. Oct, 2008

    Thanks for the tutorial! Very useful! :)

    Reply to this comment

  10. Carpet Cleaning NJ

    14. Nov, 2008

    Thanks for the information. It would be nice if more people commented on this topic. It’s not too confusing if you read and understand then please teach what your learning..

    Reply to this comment

  11. Noshin

    21. Dec, 2008

    wow! this is the first icon i’ve ever made, and also the best. to tell u the truth, i could never even imagine i could ever do such an awsome thing with photoshop.

    Reply to this comment

  12. Sosyal ?m - Teknoloji haberleri » Photoshop’da ?con Yap?m? - Yüksek Kaliteli » Blog Ar?ivi » Photoshop’da ?con Yap?m? - Yüksek Kaliteli

    24. Dec, 2008

    [...] 3)Ana Sayfa ?conu [...]

    Reply to this comment

  13. Daniel Mendieta

    30. Dec, 2008

    Very useful tutorial! Thank you for putting it together!

    Reply to this comment

  14. Gini

    31. Dec, 2008

    Great tutorial, thanks!

    Gini’s last blog post..Petal People Portraits – How to Turn a Person into a Flower in Photoshop

    Reply to this comment

  15. Belvendarn

    06. Mar, 2009

    Great, thank for sharing your post, I learned alot from it.

    Reply to this comment

  16. ival

    18. Mar, 2009

    I must say that this is a very good post. I too have some very good tips back at my site, hope i can share some to all the readers here.

    Reply to this comment

  17. Beautiful Icon Designs | Delliblog

    12. May, 2009

    [...] Create a Glossy Home Icon [...]

    Reply to this comment

  18. night0

    14. May, 2009

    Nice tutorial, It’ll help me to create some better icons for my sites.
    I’ll just try out several different colours and some glossing options…

    Reply to this comment

  19. bridget

    17. May, 2009

    thnx for sharing
    helped alot

    =)

    Reply to this comment

Leave a Reply