[Tutorial] Grimby's Guide to Advanced Banner Graphics

Advanced Banner-Making Techniques

Traditionally, banners on the JC have been comprised of 4 main pieces: the main image, the background image, and the side and curve images. When laid out on the page, the header looks something like this:
[image=http://www1.theforce.net/jc/images/banner-tutorial/banner-diagram1.gif]
The "ad space" is comprised of the ad holders and advertisement (or Google search box), or the post reply image on reply pages. There are several variations of this style, including banners without side images, or without curve images, or both. On some banners, the curve image is so large that it is converted to a background image so that other content can appear on top of it, rather than pushing it far to the right side of the page or out of view:
[image=http://www1.theforce.net/jc/images/banner-tutorial/banner-example4.jpg]


New Style
Some banners have popped up lately that do not use the traditional side and curve, but instead use background images in the ad space area like so:
[image=http://www1.theforce.net/jc/images/banner-tutorial/banner-example1.jpg] [image=http://www1.theforce.net/jc/images/banner-tutorial/banner-example2.jpg] [image=http://www1.theforce.net/jc/images/banner-tutorial/banner-example3.jpg]
The resulting banner looks "bigger" because the graphics appear continuous. However, the makeup of this style is only a slight variation:
[image=http://www1.theforce.net/jc/images/banner-tutorial/banner-diagram2.gif]
You can see here that all we've done is create a background image that spans the entire width of the page and extends below the ad space area.
To create a banner with this style, simply create your banner graphics like usual, keeping in mind that only the top part of the image will remain completely visible. Everything below 110 pixels is subject to being covered up by the ad space content. For this reason, all titles should be in the top portion of your graphics. Here is an example of the main, back, and background images using this method. While a curve image would not be necessary for this type of banner, a side image may still be used, like so:
[image=http://www1.theforce.net/jc/images/banner-tutorial/banner-example5.jpg]


Ad Holder Images
When creating ad holder images, you'll probably want to use transparent gifs, or better yet, transparent pngs. In the first two example banners above, the ad holders are transparent png images:
[image=http://www1.theforce.net/jc/images/main_grimby_2008/adl.png] [image=http://www1.theforce.net/jc/images/fandesign2/fandesign-adr.png]


Dimensions
When making a banner in this style, I usually create very wide main image (950 x 110), then two background images. The first will be the traditional repeating background for the top, and, depending on the artwork, it can be 950, 475, or even 1 pixel in width. The second background image will be everything else. This image usually ends up being about 300 pixels high and 1000-1600 pixels wide, depending on the artwork. When creating graphics for this banner style, keep in mind that some people use very wide screen resolutions, so be sure that your graphics don't end abruptly or appear to be cut off on the right edge. I typically use a gradient to seamlessly blend my images into a solid color on the right and at the bottom:
[image=http://www1.theforce.net/jc/images/arena_sb43/sb43-cssback.jpg]


Coding the Background Image into the Style Sheet
In order to add the background image for the ad space into the banner, it must be coded into the style sheet in the "body" selector, like so:

body {
background: black url(background.jpg) 0px 110px no-repeat;
}

Here we have defined the color of the page background, as well as the background image and where it should be placed on the page. The first nu