I am writing this tutorial in part to see how it will be received by the community in order to decide if I should make more advance ones in the future. Feedback would be helpful for that.

This is a simple clean header design that can be used for any type of website, but I will add some things that are probably more appropriate for blogs as I continue along in the series. I will assume a very basic level of familiarity with photoshop or any image editing program.

1. Open a new document in photoshop and create a 900 x 200 document at 72 dpi, use transparency for the background.

2. Make a new layer. Select the rounded rectangle tool and set radius to 20 px / anti-alias to on. Draw the header to the size you need it at. I used guidelines at 50 px and 850 px to draw a 800px wide header.

3. Double click on the thumbnail of the header you just drew and set a gradient overlay with a stroke and outer glow according to the values in the screen shots.

4. Next we work on the menu. Create a new layer. Then select the rectangle marque and draw in the bar.

5. Double click on the thumbnail of the rectangle you just drew. Apply a gradient overlay using the values in the screen shot.

6. Create a new layer. Select the line tool, set it to 1 px and turn anti-alias off. Zoom in, pick a darker color than the gradient, and draw in this line to separate the menu buttons.

7. Add a layer mask to this layer. Select the gradient fill tool and use the radial. Like shown.

8. Duplicate layer by hitting ctrl-J on windows and command-J on mac. Select the move tool and hit the right directional button to move it over one pixel. Set this layer to a lighter color.

9. Merge the two layers and duplicate as necessary to create the rest.

10. The next parts are just mostly details. Select your favorite font and fill in the menu bars. I used a slight drop shadow to give the words some depth. As shown here.

Conclusion

In order to give it more visual interest and just increase it’s overall coolness factor, I added in text to serve as a logo with a slogan. I also created a section for a picture in order to make it more easily customizable for different personalities. You can pretty much add anything there, I would suggest a picture of yourself or something you are interested in to give it some more flair.

Finally in order to give the header a greater emphasis, I used a dark background with a texture over it to give it some more depth. Adding a gradient would also work very well to put more emphasis on the header even more. I also included the psd file at the bottom so you can tinker around and play with it. Feel free to share it, but please link back to me, thanks.

I will be writing up a series of tutorials for blog designs. Subscribe today and get updated when new articles are posted.