Home » Internet » Web Design

How to Make A Simple Banner For Your Website

Aug 17, 2007
This article will show you how to create an easy banner for your website even if you don't know a thing about HTML or graphic design. The only thing you need for this article to work for you is a graphics program,. such as: Paint Shop Pro, Adobe Photoshop, or some other graphics program of your preference. All of the instructions for this tutorial are given using Paint Shop Pro, however it will work for all programs as the basic functions are the same.

To get started, open your graphic program of choice. Once it is loaded, click on "File" then "New" in the menu. A box should then pop up letting you specify the settings you would like for the new image. Make sure it is sizing the project in pixels (NOT inches!) and enter 468 pixels wide and 60 pixels high. Leave the rest of the settings alone, except for the background, which you can change to whatever color you would like if your graphics program offers this option. If it does not, just make sure you enter the correct width and height, and the rest of the settings should be okay. Then click "Okay" to open that new project.

Now it has opened up a banner-sized square in your graphics program. If you have already chosen your background color, you can skip this step. Somewhere on your program there will be two colored squares. It will show one square behind the other. These are your foreground and background colors. Click once on the background color to select a new color of your choice. Once you have selected the color you like in the background (the square that is behind the other one), please click the icon in the tools menu that looks like a paint can - it is called the "Flood Fill" tool - click that icon once to select it. Then left-click once on the black banner in your program. This will fill the blank banner with the color of your choice.

Next we are going to add a photo or graphic to our banner. First find a graphic that you would like on your banner. This can be any size or shape and can be located on your hard drive or on the internet. If it is on your hard drive, go ahead and go to your graphics program and click "File" the "Open" and open that particular graphic on your hard drive. If it is on the internet, right-click the image on the internet and select "Copy". Then go back to your graphics program and click on "Edit" in the menu, then "Paste as new image".

Now that you have your graphic opened in your graphics program, click on it once to make sure it is selected, then go to the top menu and click "Edit" then "Copy". Then click back on your banner that you've started and go to the top menu again and click on "Edit" then "Paste as New Layer". Now you will see the image you selected on your banner. However it is most likely too big for the banner as it is, and you may need to move it around. So next you will want to click on the resize tool in your graphics menu. Depending on your graphics program, this may be a pointer, what looks like dotted lines, or something else entirely. In Corel Paint Shop Pro Photo XI it is called the "Pick Tool". However yours should say "resize" or something similar. You will know you have the right tool when it allows you to click and drag the sides of the image you pasted to allow you to resize it in your graphics program. Go ahead and resize the graphic to the size you need it and move it to where you would like it to sit on your banner.

Next we will want to add text. Whenever you are working with graphics, you will always want to put everything new you add onto a new layer, so that it is easier to work with. So click on "Layers" in your menu (or the corresponding button on your own graphics program) and then click on "New Raster Layer". Once you have added a new layer to your image, you are ready to write on it! Click the text tool (that will look like a capital A), and add the text you would like to your banner by clicking on it. You can also change the font size, font type, make it bold or italic, etc. at this point.

Once you have finished adding the text to your banner, you are mostly finished! You can add anything else at this point or change things as you feel you need to. As this is a tutorial for making only basic banners, we only provide instructions for images and text. You may wish to experiment with the various things your graphics program can do at this point, such as adding dropshadows, text effects, texture effects, and much more!

Now you are ready to save your work, so click on "File" in the top menu, then "Save As.." then when the window pops up to save the file, save it in a place on your computer where you can easily access it. Be sure to name it something you can easily remember, and select the file extension you would like to save it as (for banners, this is usually .JPG). Now you have your banner created and saved to your hard drive. At this point you can upload it to your webspace on the internet, or add it to your email signature, banner exchanges, or anything else you would like to use it for. Congratulations on making your first banner!
About the Author
Stephanie Davies is a 28 year old work at home mom to a 9 year old boy in Mid-Missouri. Her hosting company, Hosting WAHMs offers premium webhosting from $2 per month and up, with an easy to use sitebuilder! She also loves to knit, build websites, and talk to people.
Please Rate:
(Average: Not rated)
Views: 144
Print Email Report Share
Article Categories