Customize Free Website Headers

How to Customize Free Website Headers

By: James T Maxwell
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.

Long gone are the days when the web or graphic design work meant hiring someone to do all of your website work for you. This undoubtedly meant spending money to get exactly what you wanted. But even then, there was no guarantee how that was going to turn out. With so many programs now, you can have full reign to completely redesign the website you already use, as well as create that stunning first website.

One of the easiest programs we have found to work with yet is hop. When you use hop, you can easily have a finished product in your own style in no time at all. You’ll be doing the work yourself, using your own computer and on your own time, and you’ll be saving money from the get-go. While choosing this method of creation for all your header needs, with your personal style and feel to them, you will simply have to add them to your site codes once you’re done. Let’s not get too far ahead of ourselves though.

Your first step is to open your hop software and create a new image. You can either set the size of your image by choosing the pixels at 1920×1080, 1280×375, 1024×300, 800×200 (or the size you wish your website to be) or by using the image-size tools available to you so you can set the dimensions properly to fit the size you wish to work with.

Select the image outline or header, followed by selecting the tool resembling a rounded rectangle. Drag the pointer to the top left-side corner of the image. Next left click to draw a rectangle that will cross from left to right of your image. This shows you the outline of your header section.

Continue by selecting “Layer” from the navigation toolbar, 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.

Next, you want to choose the “bevel” option. This will result in the rectangle having a professional style with depth, added by your chosen shadow. Clicking on the “Layer” icon will 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 your 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 some “oomph” to your header. Start off by selecting the rectangle tool, then left-clicking at the top right-hand corner. If you drag the pointer along the top of the header, you will notice you are 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.

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 the exact size you may require with the “Crop” tool.
Since you have put all this hard work and effort into this project, you don’t want to lose it. Click “File” then “Save for Web and Devices” to save this image. You might want to consider creating a folder for all your business website information so you can keep everything together. Once you have saved this new header, you need to upload it to the “Images” file of your website codes.

To properly add your new header to the pages of your website, you’ll be using it as a background image. It will need to be located in the first row of the first table of the website, right under where you see the head tag.

Now you know just how easy it is to create your own website headers for free. Depending on the nature or purpose of your website, you may decide to change things up more often. How about each season? Or the other pages of your site? It’s no longer a question of money, but of imagination.

Last Update: Dec 5, 2022