[TUTORIAL] Icon reflections


I’ve been asked several times “how do you add reflections to your icons” This has nothing to do with the ROM, or any special .APK, in fact you need to modify your icon .PNG’s files.

There’s 2 ways you can apply this icons to your screen work:

1)(my favorite way)  Embedding the icons to the wallpapers, like on the example below, everything has been embedded to the wallpaper, now just waiting for Desktop visualizer so I can place transparent icons in top and make them working icons

2) Modifying every icon that you want to add reflections and just use them as any other icon.

Without any more delay, let’s begin the tutorial.

NOTE: This may seem like an overwhelming tutorial but is not, read it a couple of time, analyze the images, you should be able to accomplish this effect in about 5 minutes

WARNING: This tutorial is heavy on images, so if you have a slow internet connection it might take a while to load up completely, there 28 images in total.

First let me say something, I’m not a Photoshop Guru or anything similar, I like to experiment and play with my pc programs, therefore this is my very own method for this particular technique. If anyone here knows of a better way to achieve similar results, please share the information and help the us build a better Android community by sharing our knowledge.

This time we are going to add 3 icons (phone,sms & gmail) to a black shelf and add the respective reflection to the icons.

1) Open Photoshop and navigate to FILE>OPEN>and select the shelf

 

2) Now grab the new layer from the layer box and drag it to the icon pointed by the arrow, this will duplicate the layer or make a new copy of it, make sure you are now working on the copy of the layer to verify that, make sure “Layer 0 copy” its highlighted. Now turn off the original layer and move the shelf to the bottom of the canvas (just some pixels from the bottom)

 

3) Now open your first icon, in this case the “phone” icon, then CTRL+A,CTRL+C, move to the shelf tab, and CTRL+V to paste the icon. I n this case, the icon seems considerable larger for this shelf, so I’ll go ahead and resized it to the correct dimensions

 

4) Navigate to IMAGE>IMAGE SIZE or ALT+CTRL+I will do the trick too, on the new screen, make sure that “Scale Styles” and “Constrain Proportions” and check, this will help us to keep everything in the right proportions. I think that 100 x 100 pixels will be a good size in this case.

 

5) Repeat step #3, now you can see the icon its a bit smaller and should allow enough space for the other 2 remaining icons. Make sure you set your icon to the “back” of the shelf, we need to allow enough space in front of them for the reflection. Go to the layer box and rename the “phone layer” in this case just “phone” should be enough, this will help us to maintain everything organize.

 

6) Now let’s do the same for the 2 remaining icons, repeat step #4 & #5 for both.

 

7) Now let select the “phone layer” and then CTRL+J, this will duplicate that layer and place it right in top of the original, Photoshop will name it “Phone copy” that it’s just fine, after making the copy of the layer, go CTRL+T this is the Free transform command on Photoshop, you should by now see a little box around the “phone” icon, right-click on the icon and select “flip vertical, move the “flipped” icon just right underneath the original icon, just like on the image, once you are happy with the position of that layer hit “ENTER” to set the icon in place.

 

8 ) Repeat step #7 for the other 2 remaining icons, make sure that you are on the correct layer every time.

 

9) Now let’s zoom it a little, you can see that the “flipped” icons extend out of the “shelf” edge, we must delete the “extra” material but we want to do it as straight as possible, but this is easy, select your marquee tool and draw a box out of the icons but right on the edge of the shelf, just like pictured. Then select your eraser tool and set it to the right size with a medium hardness. The marquee tool will help us to erase just what’s inside of the box and nothing else, select the first “flipped layer” on the image its the “sms copy” and erase it, then select the next layer and to the same, then the third and last layer.

 

10) This is how should look like now

11) Now we need to add a  “layer mask” to all 3 “flipped layers”, simply select the layer and click on the “layer mask” icon, you should now see a white box on your layers.

We are now ready to “fade out” those flipped layers, select the layer that you want to start with, make sure that there’s a little hairline box around the layer mask, otherwise the effect will not work.

Now press “G” to select the gradient tool, make sure the gradient style its “Foreground to transparent” and “linear gradient” (see the 2 small arrows bellow) now while you hold SHIFT on the keyboard, draw a vertical line from top to bottom of the icons, you will see how the “flipped layer” start to fade out, here, you will need to play around with the size of that line you are drawing, sometimes a short line does the work, other times you will need to draw a long line.

12) After a couple of lines I draw

 

13) Repeat step #11 for the 2 remaining icons. You should ended up with something like this. Now you are done!. Simply save as a .PNG format and you are ready to use it

 

The final product

 

Shelf .PNG file if anyone need it.

 

 

Advertisements

11 thoughts on “[TUTORIAL] Icon reflections

  1. Hi,
    great Tuturial.
    Just one mistake, in step 11 you have to use “Foreground to Background” for gradient style and not “Foreground to transparent”.

  2. You can find many funny photoshopped images and sometimes images not photoshopped with image original quality. How to find out whether the image is original or photoshopped picture ? Here is an online tool that let you to find if the image has gone under some digital manipulation: Photoshopped Image Killer.

  3. Pingback: Screenshots of peoples Droid desktops? - Page 1110 - Droid Forum - Verizon Droid & the Motorola Droid Forum

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s