This article will teach any user, beginner or advanced, how to create a lift up effect using Adobe Photoshop. Using this tutorial you can create a professional looking design which will give any website a unique feel. If you wish to copy any content please contact one of the administrators.

Introduction

The idea of this tutorial is to show you how to create a simple website header which appears to lift off the page. In this tutorial i used Photoshop CS3 on windows vista, but im sure it will still work using any fairly recent version.

The end result of this tutorial is shown here. I have never been much of an artist, and some people say my taste in colors is fairly poor, so feel free to personalise it for you along the way.

Layout

1. Create a new blank canvas, of width 600px. Height is up to you, i went for 200px.
2. Select the rectangle tool from the toolbar, setup is shown below:



3. Create a new rectangle which should be wider and longer than the canvas. We are going to add a stroke to this layer so make sure its large enough not to see the stroke on all 4 sides. This can be changed later. Example shown below:



4. Now add the stroke to the layer by going to Blending Options -> Stroke and add a slightly darker inside stroke of 15px width. As shown below:



5. Now create a new rectangle and place it as shown in the image below. Make it the same color as the first rectangle and make sure it covers the stroke of the first rectangle too. Also make sure there are gaps between it and the sides of the canvas, this is where the shadows are going to go.

Backround

1. For the backround, quite simply create a new rectangle, send it to the back and make it cover everything from the first rectangle up to the top. Then add a white to transparent gradient and reduce its opacity, as shown below:

Creating Lift Up Effect

1. Now this is the more compicated part of the tutorial. You need to first duplicate the 2nd rectangle as shown:



2. Then rasterize the duplicated shape as shown. After doing that send it begind rectangle two but in front of rectangle 1 and the backround.



3. Now with the rasterized layer selected you need to go to the warp tool which can be found in Edit -> Transform -> Warp.



4. With this tool selected you want to drag one of the corners out, and slightly down, as shown below:



5. Give this warped layer a color overlay of black, which is done through the Blending Options panel again. Then duplicate and flip it, to make it the same on both sides, as shown below:



6. Now go to Filter -> Blur -> Blur More, and keep bluring the layer till it looks like a normal shadow.



7. Finally reduce the overall opacity of the layer till it really does look like a shadow. Bluring it too much will do this too but will just look odd. The final result should look something like this:

Menu

1. To add a menu strip, like before, just add a rectangle to the top of the 2nd rectangle we made earlier, then add a white to transparent linear gradient going up using the Blending Options panel shown below:



2. Now add some text in whatever font or color you like and resize the rectangle we just made to make it look as if we're using tabs.



3. Now create a new layer, and with this new layer selected create a rectangular marquee over the tab we just created. Once having done this use the gradient tool to create a white to transparent linear gradient going up and reduce the layer opacity to 20%.



4. Now do the same thing to the rectangle 2 and move the gradient up behind the menu bar to make it look like it all blends in.



5. Now create a new text layer above all that and with your favourite font, add whatever you want in what ever style you want. I added a light gradient to the text to make it look more 3D but thats up to you.

Title

1. To add a reflection, duplicate the text layer and flip it vertically and align it just below the original text as shown:



2. With the up-side-down text selected in the layers manager, add a new layer mask shown below:



3. Now click the gradient tool and making sure it has a gradient selected of BLACK to WHITE, direct the gradient up over the line of the text, and it will appear to "fade".

Evaluation

1. Now all you have to do is add your logo or an icon, and do anything extra to that, as you please. The finished result is shown below, ofc you may change it however you like. I have included the .psd and all the fonts i used. Have fun, and remember to link to this site if you liked my content!!

   You will need to register to access the .psd and font files.