Subscribe Via RSS

3227 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Thermometer Icon

July 5th, 2008 in Photoshop Tutorials by Richard Carpenter

Thermometer Icon

1 Star2 Stars3 Stars4 Stars5 Stars9 Votes, Rating: 4.33
Loading ... Loading ...
About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of HV-Designs. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 331 posts.

Create a new document 450×450 pixels, Fill your background with the color #bec0bf. Select the ellliptical marquee tool and draw a white circle towards the bottom of your canvas.

Select the rounded rectangle tool with a radius of 40 pixels.

Draw a thin rectangle, but go over your circle fill with the color white also.

Merge both layers togther and add these layer styles.

You should have something like this.

Follow the first couple of steps creating the shape only a smaller version of it using the color red. Merge both layers together.

Add these layer styles to your red shape.

You should have something like this.

Select the elliptical tool and make a selection like this.

Fill with the color white, set layer opacity to 60%. Add a layer mask and drag a linear gradient over the top to blend it in.

Select the same tool again only this time once you have drawn your circle draw another one over the top then hit the delete key, the idea is to make like a moon shape.

Again add a layer mask to blend it in. Now select the pen tool and create a shape like this.

Fill with the color white and set layer opacity to 15%.

Now with the rectangle marquee tool add your lines.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

32 Responses to “Thermometer Icon”

  1. helpfull hand says:

    What color did you use at the inner glow of the red part? Since you uses gif images the color code might change, that’s caused by the compression that can only hold up to 256 colors. That’s why i don’t take it out of the image this time. I’d prefer to use png images, losless/none compression, transparency, 16 milion colors just like jpg and not as big as a bmp image, maybe you should try it. ;)

    And the icon is beautiful, im making it at the moment. :)

  2. ADMIN says:

    color code is #9c0300

  3. Arend says:

    The icon itself is not really usefull (for me atleast), but it definetly shows how to use photoshop.

    Nice tutorial! Keep em comming.
    // Arend.

  4. helpfull hand says:

    Thank you admin :)

  5. mj says:

    this is cute and funny..
    i enjoyed this tutorial..
    thanks you!

  6. lucy says:

    Cute icon. Thx for sharing this informative article. I currently use IconEdit2 to create my own icons. It’s quite easy to use and works fine for me.

  7. Xime says:

    this step did not work for me:

    “Fill with the color white, set layer opacity to 60%. Add a layer mask and drag a linear gradient over the top to blend it in.”

    And have not being able to continue, do you think you can expand on it?

    Thank you!

  8. Briller Kate says:

    wow! thanks a lot! :)

  9. rex says:

    thanks for ur good designs. i learn from it…

  10. window thermometer says:

    Hey man, I was just browsing on your site and wanted to add the RSS feed, however it is not working with my webbrowser (I’m running Opera) any trick to bypass that?

  11. Kierra says:

    This step i can’t get “Merge both layers togther and add these layer styles.” When i merge the layers the Layer Style option is not clickable. It wont work.

Leave a Reply