Hi-Tech Banner

Posted on Tue, 2006-02-07 21:53

This tutorial with guide you through how to make a hi-tech banner for your website and is only limited by your imagination:

This tutorial takes in to account that you know the basics of Photoshop.

 

finished banner preview

1.

Open Photoshop and create a new image, 800x80.
2.

Select the Polygon Lasso Tool polygon lasso tool
3.

Create a selection similar to this:

polygon lasso tool selection
4.

Create a new layer and fill this selection with #3D3D3D:

selection filled with #3d3d3d
5.

Right click the layer and select Blending Options
6.

Use these Blending Options:

gradient overlay

 

patternoverlay

To make this pattern create a new image 2x2 with a transparent background.

Create 2 1x1px black squares and put them together diagonally.

Then go to Edit » Define Pattern and give it a name.

 

stroke
7.

Press OK to apply the blending options.
8.

Repeat the process again but create another selection at the top of the banner. But with the blending options tick the "Reverse" box for the gradient. And fill the selection with #999999.
9.

You should now have something similar to this:

top and bottom complete
10.

Create a new layer and place it just above the Background layer. Fill this with a gradient of #333333 to #555555 with #555555 at the top going to a #333333 bottom.
11.

Create a new layer on top of all other layers.
12.

Fill the layer with the pattern we made earlier by chosing the Paint Bucket Tool and selecting Pattern at the top then selecting the pattern.
13.

Ctrl + Click Layer 1 and Layer 2 to select the areas on the layers and delete from the new layer we just created.

background complete
14.

Add text and logos etc as you wish and you are complete.

finished banner