In this tutorial, I will show you how to create a simple home icon. The final result will look like this:
1. First we will need to make a new canvas, I have used 40 by 40px but it’s up to you. Then make a new layer named ‘iconbg’ and use the Rounded Rectangle Tool with a radius of 5px to make a background for the icon (colour doesn’t matter).
2. Now we will need to change some layer styles, so double click on the ‘iconbg’ layer and first check the gradient box and apply these settings
Check the stroke box and apply these settings
And check the inner glow box and apply these settings
It should be looking something like this
3. Then create a new layer called ‘overlay’ and select the iconbg layer by using the magic wand or CTRL + clicking the layer. Then using the Rectangular Marquee tool hold ALT and use your mouse to deselect the bottom half of what’s selected. Then using the paint bucket, fill the ‘overlay’ layer with white. Now reduce the layers opacity to 10%.
4. Then create a new layer named ‘image’ and make an outline of what you want the icon to show, I used a home.
5. Finally edit the layer settings of ‘image’ layer and apply these two settings.
Colour overlay:
Inner Shadow:
You should have something like this as your final result
January 6th, 2008 at 2:21 pm
i could never do that glass look, but my first icon from this tutorial looks not bad! always much room for improvement. kudos.
January 6th, 2008 at 2:31 pm
Superb - thanks for sharing how to do this icon
January 6th, 2008 at 2:53 pm
Not too bad at all. I remember having to do some glassy effect icons for an Apple website. I’m a programmer really, so it proved to be a little difficult, but I managed it in the end.
January 7th, 2008 at 7:31 am
Glad you guys like it!
I’ll have to ask Jesse to write some more tutorials like this one
March 25th, 2008 at 4:04 pm
Photoshop Tutorials…
…
April 6th, 2008 at 11:38 am
I spend most of my free time online for pleasure. I know all websites, and this is the one about real events that really took place in the world.
April 9th, 2008 at 3:54 am
You have to revise your opinion. Repeating this nuttery misses your point. Give us proofs. Not just with words, but with deeds.
July 31st, 2008 at 5:06 am
I found your site on faves.com bookmarking site.. I like it ..gave it a fave for you..ill be checking back later
August 14th, 2008 at 1:01 am
Добавляю первый свой блог на фид бёрнер (кстати ваш блог там и нашелся) - разницы в трафе не вижу. На фига нужен этот фидбёрнер?
August 15th, 2008 at 2:38 am
Your blog is interesting!
Keep up the good work!
August 18th, 2008 at 6:35 am
Люблю людей, подмечающих всякие детали, мелочи и могущих в обыденных вещицах найти что-то привлекательное и незаметное для большинства. Супер!
August 20th, 2008 at 2:07 pm
Все-таки потрясное изобретение - блог. Казалось бы обычный сайт, но изменили подачу информации, передали сайт в руки одного человека и открылась еще одна грань общения с миром.
August 21st, 2008 at 3:48 am
Кстати, кто-нить марки коллекционирует?