Professional and Affordable Web Design

0800 080 5401

Creating reflections in Photoshop

In this Tutorial, I’ll 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. Let’s 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 don’t know about you, but I already feel spooked.

8. Now it’s 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 it’s the tricky part. You have to select gradient tool (make sure you’ve 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%, it’s 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 you’ve enjoyed this tutorial. Good luck with your own experiments ;)

Comments4 Comments


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

08 June 2009

Web Designer, London

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.

07 June 2009

Shamima Sultana

Great tutorial... thanks for the post

03 March 2010

Richard Brown

Thanks for the tutorials. I've had a bit of fun trying them out tonight and I have learnt a thing or two. Keep up the good work.

13 August 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of website

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of website

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »