Shiny Glass Logo

Create a sleek shiny glass logo in photoshop quickly and easily.

Shiny glass logos are all the rage right now and it seems everyone these days (including us) is doing it. So here is a dead easy tutorial on how to create a shiny glass logo in Photoshop.

Step 1: Create some Text

First, create a new file (File > New) with dimensions of 300x300 pixels. Select the Text Tool in your tool panel, click on the canvas and type in some text in a nice thick styled font. I'm using a font called Planet Kosmos which I picked up from dafont.com.

Step2: Add Gradient

Next, in the Layers window, right-click on the text layer and select Blending Options. IN the Layer Style window click on Gradient Overlay. Create a gradient with a dark colour at the top and a lighter colour at the bottom. Here are the settings I have used:

Left Gradient Stop: #50A8E0
Right Gradient Stop: #074189

The key is for the top colour to be rather dark and the bottom to look like its almost a fluorescent colour (or lit up).

Step 3: Create Selection

Now, this step is what makes the shiny glass effect work and may take a few tries before you get it right. Create a new layer above your text layer. Select the Rectangular Marquee Tool (square selection tool). and create a selection over the top half of the text.

Step 4: Fill Selection

Now select the paint bucket tool and fill in your selection. Don't worry about the colour, we are about to get rid of it.

 

Step 5: Apply Shine Gradient to Fill

Now, in the layers window, right-click on the filled layer and select Blending Options. Now, drag the 'Fill' slider all the way over the 0. This will make your layer appear to have no fill at all. Next, go down to Gradient Overlay and open of the gradient (click on it). Make both stops solid which (#ffffff). Then also change the opacity stoppers so the the left one is nearly 0 and the right one is 100 (see screenshot)

 

Step 6: Select Text

We are nearly done. If you still have a selection...selected, press (ctrl-D) to deselect. Now, we are going to select the shape of the text. To do this hold down ctrl and click on the text layer. You should then see the selection in the shap of your text.

Step 7: Subtract Text from Shine Gradient

Now we want to inverse the selection. Shft-Ctrl-I will do this for you. Now, make sure your still on the top layer (the one with the white faded gradient) and hit Delete. This will delete all the gradient outside the shape of the text. If you are using a white background, you won't see the different, but if your not, you will because your white gradient will be in the shape of your text. Here is what is happening on a non-white background:

 

Final Results

That's it. You now have a shiny glass logo. You can go further and add a stroke and drop shadow to the text like I have done to get the finished product below. Experiment with different colours and gradient settings.


Comments

Matt @ 16th Apr 2009

Hey thanks this tutorial helped me with what i was trying to do and it was very easy to follow

David @ 16th Apr 2009

@Matt

Glad to hear that its been useful!

text-to-tv @ 23rd Apr 2009

Thanks! Exactly what I needed!

David @ 24th Apr 2009

@text-to-tv Glad to help!

Evan @ 17th May 2009

THANKS! -- looking for a descriptive tutorial on this for some time now

David @ 17th May 2009

@Evan Glad you found it helpful. Great thing about this method is that it can be applied to all sorts of shapes. You could also get creative and curve the shine gradient.

nadeem @ 13th Aug 2009

i cant understand shiny glass logo? plz tell me in brief

nadeem @ 13th Aug 2009

tell me plz

David @ 13th Aug 2009

@nadeem I don't quite understand how you wish me to explain it in brief when there is a tutorial above. Please use the contact page and maybe I can clear things up via email.

nadeem @ 14th Aug 2009

ok sir plz alart to my email

Matt @ 19th Oct 2009

I am having a problem when I get to Step:6. I select the text by hitting ctrl and clicking the text but it selects the whole layer rather than just the area around the text. Any suggestions? Btw I am using CS4 if that makes any difference.

John @ 19th Oct 2009

I am having the same problem as Matt is having above. Unfortunately I am unable to select the text layer. It selects the whole layer. Any help would be greatly appreciated.

J @ 24th Nov 2009

I am also having the same problem the two posters above me have stated. Is this a CS4 problem or is there something we are doing wrong?

Would love if you could get back to us on this, thanks for your help so far.

adam @ 1st Mar 2010

Matt

You need to click on the T in the square (text) on the layer, not the layer itself

David @ 1st Mar 2010

You can make a selection of the layer by clicking on the tiny thumbnail of the layer in the Layers Panel

channa abeetha bandara @ 9th May 2010

Excellent!!!!!This helped me great to design a Logo.

Ivan @ 13th Aug 2010

Thank you very much for the tutorial! Very cool and easy to follow :D

Vinz @ 3rd Mar 2014

What font is that ? who know?

Vinz @ 3rd Mar 2014

What font is that ? who know?

Vinz @ 3rd Mar 2014

what font is that?

David @ 3rd Mar 2014

It's called Planet Kosmos

Add a Comment

required
required, but not shared

© 2014 Supadupa Web Design