Lowter

Apple's design and style has permeated throughout the web development world. It is apparent in the current web design trend, especially in the Web 2.0 movement. The current Apple-influenced web trend includes excessive gradients, glassy reflections, spinning pinwheels, and more. In this tutorial, I am going to guide you through creating Apple-style glassy reflections in Adobe Photoshop. This effect can add a nice, sexy touch to your website if done in the appropriate locations, such as a large banner or a logo.

Create the Document

First, select the image that you want to have reflected. I am going to be using an image of the Swedish flag. Create a new Photoshop document with the same width as your original image, but double its height. For example, my original image has the dimensions of 320 by 256 pixels, so my document will have the dimensions of 320 by 512 pixels.

1.1 Newly created Photoshop document

Create a new layer called "Original" and paste your selected image onto that layer, making sure that the image is flush with the top of the document.

Reflect the Image

2.1 Layer toolbox

Second, we need to create a reflected version of your original image. Duplicate the "Original" layer so that you now have two layers containing the same image. To duplicate the "Original" layer, right click on it in the "Layers" toolbox and select "Duplicate Layer". Label your newly duplicated layer "Reflection".

2.2 Duplicated and stacked images

Select the "Move Tool" and move the image in the "Reflection" layer to fill the lower half of the document. You should have two copies of the same image stacked on top of each other.

2.3 Reflected image

With the "Reflection" layer selected, go to Edit -> Transform -> Flip Vertical. You should now have the original image and the reflected image beneath it.

Add the Glassy Effect

Third, we are going to create the glassy effect of the reflection. Right click on the "Reflection" layer and select "Blending Options".

3.1 Blending Options: 30% opacity

Set the layer's "Opacity" to 30%.

Next, still from within Blending Options, select "Gradient Overlay" in the left-hand menu. We are only going to change the gradient's colouring and leave all of the other settings at their defaults. Click on the coloured bar labelled "Gradient" to change the gradient's colouring.

3.2 Gradient Overlay of white to transparent

Create a gradient that goes from white to transparent. Use the "Foreground to Transparent" preset and just change the starting colour to white. Set the white-colour marker's location to 50%. Now click the "OK" button to save the gradient's colouring and then click "OK" again to save all of the Blending Options.

Note that you can substitute any colour in for white if the background of your webpage happens to be another colour. Just make sure that the "Background" layer is this substituted colour as well.

3.3 Final image

Presto! Now you have an Apple-style glassy reflection of your image. This same technique can be applied to just about anything in Photoshop, including text. Be careful not to overuse this reflection style because it can quickly become overkill on your website. It looks good with large banners and text that you want to stand out, but still look sleek and sexy too!