Graphics Tutorial: Reflective Surface Text

Sleek, stylish web 2.0 design is not meant only for Mac adverts, this can be created with ease in Photoshop. All you need is the program and roughly fifteen to thirty minutes (depending on your familiarity with the software).

I created this using Photoshop 7, but it should work on CS+. Also, I am on Windows, so the shortcuts will not be the same for Mac users.

01. Create a new image, whatever size you choose, but it must have a white background for this. Next, click on the Text Tool and write something on the blank image, in whatever color you wish. I used a nice spring green (#44C336).

02. Once you have the text on there. Press Ctrl+J to duplicate the text and then Ctrl+T to open the Free Transform Tool. Right click on the box, and choose Flip Vertical. Move the box down, directly below the first layer, leaving a small, empty space between the two (about 2-3 pixels).

03. Press Enter to lock in the transformation.

04. On the Layers Palette, right click on the copy layer and choose Blending Options.

05. Click on the Gradient Overlay option. Set the gradient to the color of your text and white. Should be the first gradient in the editor (Foreground to Background).

06. Click the Reverse button and set the Blend Mode to Lighten or leave it on Normal if that looks better to you. Put Scale on 100%, if is not there already. Click OK.

07. On the Layers Palette, change the Opacity of this layer to 35%.

08. Create a new layer by pressing Shift+Ctrl+N.

09. Select the Pencil Tool. Change the Foreground color to something darker. I chose a darker green (#2F8026).

10. While holding down the Shift button, draw a line (sized 1 pixel) in the empty space between the text layers. Holding Shift down ensures the line stays absolutely straight. Draw a line only about half the size of the text. I drew one from the space between S and O to the space between T and E.

11. Create another new layer by pressing Shift+Ctrl+N and select the Rectangular Marquee Tool.

12. Draw a rectangle (the width of the line you drew) that goes from the line down to the top of the reflective text. Remember, only do this box the width of the line you drew.

13. Fill it with white (#FFFFFF) using the Paint Bucket. Press Ctrl+D to Deselect the Marquee. Now, on the Layers Palette, right click on this layer and choose Blending Options.

14. Choose Gradient Overlay. Pick the gradient you used for the reflection, making sure the dark color is on top and white on the bottom. Leave the Blend Mode: Normal, Opacity: 100%, Style: Linear, Angle: 90°, Scale: 100%. Press OK.

15. Select Filter > Blur > Motion Blur. Set the settings to the following: Angle 0° but set the Distance to whatever looks best to you. I chose 200 pixels.

16. As you can see, this blurred the gradient layer out, but also didn't help much as it is still obscuring our reflection. So, move the layer under the text copy. Still didn't help much, so now we mess with the Opacity of the gradient layer. I changed mine to 30% so that some of the color remains, creating a nice surface, but it's not obstructive to our reflection.

17. Now do the same to the line layer; i.e., repeat step 15.

18. If you feel the line is too dark, you can change the Opacity of it like I did (50%).

19. Take the original text layer and move it to the top in the Layers Palette. Now, go to Layer > Flatten Image and you are done! The image accompanying this tutorial is my finished result.