Today we’re going to have a look at how to create a stylish black header with a metal frame. We’ll also add a little snake inside the header. The metal frame technique is not only for headers though, it could also be useful for such things as forum signatures or skins for audio players.

FINAL IMAGE PREVIEW

This is what we will be creating:
(click to enlarge)

Step 1

Create a new image size 800×200 with a white background.

Create a new layer and name it “dark gradient”.
Select the Blend tool, and set your FG color to black (000000), and your BG color to medium gray (3b3b3b).

Now create a gradient from the top of the image to the bottom of it.

That gives us this result:

Step 2

We need to create some guides to make things easier for us.

So go to Image->Guides->New Guide.
Direction should be set to Horizontal, and Position to 15.

Now create two more guides, first one with Direction set to Horizontal and Position set to 185.
Then one with Direction set to Vertical and Position set to 15.

Our image should look like this afterwards:

Step 3

Create a new layer and name it “metal frame top”.

Select the Ellipse Select Tool, we’re going to create a huge elliptical selection.

First, create a selection that touches all the guides like in the image below. The length of the selection doesn’t matter.

Then adjust the length of the selection in the settings located on the toolbox. Set the length to 1500.

Now invert that selection. Select->Invert.

Use the Rectangle Select tool to add a small rectangular part to the selection on the right edge of the header. (hold in Shift while you use the Rectangle Select tool)

The rectangular selection measures 15px across.

The selection should look like this now:

Select the Blend tool, set your FG color to light gray (f0f0f0), and your BG color to dark gray (313131).

Now create a gradient from the top of the image to the bottom of it.
It should look like this afterwards:

Get rid of that selection. Select->None.

Step 4

We’re going to repeat what we did in step 3, only this time we make the selection a little larger and the gradient the other way.

First though, create a new guide. (Image->Guides->New Guide)
It should be Vertical, and set to 48.

Now create a new layer and name it “metal frame bottom”, and then grab the Ellipse Select tool.
This time the selection should touch both horizontal guides and our new vertical guide.

Then set the length of the selection to 1850:

Invert the selection. (Select->Invert)

Now use the Rectangle Select tool to add to the selection like in the image below, notice how we make it a little larger this time, it’s now 17px across.
(hold in Shift while you use the Rectangle Select tool)

Select the Blend tool, and create a gradient from the bottom of the image to the top of it.

Get rid of that selection. Select->None.

Now move the layer named “metal frame bottom” below the layer named “metal frame top”.

Step 5

We don’t need those guides anymore so just go to Image->Guides->Remove all Guides.

Alright, now select the layer named “metal frame top” (by clicking on it in the layer dialog).
We’re going to give this layer a drop shadow. (Filters->Light and Shadow->Drop Shadow).

Set the Offset X and Offset Y to 0, blur radius should be set to 15.
Also, untick that box that says Allow resizing.

That should give us this result.

It’s a neat effect, but I only want it on the upper half of the image. So select the Eraser Tool, set the brush to Circle Fuzzy (19) and the Scale to around 4.

First select the Drop Shadow layer in the layer dialog, then use the Eraser Tool to erase the drop shadow along the bottom edge all the way up to where the top edge and bottom edge meet on the very left of the image.

Also use the Eraser Tool to make a small part of the drop shadow a bit thinner right there where the bottom and the top edge meet. Here is a zoomed image of how it should look afterwards:

Step 6

Time to add some text, set your FG color to white (ffffff) and choose a font you like.
I choose a font called FreeSans Bold, size 20.

Write some words, I wrote Blog, News, About and Contact with a lot of space between them.
Move them into place using the Move Tool.

Set the text size a little larger like 40. Then create a logo, just write whatever you want there, I of course wrote Gtuts.com (Gtuts.com is actually two text layers, a large G on one layer and tuts.com on another layer, but you don’t have to do that).

Move that into place with the Move Tool.

Also, it doesn’t really matter, but to keep things organized I usually move text layers to the top in the layer dialog.

Now merge all the text layers. (right-click on the top layer in the layer dialog and choose Merge Down)

Then change the layer mode to Soft Light.

Duplicate the layer to make the text a bit stronger.

Step 7

We’re going to use a brush to add a snake to the header.
The brush can be found either here (that’s a zip file so you have to unpack it first), or here (choose Free user, wait 30 seconds then download, no need to unpack).

If you don’t know how to install a brush then have a look here.

Step 8

When you have installed the brush, select the layer named “dark gradient”.
Then set your FG color to medium gray (3b3b3b) and Select the Brush Tool, also set the Scale to 0,50.

Select the brush called “Tattoo Borders by Indo Dreamin.abr-013″.

Now click just once where we want that snake to be positioned.

It should look like this afterwards:

Step 9

We need to change the edges of the header so it will blend more easily into a website layout. There are several ways to do this, the problem is that every website layout is different, so you need to experiment and see what looks best on your website layout.

First of all, make the white background layer invisible (by clicking on the eye next to it in the layer dialog). Then right-click on a layer and choose Merge Visible Layers. (clipped to image)

Make the background layer visible again (by clicking on where the eye should be).

Now, select the layer named “dark gradient”, then go to Select->Rounded Rectangle.
Set the Radius to 15.

Then invert the selection. Select->Invert
That should give each corner a small selection like this:

I don’t want all four corners rounded, only the top two, so we need to make it so that the selection only covers the two top corners. To do that, grab the Rectangle Select Tool, hold in Ctrl, and create a selection around the two bottom corners. This will remove the two bottom corners from our selection.

Now hit the “delete” button on your keyboard.
Then get rid of that selection. Select->None

Now both of the top two corners should be rounded like this:

Step 10

Another thing we could do is to soften the edges, to do this use the Rectangular Select tool and create a selection at the bottom of the image that measures 800×1.

Feather that selection by 3. Select->Feather

Now hit the “delete” button.
Also get rid of that selection. Select->None

A close-up of the edge shows that it’s now a little bit softer, you can’t really see a big difference until you put the header on a website though.

You can also do the same on the sides of the header if you want to, I did it for the final image
(same method as above, do one side at a time, create a selection on measuring 1×200 at the very edge of the side, feather the selection by 3, then hit “delete”.)

Here is the final result put on a white background:
(click to enlarge)

Alright, that’s it, the end of the tutorial, tell us what you think in the comments!