Creating reflections in Photoshop

In this Tutorial, Ill show you how to create a reflection effect. This dark, spooky feeling can be achieved in less than 5 min. It can be used for your web graphics, as well as your friends Gothic band logo (just change the font).

Completed reflection graphic in PhotoshopCompleted reflection graphic in Photoshop
Cheerful gothic band logoCheerful gothic band logo

1. Lets start with a plain document in Photoshop that is 700 x 400 pixels, RGB mode.

Creating new imageCreating new image

2. Set your foreground colour to light Grey (#d7d7d7) and background to Black.

Background and foreground coloursBackground and foreground colours

3. Pick the Gradient tool from your toolbox and make sure that your gradient is set to linear, foreground to background mode.

Gradient tool selectedGradient tool selected
Dark to light gradient selectionDark to light gradient selection

4. Hold down the SHIFT key and draw the line from top to bottom. Holding Shift key will help you keep a straight line.

Drawing gradient in photoshopDrawing gradient in photoshop

Now your image should look like this

Gradient drawnGradient drawn

5. Now duplicate the background layer by dragging it onto the New Layer icon in the bottom right corner of the Layers palette. [duplicating the background layer]

Duplicated background layerDuplicated background layer

6. Click on Background copy layer and go to Filter > Render > Difference Clouds

Difference clouds filterDifference clouds filter

7. Set the Blending mode of this layer to Soft Light and set the opacity to 50%

Soft light blend mode and fifty percent transparencySoft light blend mode and fifty percent transparency

Now your background should look like this.

Moody backgroundMoody background

I dont know about you, but I already feel spooked.

8. Now its time for the Text. Pick the font you want to use - I picked Myriad Pro size 90px.
Set the colour of the font to Black. Now type the text you want.

Myriad Pro font in BlackMyriad Pro font in Black

9. Now the same way we did with background layer, we are going to duplicate the text layer by dragging it onto New Layer icon.

Duplicating the text layerDuplicating the text layer
Duplicated text layerDuplicated text layer

10. Now click on the Text layer copy and flip it vertically. Go to Edit > Transform> Flip Vertical

Transform > flip vertical the copy text layerTransform > flip vertical the copy text layer

11. Place flipped layer below the text layer so it looks like its reflection

Reflection in placeReflection in place

12. Click on the flipped layer and add a Layer mask, then click the mask and set you foreground to white and background to black (Hit D key and then X key on your keyboard)

Text layer copy selectedText layer copy selected
Layer mask addedLayer mask added
Colours selectedColours selected

13. Now its the tricky part. You have to select gradient tool (make sure youve clicked on the layer mask) and draw the line from the top to bottom of the layer. Once you release the mouse you should see the layer fading

Drawing a gradient in the layer maskDrawing a gradient in the layer mask
Layer mask gradient drawnLayer mask gradient drawn

14. Now set the opacity of that layer to 20-40%, its up to you.

Faded reflection and moody backgroundFaded reflection and moody background

15. Now you can play a bit with the look of the Text Layer - move it to the centre of the image.
Make sure that your Reflection layer goes along. You can also play with the styling, I used these settings :

Gradient overlay settings for text layerGradient overlay settings for text layer
Stroke settings for text layerStroke settings for text layer

16. The final Image should look like this

Complete reflected imageComplete reflected image

I hope youve enjoyed this tutorial. Good luck with your own experiments ;)

Comments

Web Designer, London

7th June, 2009 at 7:23pm

I am a trainee Web Designer in London. I recently discovered your Photoshop tutorials. I have found it to be quite useful and I have already used the reflection tutorial to create a poster design. The topics are limted but I guess new topics will be added soon.

rob

8th June, 2009 at 4:55pm

Thanks for the feedback! Glad the article was of use. Is there anything in particular you would like us to cover?

Leave a comment

Antispam code

Enter the text you see to the left

Web Design Shrewsbury telephone 08000 805401

Web Design Manchester telephone 0161 7440075

Web Design Birmingham telephone 0121 7750085

Web Design London telephone 0207 1250044

Valid XHTML/CSS © Mutiny Design - Website Design and Development - Network House, Badgers Way, Oxon Business Park, Shrewsbury, Shropshire SY3 5AB