If you are here then you must be ready to make your first graphic set. Terrific! Let's go!
1.) First choose your decorative image and resize it twice...once to fit the welcome banner (resize it to 100x100), once to fit the buttons (resize it to 50x50).Output and transload both of them...make sure to give them different names!
2) Chop headerclear.gif to 300x100...output, rename and transload.
3.) Chop headerclear.gif to 150x50...output, rename and transload.
4.) Make your welcome banner...start with the 300x100 clear gif, composite the 100x100 decorative image on it (use west), annotate your welcome message on it, decorate it. When you are satisfied with the finished banner, output it, name it and transload it.
5.) Make a blank button compositing the 50x50 decorative image on to the 150x50 clear gif (once again use west), decorate it, then output, rename and transload it.
6.) Make your buttons by annotating on the blank button you just made. Output, name and transload each one.
7.) Make your bordered background. Composite the 100x100 decorative image onto the bgclear gif (once again use west), Output, name and transload.
8.) Make a divider bar by chopping headerclear.gif to 300x10. Decorate with a border or frame about 10x10. Output, name and transload. Or, if you like, use a pre-made bar (from a "free use" graphic site) that you have transloaded to your site.
You are now ready to make your html file. Set it up by placing the table code I gave you (on the first tutorial page) under the body tag on your html file. As this set will be transparent you will need to choose the background color you want and add the background URL to the body tags.(IE: body bgcolor="#ffffff" background="URL of your border bg"). Erase where it says "your page content goes here" and put in the img src links to your graphics. I arranged mine by putting the welcome banner first, followed by the divider bar, then the buttons, then another divider bar, but you can arrange yours however you like. If you want to put two buttons side by side put & followed by nbsp between the two links.
You may need to play around with the page set-up in order to get it right.
Here is a little trick of mine that you can use...once you make your first graphic set page and are happy with it, all you need to do to make more set pages is to copy the first file and rename it for each new set that you make. Then all you will need to do is change the page title and link info for the graphics!
Remember, your first page should be considered to be a practice page, mainly to get you used to making the graphics and displaying them. Have fun doing it...after all, no one but you will see it until you link it on your homepage! And as you become more experienced, you can start compositing colored background tiles on to the clear gifs to create sets that are not transparent.
And remember, if you need help, email me! I will be glad to answer your questions!
This background set provided courtesy of
This page hosted by

Free HomePages
|
|