How to Create the Web 2.0 Effect for Logos and Text

Create New Access Database

The guide below is great for those of you who would like to create the reflection effect for logos and text in Photoshop. This effect has been seen a lot with the rise of Web 2.0 in websites and web applications. I’ve setup this tutorial with a sample logo I created so I am assuming that you have a logo or text file to work with. If you have any comments or questions, please post them below.

Note: I used Photoshop CS3 to create this tutorial, however these steps should be similar in other versions of Photoshop. If the text used aligns with the bottom edge of your logo you may encounter problems with the way your reflections look. If you intend on aligning text with the bottom edge of the logo be careful with letters like g, j, p, q, and y; if used as lower-case letters they will "stick out" below the edge. (See examples at the end of the article)

Create Reflections in Photoshop

1. Create a New Folder in the Layers Panel, we do this to group all of the layers that make up your logo.

Create Reflections in Photoshop

2. Rename the folder you just created so to make sure you can identify it.


Create Reflections in Photoshop

3. Select and drag the layers that make up your logo into the Logo folder you just created.

Create Reflections in Photoshop

4. Right-click the logo folder you just created and select Duplicate Group from the menu.

Create Reflections in Photoshop

5. Name the duplicate folder Reflection (You can name it what you like, I suggest to include reflection so that you can identify it). Click OK.

Create Reflections in Photoshop

6. The folder you duplicated will most likely appear above the original folder containing your layers, if this is the case, select and drag the reflection below the original logo file.

Note: Be careful not to place the folder inside the other folder, if this happens just select and drag it outside the folder. The reason for placing the reflection folder below the original is to ensure the top layer overlaps the lower layer.

Create Reflections in Photoshop

7. Make sure the reflection layer folder is selected and click on Edit > Transform > Flip Vertical (this will flip the layer on the vertical axis, it will place it upside down).

Create Reflections in Photoshop

8. After you flip the layer you need to drag the flipped layer below the first layer (make sure not to drag it in the layers panel, you’ve already done this). Align it so that the bottom of the top logo is touching the top of the bottom logo (or the bottom since it’s flipped). (See above)

Create Reflections in Photoshop

9. Go back to the layers panel and click on the Logo Reflection layer, click on the add layer mask button to create a layer mask.

Create Reflections in Photoshop

10. Select the Gradient Tool from the Tool panel.

Create Reflections in Photoshop

11. This next step is going to require several attempts so that you get the right reflection effect you want. Click on the an area slightly above the logo above (green dot of the arrow) and drag down to the area slightly above (the end of the arrow tip) the lower logo. Use the screenshot above as reference.

Create Reflections in Photoshop

12. The screenshot above is an example of your logo/text should look. The original layer above the flipped reflection layer that slightly fades out.

Example of issue with lower-case letters

Create Reflections in Photoshop

The g from the both layers overlap.

Create Reflections in Photoshop

I used a Capital G and the problem is resolved.

There are other ways of handling the overlap issue; changing the design, not using text, using all caps, etc. If you would like to share any ideas please do so below.