Step 1

Lets open a new document and get rolling. Because I’m working in this limited space I’m going to use a document width of 540px, but if you’re building an actual header, you’ll probably want to make your wider and 350px high will be plenty. Click on the foreground swatch in your Tools bar and enter the RGB code #372819 in the field at the bottom of the Color Picker to change the color to a nice brown. Now simply hit Command-Delete (PC: Ctrl-Backspace) which is the keyboard shortcut to fill the stage (or a selection) with the foreground color.

Step 2

Create a new layer by clicking the New Layer icon at the bottom of the Layers palette. If your layers palette isn’t visible, open it by choosing Window>Layers from the main menu. Double click on the layers name and rename it Header Background. When you create a new layer, it will automatically be selected as your working layer. Press the M key to choose the Rectangular Marquee tool and drag a selection across the stage which will be used to create the background area of the header that contains all those pretty swirls. The height of my selection is 185px. (*note: If you choose Window>Info from the main menu, the Info palette will open up and you can see exactly what size selection you are creating as you go.)

Step 3

Press the D key to reset the foreground color to black, then fill the selection by pressing Command-Delete (PC: Ctrl-Backspace) just like we did in Step 1. Then press Command-D (PC: Ctrl-D) to deselect.

Step 4

For this step you’re going to need to download a new Photoshop Pattern file. I’ve included this file in the download at the end of the lesson or you can download it by itself here. Once you’ve downloaded the pattern, you’ll need to place it in the Applications>Photoshop>Presets>Patterns folder on Mac, and the PC path should be quite similar. Now we are going to load and apply this style to our layer. Either double-click to the right of this layer’s name in the layers palette or Control-Click (PC: Right-Click) on the layer and choose Blending Options to bring up the Layer Styles dialog box. Choose Pattern Overlay from the Styles list on the right. Click on the pattern swatch to open the Pattern Picker, then click the little circle with the arrow in the upper right hand corner. Now you can see all the options available for the Pattern Picker, choose Load Pattern. Now simply navigate to where you placed the pattern at the beginning of this step and click OK. This will load the pattern into your Pattern Picker (right at the end). Now just choose it and the Pattern Picker will close.

Step 5

You’ll see that the pattern you chose is now active in the Pattern window. Change the Blend mode to Luminosity.

Step 6

Select Blending Options from the Style list at the left and move the Fill slider all the way to the left to reduce the layer’s Fill Opacity to 0%.

Step 7

Next select the Inner Glow style and add the following settings. This is what adds the nice edge burn effect you see in the header. When you’re done, click OK to commit the layer style and return to the document.

Step 8

You’ll notice that the Header Background layer now has a Layer Style icon. Your header should now look something like the one below.

Step 9

Create a new layer and call it Red Bar. With the Rectangular Marquee tool draw out a nice selection below the Header Background (mine is 45px high), fill it with #88160F, and press Command-D (PC: Ctrl-D) to deselect.

Step 10

Next, open the Layer Styles dialog box just like we did in Step 4, choose Pattern Overlay. Just like we did in our earlier step, we’re going to load a pattern set into the Pattern Picker. This time though, we’re going to use a stock pattern set called Texture Fill 2 which you’ll find in the drop down menu where we loaded our pattern in Step 4. You can either Append (put these patterns at the end of the pattern picker) or you can click OK to replace all the current patterns with the new one. Either is fine. Find and select the pattern called Sparse Basic Noise by holding your mouse over each pattern until it’s name appears. And use the following settings. Then set a Gradient Overlay using the settings that follow.

Step 11

Lastly, add the following 1 pixel Stroke and click OK. (*note: in my header I used a double outline created by using the Single Row marquee tool available in the Rectangular Marquee tool’s expanded menu with a 1 pixel gap between them.)

Step 12

Now lets duplicate our Red Bar layer by pressing Command-J (PC: Ctrl-J). This will create a new layer directly above the Red Bar layer called Red Bar copy. Press the V key to switch to the move tool then click and drag this new red bar to the top of the header until it looks like the one below.

Step 13

Now lets add a shadow below the bottom Red Bar layer. Click on the Header BackgroundRed Bar Shadow. layer and then add a new layer above it by clicking the Add New Layer icon at the bottom of the Layers palette. Rename the layer Switch to the Gradient tool by pressing the G key and make sure the foreground color is set to black by simply pressing the D key. In the Gradient tool options that appear across the top of the screen, make sure that Foreground to Transparent is selected as well as Reflected Gradient. On the stage drag a short vertical line from the bottom of the Red Bar downward to create the gradient shadow.

Step 14

Lets put the same shadow below the top bar by repeating the process then drop the opacity of both shadow layers to 80% in the layers palette. You can do this by duplicating the layer and moving the gradient up, or by creating a new layer and a new gradient.

Step 15

The last thing we are going to do is place a radial gradient into the header to create the glow behind the logo area. Create a new layer above the Header Background layer and name it Header Glow. Press the X key to switch the foreground and background colors, now making white the foreground color. Choose the Gradient tool again by pressing the G key and this time make sure that Radial Gradient is selected from the Gradient Options.

Step 16

Click and drag a nice radial gradient onto the stage where you think the glow should live. Don’t worry that it extends beyond the Header Background, we’ll fix that in the next step.

Step 17

Ok, now listen very carefully. We are going to create a layer mask on the Header Glow layer by loading the Header Background layer as a selection so follow along. To load the selection, hold down the Command (PC: Ctrl) key and click on the thumbnail for the Header Background layer. Cool right? Ok, now make sure that the Header Glow layer is your active layer (it will be highlighted). Then click the Add Layer Mask button at the bottom of the layers palette (it’s the one that looks like a circle inside a rectangle). Your selection will be converted to a layer mask and the layer mask icon will appear on the Header Glow layer.

Step 18

Obviously this white gradient is much too bright, so the last step is to simply drop the Header Glow layer’s Fill opacity down to around 30%.

Step 19

Great work! Click here for Hero Header Part II where I’ll show you how I created the old paper and logo star that complete the header graphic!

create a new document with the dimensions 950 x 1130 pixels. Fill your background layer with the color black. Select the rounded rectangle tool and set radius to 15px.

Draw out a rounded rectangle for your header. Leave equal amounts of pixels either side and dont place it right at the top of your canvas.

Add these layer styles to your header layer.

Your rectangle should be now transformed into the image below.

On the left side of the header add your website title and slogan, on the right side add 3 navigation items.

Inbetween the 3 navigation items on the right add a very small square or rectangle, i drawn 3 pixel long line. Once you have done that add this outer glow.

You should have something like this.

Finally make a selection on your header similar to the image below.

Fill the selection with the color white then set layer opacity to 2%. Underneath your header add another rounded rectangle using the rounded rectangle tool with a radius of 15px, this will be our navigation.

Add these layer styles to the navigation.

You should have something like this.

Make a selection across half of your naviagtion.

Fill the selection with the color white and set layer opacity to 5%. Now add your navigation text. Inbetween each item add a small divider. To make the divider create two 1 pixel lines next to each other using two different shades of grey, one dark and one light shade.

To create a hover on your navigation select the elliptical marquee tool and create a white circle. Have the top of the circle just overlapping the bottom of the navigation you want to hover.

Now goto “filter > blur > guassian blur”, blur by about 6-8 pixels. Set layer opacity to 23% then delete the bottom half of the circle so it comes level with the navigation.

Where now going to make a featured box for some featured content. Select the rounded rectangle and draw out a big rectangle underneath your navigation.

Dont fill your selection with a color, instead select a radial gradient with the color #2c2d2d as your forground and black as your background and create a radial gradient in the selection, start the gradient from the bottom left corner. Then add this stroke.

You should have something like this.

Add an image of your choice, im using the final result of my iphone light beams tutorial. Add it to the left side of the box. Now add some descriptive text on the right side.

The layer styles for the silver style button are as follows.

Using the same layer styles as we used for the header, navigation and featured box create more content boxes using the rounded rectangle tool.

Add your glowing dot that we used in the header and label each content box.

The 1st content box im going to use as an image gallery. With the rounded rectangle tool add another rectangle within the content box. Then add these layer styles.

You should have something like this.

Add an image inside the inner rectangle by copying an image to the clipboard then goto “edit > paste into”. Move your image into place then create a black rectangle across the bottom of the image set layer opacity to 40% then add some image info.

To the box on the right im going to add some simple news articles.

In the 3rd content box im going to add a flickr gallery. Create an inner rounded rectangle like we did in the 1st content box.

Add some flickr images within your inner rectangle, i made my images have rounded corners by copting them and pasting them into a rounded rectangle, doing this automatically adds a layer mask, just delete the rounded rectangle after.

With the elliptical marquee tool just add two black circles in the middle at each end of the gallery.

Inside the plain black circles just add a left and right glowing arrow.

Now for the footer, Duplicate your header and all it’s elements, drag to the bottom of your canvas. Delete the little navigation the the 3 glowing dots, replace with your copyright information.