When making a website I can think of nothing more detrimental than an ugly header. They exist. If you didn’t smile or imagine one, then yours is probably hideous. I want to help you. Below is a step-by-step method of creating a simple header.
Step 1
Get Photoshop or become really quick thinking and apply these steps to your graphics program.
Step 2
Press Ctrl+N to create a new document. Set your width and height to something around these numbers. Your width should be the defined width of your site, and your height should be between 150 and 225 pixels. Make sure the resolution is at least 100 pixels/inch. Don’t make it more than 200 though. Press OK.
Step 3
Press Ctrl+zero to fit the canvas in the workspace. You need to be able to see the whole header as you work.
Step 4
Now we are ready to do some real graphic design, or as the cool people call it, GraFFik D-Zine. What? Use the paint bucket tool to fill the background with the same color as the background of your site. In this example I will be making an alternate header for this website. So, I fill the background with black (#000000).
Step 5
This is really important. Press Shift+Ctrl+N to make a new layer. Oh, and if you have a Mac, I’m sorry. I don’t know Mac shortcuts. Most of them are the same. This is the last time I will apologize for this. EVER!!! So yeah. New layer. When doing graphic design, make a new layer for every step. I’ve learned this lesson the hard way. Hours can be wasted over one mistake. Layers give you the freedom to make like thirty mistakes.
If your settings match these, press Enter or OK, and move on to step 6.
Step 6
Change the color to white, and select the text box tool. It looks like a capital letter “T”. Click on the header and drag a rectangle to about this size. Click on the picture to make it bigger. I like to use the font called “Fontin Sans CR”. Download it for free here. Set your font size to 60 pt. Left, right or center justification doesn’t matter. Type the site name, and click on the move object tool.
Step 7
Drag the title text most of the way to the left and just above center like this. We will need space to add our tagline.
Step 8
Now select the text tool again. Start in the open space to the right and drag left to make a new text box. This is to avoid the annoyingness of reselecting the title text. Change your font size to 24 pt and type your tagline. Select all of the text and double click on the color (currently white). In the hexadecimal color box type “004f1c.” Click OK.
Step 9
Now click the Move Tool and drag the tagline left to where it is just barely touching the underside of the site name in a couple of spots like this.
Step 10
Here comes the fun stuff. You could stop here, and your new header would be light years ahead of your standard website or blog. But let’s make it cool. We need a cool brush. You can browse through brusheezy.com to find a good stamp. For this we will use a leopard (I think) from the silhouette brush set 14 by S3vendays. Download it here. Any similar object brush will do. Before you go stamping things, though, click on the background layer in your layers box and press Ctrl+Shift+N to make a new layer behind the text. Press Enter. Now select the brush tool. Go to the top where it says “brush.” Click the drop down arrow, and select your specific brush. Make sure your Opacity is at 100% and Mode is set to Normal. Now go to your color (currently a blue). Double click on the blue, and change it to #FEB402. That will be a nice orange to complement the blue.
Step 11
Will this ever be over? Relax. We are almost done. Position the brush on top of the tagline and left of center of the site name like this.
Step 12
We just need to add some effects to the text now. Go to the layers box and click on the site name layer. Now right click on that layer and go up to blending options. Select it.
Step 13
Select Outer Glow on the left. Make ALL of your options match these. The color is #0024FE. Notice the Blend Mode, Opacity, Noise, Technique, Spread and Size. Press OK.
Step 14
Repeat Steps 12 and 13 for the tagline layer, but set the opacity to 26% instead of 55%.
Step 15
Click on the rectangle selection tool. Drag from the top left corner to all the way to the right and just like half a centimeter below the tagline like this. Go to the top and click on Image. Then click Crop.
The End
If it looks like mine or better, save it as PSD and then as JPEG. Then upload it to your site, and tell someone where you learned how to do it. Tell them you learned it from “The Leopard of Graphic Design.” This may result in loss of friendship. I can’t guarantee social results. You can use the PSD file to just change the text and colors anytime you want to make a header for another site.
Of course, you can always pay me to make one for you.