« My Last Day at Intech Data
Things that will Ruin Your Day! »

Photoshop - Cool Glassy Icon Creation



This photoshop tutorial will teach on how to make a cool glassy icon to be display not only on your website, but also for graphics use on banners, printout material and more.


  1. Make a document of any size, normally for me i will always use 500 x 500 for small graphics creation. Using the rounded rectangle tool, having around 8px of radius, draw a perfect square by holding the shift key when draging your mouse. After the square had been created, open the layer blending option, choose the gradient overlay, insert the 2 colors on the respective side (as shown as the above image). Name this layer icon-bg

  2. Then duplicate another layer of it, name this layer glass, select the glass layer, move it to above of icon-bg’s layer, change its color to white(#ffffff) by using the blending option’s color overlay. Change the opacity of it to around 50%. Use the square marquee toolbar draw a selection and you will reach to somewhere that’s shown in the above image. With that marquee selection is active and the glass layer is selected, press the delete key.

  3. Now you will basically have a glass look on it. To further smoothen the look of it, this is an optional step, use the round marquee tool, draw a selection according to what’s shown on the above image. Go to Select > Feather (Ctrl+Alt+D), give it 30px of feather, press “delete” once.

  4. Ctrl+click on the thumbnail of the layer icon-bg to have a marquee selection on it, then go to Select > Modify > Expand, insert 1px and press OK. Then create a new layer below icon-bg, fill the marquee selection with white (#ffffff) color, name the layer shine

  5. After the above step, you wont see any difference because of the white background. So to make things easier to see, create another layer below shine, simply draw a black (#000000) color rectangle, and you will see what you’d done so far. Name this layer dummy-bg

  6. Again use the round marquee tool, draw a selection as shown in the above image, then go to Select > Feather (Ctrl+Alt+D), give it again a 30px, with the shine layer selected, press “delete” twice.

  7. Repeat the above step for the top area, but this time only press “delete” once”.

  8. Now you can see the shine beside it, tweak a bit of the opacity on the shine layer if you want to.

  9. Again Ctrl+click on the thumbnail of the layer icon-bg, go to Select > Modify > Expand, this time insert 2px on it. Create a new layer above the layer dummy-bg but below the layer shine, fill the marquee selection with a color, here i fill it with black (#000000). Give this layer a name of icon-frame

  10. Now hide the layer dummy-bg and you will see what’s shown on the above image, and we are almost done.

  11. Finally, open the blending option for the layer icon-frame, enable the gradient overlay, put in the respective color as shown on the image.

  12. Now basically you’re done, all you have to do now is create the symbol you want and put it in, i will try use the RSS symbol here as an example

  13. Add an inner shadow on it if you want and that’s it, you’d just made yourself a nice, cool, glassy icon!

There are many things you can do with this icon design, here i’ll make an example of what you can do. Reflection. I know many people already know how to do a nice reflection and shadow, but still i will show it for the sake of those who doens’t know. I will go through this very fast and not so detail.


  1. Continue with the previous work, create a layer below this icon, using the Eclipse Tool, black fill, draw a long but thin eclipse as shown in the above image

  2. Using the Gaussian Blur tool, blur it with 1.0px. Then adjust the opacity a bit

  3. Now duplicate the whole icon, flip it vertical, nudge it until its bottom part touches each other like what is shown on the image

  4. Then using round marquee, select the region shown in the image, use feather of 30px again, press “delete” 3 - 4 times

  5. Adjust the opacity, and now you have yourself a beautiful effect with this icon you’d just made!

Color tweaking also can be done on this icon, with this you could achieve something shown at bottom. With this, hope you enjoy the tutorial!








Related Entries


87 Comment(s) On This Topic

seraphangel said during March 9th, 2007 at 1:08 pm

nice tutorial, was wondering when you will continue with your shoutbox tutorial.

boon said during March 9th, 2007 at 10:18 pm

probably after this tutorial, my next coming tutorial will be continue-ing the shoutbox ;)

crystal said during March 11th, 2007 at 2:37 am

wahhh happiness to me le. i also wanted to ask you for some guide :P. nice icon

boon said during March 11th, 2007 at 6:37 pm

hahah, bring it to me ;) enjoy the tutorial woh :D

mohamed said during March 18th, 2007 at 3:37 am

very good tutorial

http://www.ushareing.com

datelus said during March 18th, 2007 at 4:54 am

Really well made tutorial :) thank you

boon said during March 18th, 2007 at 2:13 pm

mohamed, datelus: thanks! hope u enjoy it ;)

Nab said during March 19th, 2007 at 6:00 am

I had some problems whith the glass.

With that marquee selection is active and the glass layer is selected, press the delete key.

When pressing the delete key the complete glass layer gets deleted.

Also, I am not sure about this “change its color to white(#ffffff) by using the blending option’s color overlay”. Do I need to deactivate the gradient overlay?

ilovegooey said during March 19th, 2007 at 10:08 am

Nice tut, thanks

ilovegooey.co.uk

boon said during March 19th, 2007 at 10:09 am

i believe that’s at the step 2 right. Assuming ur marquee selection is the same as mine which is at the bottom portion, then i believe u are having ur layer window active while u pressed the delete. I guess before u press delete ur last click was on the layer window itself, this would activate the layer window and deactivate the stage layer, so everything u do will only affect the layer window. To make sure u r deleting the right thing, What u have to do is click on the stage window (where u draw ur things), then only press delete ;)

u do not have to deactivate the gradient overlay, because if u enable the color overlay, it will over-right, or in other words cover up the gradient overlay. In short, color overlay on top of gradient overlay.

hope this clear things up for u :)

Nelly said during March 19th, 2007 at 11:19 pm

Hi, I am a beginner in PhotoShop.

“After the square had been created, open the layer blending option, choose the gradient overlay, insert the 2 colors on the respective side”

Can you explain how i can insert 2 colors on the respective side?
Thanks!

Nab said during March 20th, 2007 at 12:30 am

I now created the icon. Thanks for the tutorial.

@Nelly: I am not sure if this is the best and fastest way but I will try:

Open the gradient overlay window, double click into the drop down menu where you can see the two gradient colors. Now you see a color bar with two squares at the top and two squares at the bottom. Double click the bottom squares and enter your color value.

If there is a better way, I am also interested.

boon said during March 20th, 2007 at 1:16 am

@Nelly: refer explanation below.

@Nab: i m not sure where ur drop down menu comes from, but here the way i do and is recommended to do so too.

right click on the layer (at the layer windows) of the object which u wanted to apply the gradient, select “Blending Options”.
Then will appear another window, in this window u can apply all sorts of properties onto tat particular layer (u can explore it urself later on). In this case, select on the “gradient overlay” (it will enable s the gradient), by default u will have the black/white gradient.
Now make sure u really click on the “gradient overlay” text instead of just the selection box, this is to go to the place where u can change the color. Now do the color change accordingly, i assume u will know where to change it once u see ;)

Nelly said during March 20th, 2007 at 1:55 am

Got it, thanks guys! :)

boon said during March 20th, 2007 at 10:14 am

ur most welcome Nelly :)

B@rmaley.e> said during March 21st, 2007 at 12:42 am

Cool!

Nairrah said during March 25th, 2007 at 3:54 am

I too have the problem of the layer deleting. Can you break step 2 down even more?

Nairrah said during March 25th, 2007 at 4:00 am

I rasterized the layer then deleted. Was this the missing piece?

boon said during March 25th, 2007 at 1:15 pm

@Nairrah: in Photoshop, u will always have to select the layer in order to do “action” on the particular object on that layer, right?

so after the layer glass has been created. Move this layer above icon-bg layer. Then change its opacity. (I believe u get here right)

Then draw a rectangular marquee like shown on the image. after u finish drawing it, click on the layer glass. With this layer glass is selected, and also the marquee selection is still there, press delete. Then u will get what is in the image ;)

klein said during March 30th, 2007 at 9:00 am

wow! this is very nice, i will do this trick in my site http://www.designersyard.com

boon said during March 31st, 2007 at 1:01 am

oh yeah Klein, hope to see the trick result on ur site soon ;)

ouchast said during April 1st, 2007 at 3:12 am

Great tutorial!
I’m going to check out your other tutorials now.

ps user said during April 1st, 2007 at 6:34 pm

hi im kinda new to photoshop,

i had a problem in the second step..

when i selected the portion with the marquee tool and pressed delete, it wouldnt let me.. this error msg came up that sed ‘could not complete your request because the content of the layer is not directly editable’

thanks

boon said during April 1st, 2007 at 9:22 pm

@ouchast: thanks! hope u like the other tutorial as well! be sure to come back coz will have new tutorial once in a while ;)

@ps user: could u explain how u draw the rectangle or the process u went thru to get step2? bcoz i really nvr come across to this error msg before. Elaborate more so that i can help u ;)

ps user said during April 2nd, 2007 at 6:50 pm

yeah sure

k i opened up a new canvas, 500 by 500

then on a new layer i used the ‘Rounded Rectangle Tool(U)’ while pressing down shift like you said.

after that i added the gradient overlay n thats it. nothing extra.

when i tried deleting the part it wouldn’t let me. in fact it wont let me do anything to it! =S (such as paint brush tool, eraser tool, magic wand tool, fill etc. nothing! when i go over the canvas with the tool, the cursor turns into a little Ø sign)

im sure adding the blending option has nothing to do with it because i tried the tools on it even before that and it still wouldnt let me. im using photoshop 7 btw.

thanks help appreciated =)

boon said during April 2nd, 2007 at 7:02 pm

hi ps user,

my very first guess is everything that u draw on the stage is in vector format, to solve this u have to rasterize ur layer.

right click on the layer and select “rasterize layer”. If my guess is correct, after this action u will be able to use any tools on it ;)

hope this helps!

ps user said during April 3rd, 2007 at 10:52 pm

ohhhhh ok

yep that solved it

thanks!

tutorials great btw keep em coming

boon said during April 4th, 2007 at 12:28 am

good to hear u solved it ;)
thanks for the compliment, will post some other tutorial once i m free :D

meethere said during April 7th, 2007 at 7:28 pm

I am a total newbie to photoshop. This was my first attempt and to my surprise I was able to create the icon upto 11 as nicely as yours.
But i was not able to create those RSS style - can only place that small square :)
How to create those 2 curve bars ??

Also, i am having problem with reflection - How to duplicate whole icon - i can only duplicate individual layer :(

Thanks very much.

boon said during April 8th, 2007 at 12:59 am

hi meethere,

to make the rss icon, u can first create a white circle, then make another smaller circle align to its center, now u have an inner and outer circle. Then u can cut the outer circle base on the inner circle. After this u will basically have a donut shape circle, now place ur donut onto the icon, and cut it according to how bit u wan (around 1/4 of the donut), then u will have your 1st curve bar. Repeat the same for the smaller bar ;)

to duplicate the whole icon, duplicate all the layers and merge them together, then only flip it.

hope this help :)

Mangled said during April 15th, 2007 at 7:20 pm

Very good tutorial and really good explained, thanks

.Jazzy said during April 16th, 2007 at 1:12 am

I was stuck at the Dummy-Bg project,How exactly do i fill in that layer full black?

boon said during April 16th, 2007 at 10:01 am

hi .Jazzy, simply create a new layer underneath all the above’s layers, then use the Paint Bucket Tool (or press G), choose the black color in the color palette. Then left click on the stage, then it will fill this particular layer with black color.

geo said during May 20th, 2007 at 4:55 am

First of all AWESOME tutorial !!! Thanks

I had no problems creating the red icons like the one you have.
but when tried the blue version it sucked wait actually I suck at color selections:(

could you give me the colors for the blue icon that you have created. thanks

boon said during May 20th, 2007 at 4:32 pm

hi geo, first of all also, thanks for supporting my tutorial!

u could use #0045ac for the bottom part and #044ebc for the top ;)

geo said during May 21st, 2007 at 2:22 am

Thanks boon :)

Уроки Photoshop :: Уроки Фотошоп :: Регулярные обновления базы уроков » Классны said during May 22nd, 2007 at 3:41 am

[...] http://boonage.pjss2.net/2007/03/09/photoshop-cool-glassy-icon-creation/ ВНИМАНИЕ! Столкнулись с трудностями при выполнении [...]

JU5TY said during June 8th, 2007 at 10:41 pm

Hi Boon

I’m very new to Photoshop, but I’ve made it to step 11!

When creating the RSS logo you said:

“Then u can cut the outer circle base on the inner circle. After this u will basically have a donut shape circle, now place ur donut onto the icon, and cut it according to how bit u wan (around 1/4 of the donut)”

Could you elaborate on how you cut the outer circle base on the inner circle to create the donut shape? Also once placed on the icon how do you cut it according, what tool do you cut with etc?

Also creating the mirror image, I have duplicated each layer and used the ‘Layer – Merge Layer’ to merge the duplicated layers. But when merged, they don’t show the layers in the correct order and I’m unable to flip them vertically.
Could you please elaborate on the duplicate/merge/flip process please?

Finally, ideally i’d like the logo in yellow, I selected the colours myself, but it all appeared a bit faint, is yellow a suitable colour for this logo? If it is would you be able to suggest colour codes for steps 1 and 11?

Sorry so many questions, I’m still learning the basics of Photoshop.
Many thanks for your help.

boon said during June 9th, 2007 at 12:16 am

hi Ju5ty,

first of all thanks for visiting this tutorial and giving me feedback ;)

i assume u have an outer and inner circle now. simple just ctrl + click on the inner circle’s thumbnail then u will have a marquee selection over the inner circle. With that marquee selection is there, select the outer circle layer and press delete, then hide the inner circle layer. If everything goes accordingly, u will have ur donut shape now.

To cut it, just use the rectangle marquee tool, select the region where u wanna delete, in this case is those 3/4 unwanted part. Just select those 3/4 region part by part and delete it one by one.

—————————-

Now for the mirror. I suggest you group all the related layers together. To do so, select all the related layers, i assume u know how to multiple select the layers. Then ctrl+G to group all of them. Then duplicate the group and merger ONLY the group that u had duplicated. Then u will have duplicated image which is in order and u can do the flip process ;)

—————————-

Yellow can be use, try #efce00 at the bottom and #fddc10 at the top, should work fine. However still is not recommended to use yellow because yellow itself is a very bright color and the brightness may cover up the glassiness of the icon itself.

—————————-

Hope these answer helps u!

JU5TY said during June 9th, 2007 at 6:28 am

Thanks Boon, you’re a star! All sorted now! Photoshop is addictive!

boon said during June 10th, 2007 at 2:44 am

haha, no problem at all ;) yup, it is very addictive indeed :D

18 Essential Photoshop Tutorials for Blogger | The Tao of Blogging to Wealth said during September 10th, 2007 at 8:39 am

[...] Cool Glassy Feed Icon Creation [...]

18 Tutoriales de Photoshop para bloggers said during September 14th, 2007 at 2:06 pm

[...] Cool Glassy Feed Icon Creation [...]

Martin said during April 6th, 2008 at 5:32 pm

Super tolles Tutorial. Sieht einfach klasse aus.
Super zum Photoshop verstehen.

RojoSanKa said during May 8th, 2008 at 4:42 am

anyone knows of a place i can find a good selection of symbols for this icon? Like the white feed symbol.

Alexànder said during June 30th, 2008 at 9:24 pm

Íà ñàéòå âû ìîæåòå óçíàòü êàêèå äîêóìåíòû ïîòðåáóþòñÿ ïðè îôîðìëåíèè êóïëè-ïðîäàæè àâòîìîáèëÿ, ñòðàõîâêè ÎÑÀÃÎ èëè ÊÀÑÊÎ à, ïîçâîíèâ íàì áîëåå ïîäðîáíî óçíàòü, êàê ïðîõîäèò ïåðåîôîðìëåíèå àâòîìîáèëÿ îôîðìëåíèå ñòðàõîâîãî ïîëèñà.

http://remont-komplekt.ru/ said during July 6th, 2008 at 2:49 am

Àêòóàëüíàÿ òåìà. Íàïèñàíîå äîñòîéíî âíèìàíèÿ.

Наташа said during September 6th, 2008 at 11:37 pm

Как вам идея создать электронный сборник по вашему сайту? Можно все актуальные и полезные статьи внести в pdf и предоставлять возможность скачивать?! Я бы воспользовалась!

Андрей said during September 26th, 2008 at 7:36 am

Думаю сделать подобное в своем блоге. В принципе, приглянулся сайт.

Гангстерито said during October 21st, 2008 at 6:45 am

привет. Админ, хошь прикол ? :D к тебе на сайт можна заходить через яндекс :)
yandex.ru/redir?url=boonage.pjss2.net

Андрей said during November 7th, 2008 at 7:56 pm

Красиво!

хотя идея не нова

уроки фотошопа said during November 7th, 2008 at 11:15 pm

Спасибо за уроки фотошопа!

wintervssummer said during November 29th, 2008 at 11:55 pm

I very much love summer :)
Someone very much loves winter :(
I Wish to know whom more :)
For what you love winter?
For what you love summer? Let’s argue :)

NikeWadia said during January 17th, 2009 at 5:11 am

Отличные новости, так держать, удачи в будущем.

Sun said during January 20th, 2009 at 4:18 am

Thanks a lot for this tutorial, keep up the good work

NikeWadia said during January 24th, 2009 at 10:11 am

Стоит ли ждать обновления?.

NikeWadia said during January 24th, 2009 at 10:27 am

Могу предложить много инфы по данной теме, нужно?.

NikeWadia said during January 26th, 2009 at 6:58 pm

Как часто публикуете новости по данной тематике?.

Talltoolalo said during January 29th, 2009 at 2:02 pm

Супер. Спасибо, так давно искал этот материал. Ну просто респектище автору. Никогда не забуду теперь

Леон said during February 5th, 2009 at 9:16 am

Я тоже в блоге про такое пишу, только на тему кино

Fedor said during February 21st, 2009 at 2:40 am

good job!

Bittersweet said during February 24th, 2009 at 6:21 am

Sait kakto s pereboimi rabotaet

Гамлет said during February 28th, 2009 at 7:49 am

Жесть :) Хорошая статья и картинка в тему, молодец:)

консультант said during March 3rd, 2009 at 2:31 am

Суперский пост! Блог уже в ридере
За такие посты надо награды давать, на полном серьезе!

Валерий said during April 14th, 2009 at 5:38 pm

ООО ЭНЕРГОСПЕЦТЕХНИКА производит мобильную спецтехнику. В наших разработакахсветильники наружного освещения ЖКУ-250-У1 - для освещения улиц - уличные светильники.

Qt Framework said during April 16th, 2009 at 12:52 pm

Cool!

ioann said during April 20th, 2009 at 4:39 pm

Thank you author

Брокер said during May 20th, 2009 at 1:42 am

Пост зачётный, но с приходом лета, чувствую, все расслабляются, скоро нормальных постов вообще не будет, до самой осени.

Ple said during June 18th, 2009 at 5:53 pm

Thank you very much for the tutorial.

кceня said during June 24th, 2009 at 4:59 am

Просто прекрасно - очень интересные мысли. Разжевано специально как бы для меня :)

Вениамин Райский said during June 29th, 2009 at 9:52 pm

Хороший пост! Читать мне было интересно. Теперь буду еще чаще заглядывать к вам на блог.

Витаутас Радьков said during June 29th, 2009 at 11:04 pm

Спасибо за новость

BratMamedGunes said during July 2nd, 2009 at 7:23 am

Да, инет - он не маленький, если и такое даже можно найти ;)

Владимир Осокин said during July 7th, 2009 at 9:36 pm

Клево!!! Вечером обязательно посмотрю

Егор Дасаев said during July 9th, 2009 at 1:51 am

{Читаю {ваш|этот|} блог, и понимаю, что {ничего|нифига} не понимаю. Все так запутано. :)

acquaintance said during July 16th, 2009 at 7:31 pm

Спасибо. Познавательно. Еще по теме можно глянуть здесь http://beautiteendatin.k2free.com

Артем said during July 23rd, 2009 at 1:25 am

За статью сенкс, все по делу, достаточно много кто это применяет

XyлиГAHкa said during July 28th, 2009 at 6:28 pm

НЕ в тему немного, но радует, что автор к блогу не просто тупо взял какую то тему для Wordpress, а сделал что то свое и вкладывает в это дело душу.

Дмитрий Семенов said during August 21st, 2009 at 9:58 am

Почитал, порадовало А может и реально всегда думать исключительно о хорошем, а все плохое переворачивать?

Виталий Райзман said during August 21st, 2009 at 6:47 pm

Действительно удивили и порадовали Никогда не поверил бы, что даже такое бывает

Olegreze said during September 10th, 2009 at 4:58 am

Основная задача Яндекса — давать ответы на вопросы пользователей!

Дмитрий Шеметов said during October 8th, 2009 at 1:51 pm

Классно написано, только тема не совсем ясна. Что именно автор хотел этим сказать? Напишите. Может, я просто не догнал?

adavyrasp said during October 9th, 2009 at 1:09 pm

Не хиленький материальчик….+1

Павел Хохолин said during October 9th, 2009 at 10:03 pm

Новые посты, имхо, нынче слишком редко случаются

Клемент Андреев said during October 22nd, 2009 at 2:05 pm

В современной экономической ситуации все это рпеобретает несколько иной смысл - весьма смешной я бы сказал

Станислав Шумилов said during October 22nd, 2009 at 4:51 pm

Спасибо! Доходчиво и понятно объяснил

Седдор said during November 29th, 2009 at 10:43 pm

Впечатлило, однако!

Leave a Reply