How to Create a Header Banner
A header banner is a graphical element that lays across the top, or header, of a website. It is the first thing a visitor to your site sees, and is an integral part of the first impression your site makes. A header banner should include identifying information about your site, such as your site's name, slogan and company logo, if you have one. It may also include graphical elements such as photographs and logos that further help to establish the theme of your site. Creating your own header banner requires some skill and patience, but with a little planning, you can create one that perfectly suits your site's needs.
Other People Are Reading
Instructions
-
-
1
Determine the dimensions you need your header banner to be. To appear most symmetrical, it should be as wide as your layout's content area, so that it spans all the way across the layout. Your header should be as tall as you require for your header information to display properly. Make it too short, however, and you run the risk of visitors overlooking it entirely. Conversely, header that is too tall may overpower the rest of the layout and content. To be on the safe side, a header should be between 60 and 250 pixels high.
-
2
Open your graphics software of choice, such as Photoshop, PaintShop Pro or Microsoft Paint. If you don't have any of these, you can download GIMP for free.
-
-
3
Create a new image document in your software. Click "File," then select "New Image" or "New." You will be prompted to enter the dimensions of your new image. Enter the width and height you desire for your new header graphic. A blank image with your specified dimensions will now open.
-
4
Design your header banner to your needs. Add background colors, graphical elements, logos, textures, layers and any text you require to get it looking exactly as you want.
-
5
Save the new image to your hard drive. Save it in a format that is usable in HTML code, such as JPG, GIF, PNG or BMP, so that you can easily embed it into your site's code. Your new header banner is now ready to upload to your website.
-
1
Tips & Warnings
If you're working with image creation software that allows you to save documents with layers, save a layered version of your header graphic to your hard drive as well. That way, should you ever need to make minor changes to your header, you can easily edit the layered version and quickly create the new version of your header.
Be careful of image size. Header banners tend to be large images, and as such, may have large file sizes. This may significantly and negatively impact your site's load time. If your graphics software has image compression capabilities, experiment with saving the file at slightly lower resolutions to decrease the file size.
References
Resources
- Photo Credit logo image by goccedicolore.it from Fotolia.com
