Reflected Phones

Table of Contents

• Rule #1 – Make sure you have the correct image reflected.
• Rule #2 – Angled sides get their own reflections.
• Rule #3 – Separate items get their own reflections.
• Rule #4 – Items pointing toward you have smaller reflections than you think.
• Rule #5 – Cars don’t float. And they have underneathy-bits.
• Rule #6 – Round and cylindrical objects need special handling.
• Bonus Guide: Make It Look More Like a Wet Table Than a Mirror
• More Reflection Catastrophes

Rule #1 – Make sure you have the correct image reflected.

Photoshop Reflection Bloopers
The following images were created without a strict eye for detail.

Upon reflection, it's only 4GB.

Mary J. Blige, Macy Gray: who's gonna notice?

You just spun it around, didn't you?

Reflection Reality
In this photo we can see how a reflection appears when we look at a flat object face-on:

Flat-surfaced item, face on.

Notice the yellow lines I drew on the right-hand copy. The R is both upside down and backward. There is an element of perspective here too.

Reflection Realism in Photoshop
Here’s how to get a much more realistic reflection for a simple, flat item that is not turned at an angle:

1. Start with a layer that has just your image, separate from the background.
2. Press Ctrl+J (Mac: Cmd+J) to duplicate the layer.

Duplicate the layer

3. Press Ctrl+T (Mac: Cmd+T) to enter the Transform command.

Transform command

4. Click and drag down on the top-center square (handle) of the Transform box. Drag it all the way past the bottom edge of your object, so that it is flipped and not quite as tall as the original object.

Drag the top handle down

5. Press Enter/Return to complete the transformation.
6. Click on the Add Layer Mask icon at the bottom of the Layers panel.

Add Layer Mask icon

7. Select the Gradient tool from the Tools panel.

Gradient tool

8. Up in the Control panel, click on the Click to open Gradient picker icon.
9. Select the Black,White gradient (3rd from the left on the top row).

Gradient Picker

10. Select the Linear Gradient in the Control panel.

Linear Gradient

11. Make sure that the layer mask is still selected in the Layers panel. It should have a broken rectangle framing it.

Layer mask selected

12. Click and drag a gradient from the center of the reflection up to where the two box images meet. Hold the Shift key down to keep the gradient straight. Don’t let go of the Shift key until you let go of the mouse button.

Drag a gradient up

Gradient on layer mask

White background

Extra Credit
To make this image more realistic, add perspective.

1. Select the top (reflection) layer and press Ctrl+E (Cmd+E) to merge it down to the original image layer.
2. Edit > Transform > Perspective.
3. Click and drag the bottom-left handle to the right a bit.

Drag the bottom-left handle to the right

4. Press Enter/Return to save the transformation.

Finally, I added a thin black shadow line with the Line tool. I also put a chic white-to-gray gradient on the background layer.

Reflection in perspective

Next: Rule #2 – Angled sides get their own reflections.

Final chicklet

This intermediate tutorial assumes that you already have these skills:

• creating and saving documents
• selecting and using tools
• viewing and using panels (palettes)
• working with gradients
• setting the layer opacity
• creating text

Below is a typical set of old school chicklets.

Old School Chicklets

Now here are some new school chicklets, which can be found at Mashable.

New School Chicklets

I was inspired by Mashable’s chicklets to make my own colorful versions in my BluLob sidebar.

My Chicklets

They take up more room, but boy are they attractive. A few well-placed and well-designed chicklets will have more impact than a giant cluster.

It helps to grab a copy of the original logo for whatever you link to. Let’s make a giant “f” chicklet like Mashable uses for Facebook.

Source File

Here’s a large Facebook logo. Click the image below to get the full-size verison:

Facebook Logo - click for a larger version

Part One: the Logo

We’re going to work with a nice, big image size so it is easy to work with. Later we’ll reduce its size for the Web. Starting with a large file gives us a lot of options when we want to make it smaller. Enlarging a small image = bad. Ensmalling a large image = good.

1. Open the Facebook logo in Photoshop.
2. Use the Rectangular Marquee tool to draw a rectangle around just the letter “f”.

Copy the letter f

3. Press Ctrl+C (Mac: Cmd+C) to copy the pixels to your computer’s clipboard.
4. Start a new document that is 300px by 300px, 72 pixels/inch with a white background. Save the file.
5. Press Ctrl+V (Mac: Cmd+V) to paste the letter f on its own layer above the background. Name this layer “original f”

Paste the letter f

6. Use the Magic Wand tool to select the white pixels of the letter f.
7. Press Ctrl+J (Mac: Cmd+J) to copy the pixels to a new layer at the top. Name this layer “white f”.

Copy the white f to a new layer

8. Turn off visibility of the “original f” layer by clicking on the eye icon on its left edge.
9. Your white f probably has a blue fringe remaining around it. Make sure the “white f” layer is still active, and go to Layer > Matting > Defringe…
10. Enter a width of 1 pixel and click OK.

Defringe

11. Click on the fx symbol at the bottom of the layers panel and select Bevel and Emboss.
12. Use the following settings and click OK:
    • Style: Emboss
    • Technique: Smooth
    • Depth: 50%
    • Size: 2px
    • Direction: Down

Bevel and Emboss

13. We need to make the letter f bigger. Press Ctrl+T (Mac: Cmd: T) to enter the Transform mode.
14. Make the letter about 200 pixels tall (you can use the Info panel to see the H value). Hold the Shift key down while you drag from any corner of the transform box.
15. Leave space all around it, and room at the bottom for the text that will say “Facebook”. Press Enter (Mac: Return) to complete the transformation.

Transform mode

16. The edges look a tad blurry. Go to Filter > Sharpen > Smart Sharpen…
17. Set the Amount 100%, the Radius to 20px, and click OK.

Sharpen

Next: the Chicklet