Make a Layout
Making a layout is one of the most difficult things when it comes to graphics. Unlike normal banners and blinkies, they require CODING. Yes, coding. Normal graphics just need the image code, but layouts need more than just that. We're going to be making a simple table layout with a banner in this tutorial.
1. Start by opening Adobe Photoshop (if you aren't using photoshop you'll have to adapt the banner-making steps to your own program). This is for your banner, so it can be any size you want, but it's best if it's an elongated rectangle. Mine is size 700px by 150px.
2. Click on the paint bucket tool, choose a color, and fill in the background. You're going to want to only have a maximum of three colors (besides the black text and white background that will be on your page) so choose carefully. Make sure it isn't a heavily saturated color either. I'm using this peachy-orange color.
3. If your layers palette isn't open, go to Window- Show Layers. Then click on the piece of folded paper at the bottom of the palette to make a new layer. Choose black as your color and apply a few brushes to your background. Change the layer style to Overlay and drop the opacity to around 35%. Repeat with a few more layers. You can also try it with white. The more layers it has, the more depth it will have.
4. The next part is to add your text. This is the name of your site. It should be in a VERY dark version of your background color. If your background color is dark (like navy blue or black) make the text white. The trickiest part of having text is getting a font that matches the layout. If your layout is very swirly and pretty-like, you should have a serious font such as Georgia to balance it. If your layout is grungy and dark, you may consider a cursive font like Hurricane or Porcelain. If you have a cute layout, a good font would be something very rounded. The spacing of the letters and size of the type can also affect how it looks, but the most important part is that it's legible and easy to read! You don't want something so faded your site name just disappears.
5. Finally the banner part is done (unless you want to add something else)! Go to File- Save For Web and save it as a gif. Next comes the coding.
All tables have to start out with <table> and end with </table>.
Between those you tags you put everything. <tr> makes a new row and <td> makes a new column. You have to end each tag.
Here is our code so far (to get a single cell, you have to have at least one td tag). I also added border="1" and width="100" to the code to make it easier to see the table.
| blah |
But wait, we want two columns. We need one for the content and one for the links. Add a second <td> and </td> after the first has been ended.
| blah | blah 2 |
Now comes the confusing part. To get a table that has a banner at the top and two columns at the bottom we need to add some <tr> tags. What you do is start and end a <tr> tag and put <td> tags in it with the banner, then start and end a second set of <tr> tags after the first is ended with your two sets of <td> tags in it. Sounds confusing? Here's what the code looks like (also for the td column tag of the first one I've added colspan="2" so it spans across both of the bottom columns):
| blah | |
| blah2 | blah |
6. Now that we have a nice, neat little table, we need to clean it up a bit and get it layout-worthy. Here's our new layout (feel free to change the colors, widths, border sizes, etc..). It looks much cleaner now. All I really did was add a border and cell color and change the cell padding and spacing. (the table in the coding has a much larger width)
| banner image | |
| links go here | content goes here |
7. Finally, you're almost done. Head on over to your image host or tinypic.com and upload your picture, copy the code they give you that only has the image address in it then add to the table code where it says 'banner image.'
Here's how my final layout turned out (click)
Hope this helps you make layouts, and remember that there are tons of different ways to make layouts and this isn't necessarily the right style for you. Just try a lot of different things. :)
