Web Shop Design: Add Polish to Products with Reflections

Apple kicked off a trend a few years ago when it started adding reflections to not only the images on its Web site but also inside many of its applications such as iTunes. Immediately after that reflections became a Web design trend that continues to grow in popularity.

If you're looking to add some interesting visual effects to your Web site, reflections should be at the top of the list of considerations. Reflections are easy to create in Photoshop and I'll show you how to achieve this look.

Editor's Picks

» Web Shop Design: Plugging into Photoshop » Web Shop Design: Tips on Using Color » Prepping Product Shots for Web Shops » Time is Money: Batch Edit Photos, Boost Bottom Line » Web Shop Design: Font Fantastic » Five Photoshop Shortcuts for Quick Image Editing » Web Shop Design: Putting Color into Action » Web Shop Design: Using Text with Images in Photoshop

Before I continue, however, I should point out that there are two schools of thought about reflections. One says that reflections are all around us and using them on Web sites is a way of mimicking something we're all used to seeing. In this sense, reflections are unlikely to be going away anytime soon.

The other school of thought is that the use of reflections will eventually appear gimmicky as they become more and more common. Regardless of which is right and which is wrong, the fact remains that reflections are still incredibly popular on the Web and even Apple still uses them on its home page and through out its site.

If you have decided that reflections are for you, here's how to add them to your images.

Make Room: Prep the Product Shot

Start by opening your image in Photoshop. You'll need to convert the background layer into a regular layer so double click on the background layer in the Layers palette and click OK. This lets you place layers below this layer and also enlarge the canvas size by adding transparent pixels.

To create a reflection you will need to enlarge your canvas. (Click for larger image.)

To increase the height of the image to make room for the reflection, choose Image > Canvas Size. Read off the current image height from the top of the dialog and type it into the Height box in the New Size area of the dialog.

Here, too, you should enable the Relative checkbox and in the Anchor area, from the nine boxes shown, select the middle one in the top row. Click OK and the extra space will be added below the image.

Create the Reflection

To create the reflection, you need to duplicate the current image. To do this, right click the image layer in the Layers palette and choose Duplicate Layer.

Invert a duplicate of the original image to create your reflected image. (Click for larger image.)

Name this layer "Reflection" so you can identify it and click OK. Click on the Reflection layer, click the Move tool and choose Edit > Transform > Flip Vertical to invert the image.

Drag the new duplicate layer to the foot of the canvas and line it up immediately below the original image. If you are using Photoshop CS2 or CS3, the magenta colored Smart Guides will show when you have the images correctly aligned.

Use smart guides in Photoshop CS2 and CS3 to align the reflected image. (Click for larger image.)

You can create your reflection as a foreshortened version of the original image by making the reflection layer smaller. To do this, Control or Command + Click on the reflection layer thumbnail to select it, click the Move tool and drag upward on the bottom sizing handle to shrink the reflection to around two-thirds the height of the original image.

Fade the Effect

To make the reflection look more realistic, fade it out so it is more opaque when closer to the image and so it disappears and becomes more transparent as you move away. This effect can be created using a Layer Mask added to the reflection layer. Click the reflection layer and from the foot of the Layers palette locate and click the Add Layer Mask icon. This adds a white filled layer mask to the image.

To fade the reflection, click on the layer mask to select it and click the Gradient tool. From the gradient dropdown list on the Tool Options toolbar select the "Black, white" gradient. Click the Linear button, set the Mode to Normal and the Opacity to 100 percent and disable Reverse and Dither. Click at the bottom end of the reflected image and drag upward to apply the gradient to the mask. If the gradient does not result in the exact amount of fading that you are looking for in the image, apply the gradient to the mask again and continue until you get the desired amount of fading.

It can help you determine the amount of fading required if you add a layer to the image filled with the same color as you plan to use for the Web site background. Choose Layer > New > Layer and click OK. Drag the layer to the foot of the Layer palette, set the foreground color to your Web site background color, click the new blank layer and press Alt (or Option) + backspace to fill the layer with the selected foreground color.

If the mask isn't exactly right, click the Gradient tool, click the mask to select it and continue to reapply the gradient to the mask.

Use a gradient fill on a mask to fade out the gradient. (Click for larger image.)

When you're ready to save the image for the Web, use the Crop tool to select the portion of the image to keep, and save it.

Rounded Edges

In some cases you may want to apply a reflection to an image with rounded edges. In this situation you should crop the image to apply the rounded edges before you reflect the image.

Use the rounded rectangle shape to crop your image to a rounded rectangle. (Click for larger image.)

To crop an image using rounded edges, from the Shapes area of the Tool palette select Rounded Rectangle. On the Tool Options bar select the Paths option and drag over the image to create the rounded rectangle path. The path shows as a single dark line around the image rather than the marching ants typical of a selection.

To convert the path to a selection, display the Paths palette (choose Window > Paths to view it), and from the foot of the paths palette select the Load Path as a Selection icon. Switch back to the Layers palette, make sure that the image layer is selected, choose Select > Inverse to invert the selection and press Delete to remove it. Now if you create a reflection of this image its reflection will have rounded edges too.

It's very easy to overdo a good thing and it is possible to overdo the use of reflections on your product photos. However, that said, reflections look very classy, especially on black and white backgrounds where they give a lustrous feel suggesting a highly polished surface. Keep an eye out as you're browsing the Web for sites that use reflections and see how you can adapt the looks you like for use on your own Web shop.

Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.

Do you have a comment or question about this article or other e-commerce topics in general? Speak out in the SmallBusinessComputing.com E-Commerce Forum. Join the discussion today!