Submit Your Article
Home Articles News Tutorials Videos Add An Article
Topics: Design Photoshop Programming PHP CSS Java Database Web Development Javascript Ajax
– Close + Open

Find Out More About DevWebPro!

Sign up for the newsletter


» Terms & Conditions

Welcome to the New DevWebPro!

DevWebPro Includes:
  Hundreds Of Tutorials   Developer News
  Unique Gadget Videos   Tons of Topics to Discuss
  Expert Advice   We Will Publish Your Articles

Create A Unique 3-D Website Header

Thursday, January 29th, 2009
Text: Decrease Font Size Increase Font Size | Print Print Article | Share: Delicious Digg StumbleUpon Post to Twitter Post to Facebook

Step 1: First, you’ll need to create a document with the dimensions in the picture below

Step 1

Step 2: Then create a new layer on top of the initial one, and fill it with any color. After you make your fill, take the rectangle marquee tool rectangle tool and make a box like below:

Step 2

Step 3: With your new box, fill it in with any color you want, select Gradient Overlay under the blending options for the layer. You’ll want to set the Gradient Overlay to the settings below.

Step 3

Then set the colors of the gradient like below. You can choose whatever color you want, but I decided to go with a blueish background.

Step 3-1

Now, your document should look something like this:

Step 3-2

Step 4: Now, select the Custom Shape Tool Custom, and then select this shape Shape. Spread it out, to create the shape below.

Step 4

Then, create a new layer. Fill the path with any color, then delete the path. It should leave you with something like this:

Step 4-1

Step 5: For this next step, we’re going to be adding a bunch of blending options to this shape. Starting with a Drop Shadow:

Step 5

then add a Satin blend

Step 5-1

and finally a gradient overlay

Step 5-2

Step 5-3

All of these should result as this:

Step 5-4

Step 6:

Next, take your rectangle marquee tool, and make a selection about halfway down that custom shape layer.

Step 6

then press delete

Now, select the Rounded Rectangle Tool Rounded Rectangle, and make your selection like below:

Step 6-1

Create a new layer, then fill the path with any color and delete it.

Next, create a Gradient Overlay blending option. Have it set to the settings below:

Step 6-2

Set the layer to screen, and voila you’re done.

The rest is up to you, add some buttons, and some images to go in the background. Here’s an example of how it can look.

final

Topics: , , ,

Leave a Comment

DevWebPro is an iEntry Network ® publication - © 1998-2010 All Rights Reserved