<img src="/graphics/JSBUG.gif">

How to Create a Simple Banner



You can do this at Image Magick, Gifworks or at My Imager. But for this tutorial, I'm going to use Image Magick. If you can make banners at Image Magick, then you will be able to make them anywhere.

The banner we will be making, we'll make from scratch. No banner blanks.

There will also be a note at the end, on how you could add a logo or image to your banner if you'd like.

First you will need to find a nice background off the internet that you would like to use for your banner. So go find your background you want to use, and we'll start on your banner!

Now that you have your background, we need to go to Image Magick. Here is the background I chose to use for this tutorial.
When you get to Image Magick, this is what you need to do:


      *Type the URL of your background into the textbox beside where
       it says URL.

      *Then push view. You will see your background.

Next we are gonna have to resize the background to the size of banner we want. I always use 450x75. You can choose whatever you like though.


      *Go to the tabs at the top, and push the one that says "resize".

      *Erase whatever is in the "image size" box, and type in 450x75!.
       (You have to use the exclamation point at the end like I did,
        or it wont resize it).
      
      *Dont change whatever is checked in the "scaling method". Just
       leave it alone.
      
      *Now press "resize"

This is what your background should like now. Click here

Now we will put on our banner, what we want it to say. (annotate).

*Go up to the top, and now click on the tab that says "annotate". *On the next page, you will see the word "text", with a textbox below it. *erase whatever is written there, and write what you want your banner to say. (the example I am using will say "Beary'd Treasures). *Next you will see it says "location and gravity". This is what you use to put the text where you want it. For the example, I will center the text. *Where it says +0+0, leave that alone. Beside it, is a pulldown menu with N,S,E... *Choose "center", so we can center our text on our banner. *Scroll down PAST the gray "annotate" button, to more options. *where it says "fill", type in the color you want to use for your writting. *"stroke", just leave alone. *Now choose what style font you want. You can click on the word FONT, and it should take you to a page with examples of each font. (I chose "arctic medium") *Scroll down to "point size". This controls how big the text on your banner will be. (I used 35) *Leave everything else alone, and go back up to the gray annotate button. (not the one on top), and press it. *The next page you go to, will have your banner so far, with the text written on it.

This is where you can go back and change anything you dont like. If you dont like the font style, the font color, or if you want the words higher or lower, use your back button, and just change whatever you want.

This is also a good time to "play" and see what all you can do to your banner. This is how I learned what all the different items were for. I went back and changed something, or wrote something in a blank text box, just to see what it did to my banner. Try different font styles. Try changing the location and gravity just to see how it effects your banner. Where it says +0+0, try using +30+30, and see where it puts your text. This is how you will get to know what all you can do with a banner. REMEMBER, it wont hurt to "play". When you are done "playing", just fill in all the fields how you originally had them, and press the gray annotate button. You'll have your banner back!

This is our example banner so far, after we wrote on it.

Click here.

Now the only thing left to do to our banner, is put a frame around it. To do this:

*Click on the tab that says "decorate" *On the next page, you'll see "decoration geometry". Erase what is there, and try using 6x6. (this is how thick your frame will be. Use whatever # you wish. *Next, type in the color you want your frame. I'll use purple. *be sure the radio button beside "frame", is checked. You can always go back later, and test the other options, to see what they do. *Now press the gray decorate button. *The next page will have your completed banner. If you dont like the border, use your back button and change frame thickness or color.

Now you need to save your work. Just follow these steps.

*Click the "output" tab at the top. *On the next page, choose "gif" for the format. *For storage type, choose "single file". *Now click the gray output button. (not the one on top) *On the next page, click on your image. *The next page will be your temporary URL. Now you need to transload it to your site.

This is my finsished banner. Click here.

If you'd like to make your banner even more fancy, you can composite an image on one side of it. Let me tell you how to do that real quick.

You'll need to note the size of your banner, BEFORE you add a border to it. You'll take the image you want to use to image magick, and resize it. The height of your image, cant be any higher than the banner height, other wise it won't composite.

Composite Your Image

* While viewing your banner, Click the tab that says "composite".

* On the next page, it will ask for the URL of the image. Put in the URL of the image you want on your banner.

* Choose either North, West, East or South. (banners are usually North, South or Center).

* Erase the #'s that are in the box beside the location button. Leave it blank.

* Go down to Composite Operation, and choose "over".

* Now press the composite button. The next page will be your banner with your image on it.

Now just finish annotating and framing your banner!