katun.ch blog

How to make a glossy text with Photoshop

Oli leaved a comment on the post about the wallpaper for mobile devices. He would like some more badges with geeky texts. So I write a little tutorial how you can do that by your self with Adobe Photoshop. It’s only a short tutorial. A step by step how to without many comment of me. So here is the tutorial:

First step:

Open a new Photoshop file like this. It’s up to you how big or small the badge should be.

Make a new textlayer and write your text in black on it. Then you have to switch the background color to black.

Doubleclick on the textlayer and add a stroke effect like this. The stroke’s size is 2 pixels.

Now your text looks like this:

Second step: Add the glossy effect

It’s very simple to add the glossy effect. You have only to add a new layer with a white square and set its opacity to 15%.

Look here:

1. Add a new layer
2. Select the rectangular marquee tool
3. Make a box wich hides circa the half of your text
4. Fill out the selection with white color.
5. Push the command button on your keyboard and click on the text layer. Your text will be selected
6. Invert the selection and press delete on your keyboard.

Now set the opacity of this layer with the withe selection to 15%

.

So now you have a glossy text. But there is one more thing.

The last step is to add the reflection. To add this reflection are only a few steps required.

1. Merge Layer 1 and your textlayer to one by pressing command + e
2. Dublicate the merged layer.
3. Flip the new layer verticaly. You can do that under “Edit->Transform->Flip vertical”
4. Move the layer down until you think its good.
5. Add a layer mask and a black to white gradient.
6. Set the opacity of this layer down to 50%.

So you have your own web 2.0 text with a reflection.

So I hope I could you help with this little tutorial. But I can imagine that this how to is a little bit tricky for one wich don’t know the photoshop application. Therefore I made a little screencast.