by James T Maxwell
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.
When using Photoshop, you can have a finished product in the style you desire in no time. Seeing as you will be doing the work yourself, from your very own computer you will be saving money from the word go. By choosing this method of creation for your header, with your desired feel and look, you just need to add it to your site codes. But let’s start at the beginning.
Your first step is to open your Photoshop software and create a new image. You can either set the size of your image by choosing the pixels at1025 x 150 (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.
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.
Next, you want 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 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 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.
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.
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 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 for each season? Or the other pages of your site? It’s no longer a question of money, but of imagination.