Shiny stuff with reflections
Yes I know, they’re everywhere, but because they’re everywhere I feel that they are something that every designer should know how to do.
After all, there will probably come a time when a client will say, “Hey, how can we make that text on our logo look more… …webby and shiny?!” lol or “Make it cleaner… …more Apple!” (this is probably Johnathan Ives’ fault but it is still fantastic, highly mimicked design).
Well, with trusty Photoshop at hand, your well equipped to give your client what he wants! Let’s shine up some stuff!!
Start off with the element that you want to add the shine to. Copy the layer and add a WHITE color overlay with the layer styles. (You may need to rasterize the layer for text).
Next, select the elliptical marquee tool (or any shaped selection will do, but I find the elliptical the most effective) and, from quite a way out to the side of the element (I’d suggest zooming out quite a bit to get a nice arc across the element), select the bottom half of the white overlay layer and delete this section.
Then apply a ‘layer mask’ to the same layer (the white overlay layer) and select the gradient tool. From the gradient tools settings panel, choose the ‘foreground to transparent’ gradient and select the foreground colors as black.
Now select the layer mask and on the canvas, move your mouse pointer above the element, hold down the shift and drag down and release about three quarters of the way from the top of the element to the end of the solid white edge of the layer.
You should hopefully start to see the composition take shape. Still working on the white overlay layer, drop the the opacity to around 65% (play with this figures till it looks right to you).
We are half way to the end now. Nearly there!
Next we’re going to add a bottom shine, so that it looks like some light has bounced off the extremely clean and shiny surface below and reflected back onto the element.
For this, add a new blank layer above the original element and add a white gradient starting from the bottom (about 2cm away from the bottom of the element) and drag up into the element (not too far into the element as this is just a hint at the light being reflected). Next drop the opacity to around 46% (again, you can change this figure for the best affect on your design, and feel free to minus some fill also).
Now, go to the original element layer and with the control key held down (or apple command key on mac) select the small thumbnail on the layer on the layers panel. This will select all of the actual content on the layer, go to ‘selection’/’select’ from the top menu, got to modify > contract, enter 1 pixel and click ok. Next got to selection/select again and click ‘inverse’, once this is done, select the new gradient layer from the layers panel, focus on the canvas (don’t lose the selection) and press delete/backspace to remove the dead space from the new gradient layer. Then with the same selection, choose the first layer we made (the top shine gradient) and press delete/backspace. This should give you a very fine border of the original elements colors.
Now, for the finale, the famous apple reflection!!! Select all 3 of your layers (select the top layer from the layers panel, then hold shift and select the bottom layer on the panel) and drag them to the ‘Create a new layer’ button at the bottom of the panel. Once they are created, right click on one of the layers (they should still be highlights, if not, select the three newly created layers with the same method as previous) and select ‘Merge Layers’.
This merged layer will become your reflection. With this new layer selected from the layers panel and with your focus on the canvas, hold down control (or again. the apple command key on mac) and press ‘T’, this will activate the transform tool. Now locate the top center transform point and drag it down below the bottom of the original element and make the height about 2 thirds that of the original. when your happy, press the enter/return key to commit the changes.
Now select the ‘Move Tool’, hold down shift, and move the transformed layer away from the original element slightly. Then, on the layers panel, add a layer mask to this layer. Select the gradient tool and with the same settings as earlier (foreground to transparent, foreground color black), hold down shift, and click and drag the gradient upwards from the bottom of the reflection layer to around 1cm away from the top of the reflections layer (as usual, feel free to experiment with the distances of the gradient and even the angles etc).
Now that you have the reflections layer fading away into the shiny ground below, you might feel that the reflection is too prominent, if so, select the relfections layer and play with the opacity and fill levels, I like to set mine to about 64% opacity and 93% fill.
And there you have it! a web 2.0 shine with an added apple style reflection. Now go, wow your clients, friends and family members with this new found trickery. For added ‘WOW!’ try using the perspective transform tool with the element, shine layers and reflection layer selected (you will need to rasterize any text). Ooohhh, shiny, reflected and angled! it’s like nearly three dimensional.
**Warning**
**Probably best to try the angled version when you’ve completely finished all you editing to the element layer, as it would be a nightmare to edit once you’ve angled your design**
