Free Website Headers: How to Customize for Your Website
April 10, 2009 by James T Maxwell
Filed under Website Design
As the owner of a new website, or an existing one in need of revamping, there are certain aspects to consider. Maybe you want your viewers to see how professional your business is. Or maybe your site caters to families and that is the ‘feel’ you want viewers to 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.
Start by opening your Photoshop software and create a new image. You can now set the size of your image, which will be the size of your header, either by entering 1025 x 150 pixels (or the size of your webpage) or by using the image-size tools which are available to you in order to set the proper dimensions you want to be working 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.
We’re going to open the text tool now, dragging it to the top left corner of your image. Type here either the name of your website or company name. Have fun playing around with different font types, sizes and colors until you find what really suits your ideas. There are also other text option tools on the navigation bar at the top of the present window.
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.
You can now click the “Direct Selection” tool, and by left-clicking on it you can select the rectangle. You will now see small squares appear in each corner. By clicking the lower left corner and dragging it toward the right, you will create an angled edge for this new navigation bar.
In order to add color and/or effects to the upper navigation bar, you would need to choose the “Fill” tool and pick your options from there. It is also possible for you to cut and crop any image to an exact size you may require 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.
To add the new header to your web pages, you will be using it as a background image. It will be located in the first row of the first table of your website, right under where you see the head tag.
Now that all is said and done, you will be able to see just how easy it is not only to create your own website headers, but how they can be done for free. Depending on the goal of your website, you may decide to change headers for each season. Or maybe get creative with the headers for other pages of your website. There’s no reason why not. Besides, it’s free!
