Web 2.0 reflective text tutorial

Mar 18th, 2007 | By Rad | Category: Web site Design

Photoshop shinny text tutorial

All right. We all have seen the shinny text out there. We all want it. we will have it! In the last tutorial on reflective text I went over how to make text reflect on a flat plane.
Read that tutorial first to understand how I did that. ( we will be doing it here as well) The great Shannon will now attempt a more coherent tutorial on making the shinny text. The end result looks like figure1.

figure 1The first step in this adventure is to make a new document! (imagine that) I made mine 512×512. After that I used a full figured font (nokianvirillanregular) at 44 pts.
and filled it with a red( #9d0f0f) to make it look like this.

figure 2After filling the text with the red ctrl-click the text layer to select the text. Then taking the elliptical selection tool use alt-left click to subtract a portion of the text like so.
With this selection active create a new layer above the text and then go to the select menu and invert the selection. now all of this layer minus the little bit of text you originally selected is ready for a lighter shade of red to filled in (#ec8f8f) and would look like this.

Now once again select the text by ctrl-clicking the text layer. this will select ALL the text. staying on the new pink layer with this selection invert the selection and hit delete. You should now have text that looks like this.

Now let the games begin! This is the part of the tutorial that, to me at least, is the most fun! Lets make that text SHINNY!! The first part of the process is simple. We will use the bevel and emboss filter on the text to round it out a bit. Use these settings (but feel free to play with them of course.)

First rasterizing the type layer is important, as some of the things we are going to do we will have to merge the layers As a fatter of fact do so now. After we merge the layers we will do the beveling. with these settings. and it should look something like the next figure.

now create a new layer above the text layer we just finished. ctrl-click the text layer to select the text while staying on the empty layer. Now chose the gradient fill tool and select white to transparent. make a fill starting at the top of the letters, and only fill about the top 1/8 to 1/4 of the text from the top. like this.

After you have done that, make a new layer and keep the selection of the text in place, because we will make an upward fill ( again white to trans) but only make it about 5-10 pixels. this will give a bit of the shine from the floor we will make here soon.

The next is to de-saturate the image about %75. and give it a bit of color from
the same menu. I used a bit of a blue tinge. That’s it! after you have run the tutorial on reflective text, you should come up with something like this.

See you all the next time!

Shannon

Tampa website design