Graphics and Templates

Steps for Designing a Web Header

Posted on: May 7, 2011

If you want to make your website attractive, eye-catching and professional then you can make it possible with a high-quality Web header graphic. It is strongly recommended to add Web header graphic on your website because boring text and non-professional pictures and clip arts mar the beauty and attractiveness of your site. If you are also interested in designing a Web header for your site then follow the steps mentioned below:

  • First step is to open a computer graphics software program. For this, you can open Photoshop or Paintshop program. Now commence a new project with a graphic having a width of 700 to 800 pixels. As far as height is concerned, it will all depend on your choice and look of your website. Here I would like to add that standard heights for Web header graphics are between 200 and 300 pixels.
  • In the graphics program, use bucket fill tool to turn entire background of Web header graphic in a solid color but make sure that this color matches with design of your website. I would like to use black or white color.
  • Now search internet for a photo according to topic of your website. If your website is about gardening, you can add a photo of flowers bouquet but ensure that picture must be large. After that, open this image in that software program where you had started your Web header.
  • Add another layer to Web header by opening layers palette. Then you will copy that part of photo that will fit well on header graphic. Paste this picture in new layer.
  • Try to find an accent graphic or photo having more interesting images and then insert that graphic on a new layer in software program. Take care that the images should smoothly blend with each other so select edge of graphics with great care.
  • On another layer, add text to Web header. While adding text, make sure that font is easily readable and its color matches well with theme color of website. Title of website should be in large font. Under or beside the title, add a motto, slogan or some description in small text size.
  • After following above mentioned steps, you are required examine Web header carefully to ensure that it is made in the way you imagined. In order to preserve the layers, save a copy of graphic in software program’s graphic format. It is recommended because it can help you to edit graphics and text later. Now merge all layers and save graphic as GIF, JPG or PNG image. If you want to optimize Web header for internet use, then save image as GIF or JPG using small number of colors.

These steps are quite simple and easy to follow to design a Web header. Hopefully, you will understand and follow these instructions.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

Hi, My name is Tania Yellob and I love to write. This is my blog and I love to hear from you regarding my writings. Recently, I have started creating contents and templates for a famous website BuraqPrintables. Please visit it and let me know hows my work and any improvements I can do?


%d bloggers like this: