[Tutorial] How to create an image reflection.

**KoOL** · **How to create an image reflection. -** 06-11-2008, 04:41 AM

In this tutorial I will show you how to create an image reflection with Fireworks & Photoshop. An image reflection can add a very nice feeling of modern site and graphic design every where you look now a days tv, buses, advertisments in magazines there are image reflections one good use for this is web 2.0 designs using a less is best approach also works when making a web site layout.

Fireworks version:

When doing this with Fireworks there are a few very simple things you need to remember. (copy, paste, transform, commands and fade image)

Ok when starting your reflection you need to pick an image to use I have used the light bulb copy this image if you just want to test this tutorial out. once you have your image on your canvas copy it and paste the copied image, now right click the image and go to transform and select scale take into mind the height of the image now scale the image downwards to the same height as the original image once that has been done click the image and go to commands at the top of your Fireworks programme go down to creative and select fade image pick the top right option and click ok you will then have a reflection of your image.

A few tips you might have to use depending on the image you are using.

Depending on the image you may have to delete the background this can help the two images work together when colours are being used in a complicated image.

Some images wont work if you are using an image that is made up of lots of smaller images and you are deleting parts you down want can lead to small white triangles around your images and it can be very hard to fix. The same thing can be said for a plain image on a white back ground and trying to make a reflection on a black background.

Working with text reflections:

With text its a bit more tricky but just as easy when you learn how to do it. Start with typing your text once that is done you can then make your copy and paste it you can then try and scale it but it wont work with text you need to convert it into a symbol first. Right click your text and go down to convert to symbol one you click that you have three options just pick the first option. Your text is now an image you can then scale your text as we did in the first part of this tutorial then go on to fade the image. Note: depending on what font you use makes a big difference when you are giving your text a reflection some fonts just wont work try to keep a font that has a flat bottom example don't use font that are very script like these wont work when you are trying to fade the image because of the letters y, g, j and so on because of the way the text if formatted.

Photoshop Version:

With Photoshop there are a few ways to do this not as easy as Fireworks but in alot of cases you have more to mess around with to get some amazing effects. But I will just show you how to do the basic text fade using Photoshop. If you have Fireworks I would suggest using that for any fading effects you need its alot easier and faster to do.

First way with Photoshop.

Ok to start open a document and type your text, copy that layer once you have that done select the original text layer and go to edit at the top of the screen go to transform and scale the layer down to the same height as the original. Now align the two layers to the position you want.
Once you have this done right click on the original layer this should be the bottom text layer go to blending options and go down to gradient overlay and go onto that once there use the angle tool this is a circle with a line through the middle with a number under neath it set the number to 90 and click ok you will then have a faded image as I was saying its not as easy as Fireworks and this gradient usage can cause problems when using lots of colours or images. There are free plugins you can download from the Adobe.com site which will give you a filter to use much like the Fireworks tool you are probly better off downloading one of them for all your fading needs.

The second way.

The Fade command changes the opacity and blending mode of any filter, painting tool, erasing tool, or colour adjustment. The Fade command blending modes are a subset of those in the painting and editing tools options (excluding the Behind and Clear modes). Applying the Fade command is similar to applying the filter effect on a separate layer and then using the layer opacity and blending mode controls.

Note: The Fade command can also modify the effects of using the Extract command, Liquify command, and Brush Strokes filters.

Apply a filter, painting tool, or colour adjustment to an image or selection.
Choose Edit > Fade. Select the Preview option to preview the effect.
Drag the slider to adjust the opacity, from 0% (transparent) to 100%.
Choose a blending mode from the Mode menu.
Note: The Colour Dodge, Colour Burn, Lighten, Darken, Difference, and Exclusion blending modes do not work on Lab images.
Click OK.