This tutorial will quickly outline the way to make a "Web 2.0" styled header image with minimal effort.
What you need:
- Photoshop CS3 (CS2 may work, not sure, been a while since I have used it)
Open up Photoshop, and create a new document with the following settings:
Next, add a black background just so you can get your bearings, and set the transparency to about 50%, this will keep the grid in the background, but tame it down quite a bit to make the top layers a bit more visible.
Now, using the text tool, click anywhere and type in "Web 2.0 Logo". I use white in this tutorial since I can create an overlay later to change the color. For your font, set it to Segoe UI (or your other favorite font) and a size of 48. Now resize the text area so that your text is snuggly inside of it, this allows you to better position it later.
Your logo should looks something like this now:
Now comes the fun part, lets duplicate the text layer, name it "Reflection", select the Move tool, click on "Show Transform Controls" and simply drag the top of the middle gizmo down until you get a semitry that you like, see the bottom image for how I chose to lay it out. This sets up your "flat area", so the angle you use will force the eye to see the reflection at that angle. The longer the text is in the "reflection" side, the larger the slant will appear to your eyes for the reflected surface.
Next we are going to add a layer mask to our reflection layer, click on the Square with the Circle in it on the Layers toolbox as highlighted below:
By default, the layer will have 100% opacity (i.e. solid white).
Select the layer mask on the Reflection layer to select it, choose the Gradient tool, press "D" on your keyboard to reset your colors. We want to select the Gradient brush that is white on the left, and black on the left.
Now, using the gradient tool on the layer mask (you selected it right?), put your mouse cursur just below the loop in the upside down G, and drag the mouse downward while holding the right mouse button and the SHIFT key (this makes it a straight line), you want to drag it until about 3/4 of the way through the upside down text. Once you release the mouse, it should look something like this:
Now, lets go over what type of surface we want to "reflect" on. Generally most reflective surfaces are not perfect copies, right now, ours is. There are some small adjustments that we can do, as well as some blending properties we can set that will give it a better look, without killing the actual text that is in the reflection, making it easier to update and change the colors as we please.
So that we can get a better look at our reflection, lets change the background layer's opacity back to 100%.
Not the most impressive logo yet.
Move the reflection layer below the logo layer, go to the blending options for the Reflection layer, and add an outer glow with the following settings:
This will now give us a Gaussian blur look without actually rasterizing our reflection layer.
And finally, change the opacity of the reflection layer to 50%, this will tone it down and blend it into the background a bit better. Now your image should look a bit like this:
That looks much better, but our logo is still way too high, lets move the reflection layer down a bit, so that it doesn't look like it is sitting on the surface, a good rule of thumb is to not cross the under case letters too far, else it will look like the letters are going "through" the bottom. After adjusting the height of the reflection, lock the two layers together so when you move one, you aren't separating them.
So there we have it, a quick to update Web 2.0 Graphic that didn't take a lot of fancy tricks.
With some small work to the background, adding some foreground text and a quick logo, you get a nice appearance to the graphic.
Download the PSD