Jump to content
xisto Community
heirufox

Create The Beautiful Reflections Used By Apple.com

Recommended Posts

Ok, if you have ever browsed apple.com, you see they have great reflections to show off their hardware/software/etc. In this tutorial I will show you all how to make a great reflection.

 

Step one: Workspace

 

First you need to find what you are reflecting, and be sure that it is already cut out (no background). This works especially well with a screenshot of their program iTunes, so that is what I will demonstrate with.

 

Now, create a new file that is able to support double the height of the object.

 

Step 2: Fill and Copy Object

 

Fill the background with any colour you like, but a sleek black or white is always great. Then drag your object onto the canvas and position it towards the top of the canvas. Hint: if you are using a gif, you may need to use the rectangular marquee tool to select the entire image, then move it.

 

Posted Image

 

Step 3: Copying the Object

 

Now right click on the layer the image is on and select Duplicate Layer. Go to Edit>Transform>Flip Vertical. With the move tool selected (dark mouse) hold shift and move the image so that it is exactly under the top image.

 

Posted Image

 

Step 4: Creating the Effect

 

First, go to the gradient tool and make sure it is set for Foreground to Background, and press D to reset the FG and BG colors to default (black and white).

 

Now, for the effect you need to go to the bottom of the layers panel with the copied layer selected and click Add Vector Mask (it looks like a box with a circle in it. This tool is somewhat complicated and somewhat simple: it makes the white visible, the gray less visible, and the black invisible. Draw the gradient now by dragging from the top of the copied portion to the bottom of the copied portion. Next, to make it more realistic, bring the opacity of that layer down to 50% (in either blending options or on the top of the layers panel). And, since this is a true fade out, you can have the background be anything you wish and it will still blend in and look great.

 

Posted Image

 

Also, you can select both layers (click one and shift click the other) and go to Edit>Transform>Perspective. Grab a corner and play around with it! (press enter when finished or escape to re-do) Here is what I did with that.

 

Posted Image

Share this post


Link to post
Share on other sites

Ok, if you have ever browsed apple.com, you see they have great reflections to show off their hardware/software/etc. In this tutorial I will show you all how to make a great reflection.

 

Step one: Workspace

 

First you need to find what you are reflecting, and be sure that it is already cut out (no background). This works especially well with a screenshot of their program iTunes, so that is what I will demonstrate with.

 

Now, create a new file that is able to support double the height of the object.

 

Step 2: Fill and Copy Object

 

Fill the background with any colour you like, but a sleek black or white is always great. Then drag your object onto the canvas and position it towards the top of the canvas. Hint: if you are using a gif, you may need to use the rectangular marquee tool to select the entire image, then move it.

 

Posted Image

 

Step 3: Copying the Object

 

Now right click on the layer the image is on and select Duplicate Layer. Go to Edit>Transform>Flip Vertical. With the move tool selected (dark mouse) hold shift and move the image so that it is exactly under the top image.

 

Posted Image

 

Step 4: Creating the Effect

 

First, go to the gradient tool and make sure it is set for Foreground to Background, and press D to reset the FG and BG colors to default (black and white).

 

Now, for the effect you need to go to the bottom of the layers panel with the copied layer selected and click Add Vector Mask (it looks like a box with a circle in it. This tool is somewhat complicated and somewhat simple: it makes the white visible, the gray less visible, and the black invisible. Draw the gradient now by dragging from the top of the copied portion to the bottom of the copied portion. Next, to make it more realistic, bring the opacity of that layer down to 50% (in either blending options or on the top of the layers panel). And, since this is a true fade out, you can have the background be anything you wish and it will still blend in and look great.

 

Posted Image

 

Also, you can select both layers (click one and shift click the other) and go to Edit>Transform>Perspective. Grab a corner and play around with it! (press enter when finished or escape to re-do) Here is what I did with that.

 

Posted Image


Great effects- I use them myself quite a lot when I am doing things for customers.

Good tutorial, easy to follow with good pictures, keep up the good work!

Edit: yeah the new look of the forum really messes up my opera when loading posts l;( a lot of the time I end up typing blind cos the text window does not load correctly untill I am on a new line ;(

Share this post


Link to post
Share on other sites

I think I have seen tis before, but still some nice effects there....Although creating the effects exactly like apple does it, doesn't seem the most innovative, so maybe if you change them a little bit from that, it'll seem a little more innovative, and look slightly more professional....instead of just like a copy. (just a suggestion to people who are going to use these effects places)

Share this post


Link to post
Share on other sites

Pardon the necropost.You may want to consider making the reflects a little smaller.You can do this by adding in a central black colour to your gradient or shifting the central point. Or, you can feather out the bottom part of the reflection.From what I've seen, Apple doesn't use this effect to mirror more than 1/4 of the size of the object. It makes it look a sliver more interesting.Moving away from the Apple style, you may want to add in a solid colour break (e.g., top black, bottom grey) where the image and reflection meet and add a gradiant overlay to it. This would appear to be a sort of ground.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.