In this tutorial we'll see how to create a professional header.
We'll examine several aspects that must be considered.
The header of a website is really important, it's the first part seen by the visitors and must have a certain look, you would never consider buying a service, a book or a microwave oven, from a company that has a horrible homepage, maybe with an overloaded design or a poor one.
If you're designing a header for a business website or anything else that requires a professional look you'll want to obtain something that doesn't look poor nor overloaded.
Recently the minimalist approach is heavily diffused and we must recognize that it's the key (or at least a very good point) to obtain excellent results.
I think that struggling to make it extremely minimalist is wrong, the right compromise is the way to go.
A good header must be easy on the eyes, no hard to read text, no heavy gradients and so on.
I strongly recommend to put a high quality photo in the header to achieve the professional look we are talking about.
In this tutorial I'll use this image from sxc.hu
You need to be registered to download it (membership is free).
I am going to make the header 800px by 170px so open a blank document of this size in Photoshop.
Open the image you just downloaded, drag it into your blank document, resize and move it until you have the part you prefer exactly in the 800 x 170 area (don't worry if the background isn't 100% covered, we'll use a gradient to fade the image out).
Click the image to see it full size.
Adjust the image in the way you prefer. I applied:
Image > Adjustments > Brightness "+7"
Image > Adjustments Levels > Input Levels > 0 - 1 - 238
Image > Adjustments > Hue/Saturation > Check Colorize > 204 - 25 - 0 Here's the image after these adjustments, click the image to enlarge it:
Now select the gradient tool and choose a linear white to white gradient with the following settings:
Draw it from right to left and you should obtain something like this:
Now it's time to write something on it. It's extremely important to use a clean and easy to read font.
Pay attention also when you are choosing the text color.
If you want to add a 1 px border to this image create a new layer, pick the Rectangular Marquee Tool and select the whole area, then hit Edit > Stroke 1px and press OK.
The header is completed, now I'll add a small area at the top that might be used while coding to add some useful functions and links.
Create a new layer and name it "diagonal", select the line tool, set it to 1px weight and draw it from up-left to down-right holding SHIFT pressed so it will be drawn exactly at 45�; create another layer and name it "horizontal" and draw a horizontal line with the same settings; now move the 2 layers until you close the area in the upper right corner, see the image:
This is the final position of the 2 lines:
Now select the layer named "horizontal" and hit Layer > Merge Down (CTRL + E), you should have the 2 layers merged into the one named "diagonal".
Now select the "diagonal" layer, pick the Magic Wand Tool and click in the small area that we have just designed at the top-right of the header, select the Paint Bucket Tool, fill the selection with a color (I used the same color of the text and reduced its opacity to 80%).
Here's my final result ( click to enlarge ):
