Now you are going to learn how to composite graphics together. This is how you place a decorative image on top of a background image to create a banner, button or bordered background. Ready to start?
First you need to select the background image for your graphic. You can choose a clear (transparent) gif or a colored one, whichever you prefer. Most of the times you will need to resize this graphic up or down to the correct size, either by using the resize feature or by using transform to chop the graphic down to size. Here are two different clear gifs to choose from...BUT PLEASE TRANSLOAD THEM TO YOUR SITE BEFORE USING THEM!
1.) http://www.oocities.org/frugalgourmet2/graphics/headerclear.gif (400x200-use for banners and buttons...resize as needed)
2.) http://www.oocities.org/frugalgourmet2/graphics/bgclear.gif (700x200-use for bordered backgrounds)
Next choose the image you want to use as your decorative image, but make sure it is a small one (for this lesson only). Write the URL down!
Now go to ImageMagick and type in the URL to your clear gif. Don't worry about the size right now...you are just learning how to composite and you will need to learn how to output a graphic before you can actually make a real banner, button or background. Click on view.
When your clear gif has loaded, click on composite. In the bar provided, type in the URL for the decorative image. Next choose the location for the image on the background graphic in the same way you chose the text location for annotating...you can start by trying out the basic locations from the drop-down menu, and then add location parameters to move the image around. Leave the composite setting on "over" because it's the only one you will need. Click on composite to see how your decorative image will look on the graphic. Use the back key to go back and experiment to see the different effects you can achieve by adding location parameters.
When you are ready to actually make a "keeper" graphic, you will need to remember that the decorative image can NOT be larger than the background image or composite will NOT work! The decorative image must fit into the background image and if you plan to also annotate on your graphic, as for a banner, it will have to be much smaller than the background.
Also, when you make a bordered background, your decorative image may be a size that will not fill all the way to the bottom. For example, if you composite with a decorative image that is 123 pixels high on a background that is 200 pixels high, the image will not reach the bottom of the background image. In this case you would have to chop a bit off of the bottom of the background before outputting it so that it will look right when it tiles on your page. You will get to see what I mean in the final tutorial.
When you are comfortable using composite, you can go to the next tutorial.
 
This background set provided courtesy of
This page hosted by

Free HomePages
|
|