Free Website Headers: How to Customize for Your Website

Whether you are the owner of a new website, or an existing one needing a bit of 'redecorating' certain aspects need your consideration. You may want people visiting your site to see a very professional site. Perhaps your website caters more to children and family, and you want a family-friendly experience when they find your page.

The days of hiring someone to do your web or graphic design work are long gone. Remember those days? It was once a natural practice to hire someone, which meant spending money, to get precisely what it was you were looking for. Even then, there were still no guarantees. There are now many different programs available, permitting you to totally revamp your current website, or even helps you create a great first site. Of all the choices, we have found Photoshop to be the easiest to work with.

With Photoshop, you can easily find yourself with a finished product in the style you really want in no time. By doing the work by yourself from your own office, on your own computer you are already saving money and we haven't even started yet! By choosing to use this method of header creation, with the look and feel you want, you'll only have to add it to your site codes. But let's not get ahead of ourselves.

To get started, open your Photoshop software and create a new image. You can set the size of your image, which will be your header, either by entering 1025 x 150 pixels (or whatever the size of your webpage may be) or by using the image-size tools available to you in order to set the proper dimensions you wish to work with.

Selecting the image outline or header, select the tool resembling a rounded rectangle. Drag this pointer to the corner of the image found at the top left side. Now left click to draw a rectangle crossing from the left to right side of your image. This will show you the outline of your header section.

Continue by selecting "Layer" from the navigation tool bar, which you can find at the top of the window you are working in. Your next option is to choose the "Layer Style", followed by "Add Drop Shadow" from the various options. You will now see a new pop-up window with the option "Drop Shadow, Inner Glow and Outer Glow." Be sure to check the box in front of this option.

The next option you want to choose is the "bevel" option. This option will result in the rectangle now having a professional style with depth, which is added by the shadow you have chosen. Click on the "Layer" icon to add a new layer to your header.

Next, open the text tool, dragging it to the top left corner of the image. Type here the name of your website or company. You can play around with the font type, size and color to find the one you like best. Various text option tools can be found on the navigation bar at the top of the image.

Now we are going to add a bit more style to your header. Start by selecting the rectangle tool, left-clicking in the top right-hand corner. By dragging the pointer along the top of the header, you will be creating a smaller navigation bar at the top of the image.

Click on the "Direct Selection" tool, then you can select the rectangle by left-clicking on it. This results in small squares appearing at each corner of the rectangle. If you click the lower left corner of this shape, and drag it toward the right side you will be creating an angled edge for this navigation bar.

To add color and effects to this upper navigation bar, you would choose the "Fill" tool and choose your options from there. You can also cut and crop your image to the exact size you need with the "Crop" tool.

You want to ensure you don't lose this work, so click "File" then "Save for Web and Devices" and save this image. You might want to create a folder for all your business website information to keep everything together. Once you have save your new header, you need to upload it to the "Images" file of your website codes.

In order to add this new header to your web pages, you need to use it as a background image. You will be placing it in the first row of your first table of the website, right under where you see the head tag.

When all is said and done, you will see just how easy it is to not only create your own website headers, but how to do it for free. Depending on the nature of your website, you may decide to change things up for each season. Or maybe create different headers for other pages of your website. Why not? You can, and for free to boot!