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).
1. Let’s 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 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.
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 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
14. Now set the opacity of that layer to 20-40%, it’s 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 you’ve enjoyed this tutorial. Good luck with your own experiments ;)
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
See Full Portfolio Some Of Our Work
Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...
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 »