There has been an enormously popular trend going around throughout websites, and design in general, but it’s mostly hoarded by Apple. The effect is the reflection, as if the object or image undergoing the effect is sitting upon a sheet of glass or any shiny surface. As I said, this is extremely popular so my little tutorial on how to reproduce it may seem (un)fashionably late. But honestly, I’ve only just learned it myself, so I’m going to share it with whoever wants to know.

First off, open a blank document in Photoshop, whatever size you want. Choose the image you would like to reflect and place or copy/paste it into a new layer of the document. It’s good to leave more room beneath the image than above it so that you get a good amount of reflection showing. Next, duplicate the image so that you have two of the same thing. (Three ways to duplicate: (1) drag the layer thumbnail to the new layers button at the bottom of the layers panel; (2) select the layer, select the move tool and hold down the ALT key while you drag the actual image across; (3) right click or control click on the layer thumbnail, select “Duplicate” and select the document you are in currently.)

Now you’re going to want to flip the image, so that the bases meet. You can go to the Edit menu, select Transform, then Flip Vertical. Also, you can use a shortcut by holding COMMAND and T to free transform. (Edit>Free Transform) To flip, hold down SHIFT to constrain proportions and swivel the image 180 degrees. While still in free transform mode, shrink the image from the bottom (the former top) until it’s about half the size of the original image. This gives the feel that there is actually a physical something that the reflection is shining off of at an angle.

Okay, now for the pretty stuff. Add a layer mask to the reflected image. (It’s the button at the bottom of the layers panel that looks like a circle inside a square.) This automatically adds a white layer linked to the image. Next, select the gradient tool and make sure the foreground color is set to black and the gradient type is black to transparent. While holding SHIFT to keep the gradient straight, drag the cursor up from the bottom of the reflected image. This allows the image to fade into the white layer mask. Repeat and/or undo the gradient however much you want. Reduce the opacity of the layer mask to at least 50% so that the reflection remains subtle.

Lastly, arrange the reflected image just below the original, leaving a gap between the two, and align them together. Also, this effect works no matter what color background you use, but white and black give the best effects, depending on your chosen image. The default here is white, as popularized by Apple, but black works great too, also by Apple iTunes.

There! Not so hard, huh? Now you can ride in the web design big leagues with your fancy reflections.