Webmaster Forum

bsmith · Last edited by bsmith on Thu Jan 31, 2008 10:40 am; edited 1 time in total

Today I'm going to walk you through the process of making a decent web 2.0 stlye reflection in Photoshop. This process can be applied to text, product boxes, products, showcase items, etc... But just to keep it simple I'm going to be working with text only.

Here is the final result that the tutorial will help you achieve:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

TigerBot · Tiger Member Joined: 19 Jun 2007

_________________
TigerBot

bsmith · Posted: Fri Jan 18, 2008 12:38 pm Post subject:

First we need a new canvas to work on...

Fill that with white:

And type some text. The color doesn't matter at this point.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Jan 18, 2008 12:41 pm Post subject:

This next set of steps are not part of the reflection, they are design elements of the text I used in my example... And since someone is bound to wonder how the effect was achieved, I went ahead and documented it as well:

Layer styles:

Result with style applied:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Jan 18, 2008 12:46 pm Post subject:

I move the text up vertically to give me room for the reflection:

Now... I will duplicate the layer (and then merge it with a blank layer to set the styles). Then flip it vertically.

Edit > Transform > flip vertically.
And move the layer down until it's top matches with the bottom of the previous layer.

Set the Opacity to 50%:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Jan 18, 2008 12:51 pm Post subject:

Next I use a layer mask to hide part of the layer giving the effect of it fading.

Here is the layer mask icon:

I use the gradient tool to apply a white to black fade on the layer mask:

And this is the result of the mask:

Now selecting the layer & not the mask. (The left of the two thumbnail boxes for the layer) I then apply a gaussian blur.

This softens the reflection a bit... resulting in this:

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Jan 18, 2008 12:55 pm Post subject:

Now... the reflection is here and it doesn't look bad, but I want to give the text a drop shadow to make it look like it's actually sitting on a floor of some kind.

So, we make a copy of the original text layer and remove all style effects.

Next we free transform it to make is "squished" down.

Now we move the layer down below the styled text layer and slide the black text in under the bottom of the styled text.

_________________
If you have an an urgent question, please call me.
Spam will be removed.

bsmith · Posted: Fri Jan 18, 2008 1:01 pm Post subject:

We are getting somewhere now, but we need to make it look more like a shadow and a nice gaussian blur should do the trick.

When you do this to text it may ask you this:

Just click OK.

And apply some settings like these:

Your result will be something like this:

I then changed the Opacity of the shadow layer to 50% and it looks like this:

And that's it. Simple really. Again, you can use this for all types of items, text, buttons, rss feed logos, etc... anything you want to showcase in a web 2.0 fashion.
_________________
If you have an an urgent question, please call me.
Spam will be removed.