Related resources
Other articles
- Outside Europe »
- How to create layers in Photoshop »
- Changing eye colour to Blue in Photoshop »
- How to unlock a layer in Photoshop »
- How to rotate an image in Photoshop »
- How to group layers in Photoshop »
- Choosing a colour palette for web design »
- Deciding on HTML or Macromedia Flash »
- Creating reflections in Photoshop »
- Selectively removing colour »
Other videos
Creating vector images in Photoshop
Create a vector image from a flat, raster image. What are vectors, anyway?
3:37
Levelling photographs using Photoshops ruler tool
A very quick and effective way to level up any photographs using ruler tool.
1:43
Sharpen photographs using Photoshop's high pass filter
We show how to use Photoshop's high pass filter to sharpen an image.
1:39
Creating a website in Photoshop part 1
Part 1 of a 3 part set. How to build a website from start to finish in Photoshop.
8:09
Selective colourization in Photoshop
We show how to selectively restore colour to areas of an image.
2:09
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).
1. Lets start with a plain document in Photoshop that is 700 x 400 pixels, RGB mode.
2. Set your foreground colour to light Grey (#d7d7d7) and background to Black.
3. Pick the Gradient tool from your toolbox and make sure that your gradient is set to linear, foreground to background mode.
4. Hold down the SHIFT key and draw the line from top to bottom. Holding Shift key will help you keep a straight line.
Now your image should look like this
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]
6. Click on Background copy layer and go to Filter > Render > Difference Clouds
7. Set the Blending mode of this layer to Soft Light and set the opacity to 50%
Now your background should look like this.
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.
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.
10. Now click on the Text layer copy and flip it vertically. Go to Edit > Transform> Flip Vertical
11. Place flipped layer below the text layer so it looks like its reflection
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)
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
14. Now set the opacity of that layer to 20-40%, its up to you.
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 :
16. The final Image should look like this
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?