Effective
Web Design

In this tutorial I will show you some very useful techniques for creating glossy text for the web. You can use such texts for Logos, also for some titles on clips and different kind of projects. There have a lots and different tutorials on the web about that. The difference in my tutorial is that I’ll try to combine different techniques which will teach you not just creating the glossy text, but showing you how easy is this in just a few steps.

Step1.

First off course take the type tool and type some text to the blank white space. ? The dimensions of the document for this tutorial are 610px X 299px. The dimension are not so much important but depends of that what size of the text you need and what effects you want to put in. For example you can’t use the stroke settings from this tutorial, If you need a text with bigger dimension then you’ll need to make the stroke with a bigger size. And that’s normal. So let’s continue with the next step.

Step2.

I thing to enlarge the size of the text a little using free transform tool and also I’ll make the first latter of the text bigger and change the color to orange. That’s because to make it more attractive and also to show you that this technique works for any color, but except pure white. For white glossy text you’ll need to add some stroke and maybe something like gradient color in the top part of the text.

Step3.

Now click twice with the mouse on the layer icon and open the layer style feature or you can go there by clicking with the right mouse button and choose Blending Options. Here my settings for this effect: Drop Shadow: multiply: black color, Opacity: 30, Angle: -47 Distance: 9, Spread: 2, Size: 18

Gradient Overlay: Blend Mode : Overlay, Opacity: 20, Gradient: Black to white. (as default)

Stroke: Size: 7, Opacity:30, Gradient: dbdbdb – ffffff

Step4.

After all that you’ll end up with a result as this here And the next thing to do is to make a selection of this text so we’ll make it glossy. To make selection of the text hold CTRL on your keyboard and then click with the mouse on the layer icon. This will make a selection of the text and then take some of the Marquee tools.

Step5

Now with the Rectangular Marquee tool (in this case) press ALT shortcut and deselect the half part of the text. This will leave the top part of the text still selected then fill the selection with white color (CTRL + Backspace) keyboard shortcut and reduce the layer opacity to 25%. And you’ll end with a result like this:

Step6

So you can make the gloss with the Oval marquee tool, or with some of the other tools. Next few stapes explains how to create the reflection of the text. The gloss here I made with Oval Marquee tool just to show you an example.

The first thing that we must do for our reflection is to make a duplicate of our two layers. Select them both and drag with the mouse to the bottom of the panel over the new layer icon or you can use the command from the menu Layer- Duplicate Layer.

Step7.

So the next thing we must do for our reflection it to merge the two new layers. The quickest way to do that is: after they are selected hit CTRL+M from the keyboard. If you do not merge the new layers, after flip them vertical you’ll have a problem with the Gradient color of the stroke. It will appear reverse which will make your reflection to look unreal. After that hit CTRL+T for free transform and flip the new layer to vertical.

Step8.

Now we need to resize the reflection a little. In a way that will sweet our needs.

And the final thing we can do for our reflection is to make a mask which get transparent from the top to the bottom.

And here is our nice Glossy text with reflection for the web. I hope this tutorial teach you something new or at last help you understand some mistakes that probably you have done while making such texts effects.

Note: To view the full size of image, just click on the image, and make sure your java script is enabled.

Here you can download the psd file of this tutorial Glossy-Text-PSD-File.