JC Banner-making Guide

by Grimby the Hutt

So you've decided to make a banner for the JC, but you're not sure exactly how to do it. Not to worry! I'll explain the process and tell you everything you'll need to know - from making the images to choosing a color scheme. You'll also learn a few of my own tips and tricks for making some of those cool style effects, like bevels and borders.

A brief explanation of the JC Banner

The JC banner is made up of two distinct pieces: the images and the style sheet.

Style Sheet

The style sheet is basically a list of guidelines for how the page will look. This covers everything from the color of the background to the style of the usernames. The style sheet is a separate file linked from the html code of the page. In my opinion, the style sheet is far more important than the actual images. People are going to spend much more time reading posts and scrolling through threads than they are admiring your artwork. For this reason, it is important that you pick colors and styles that don't hinder anyone's experience of the boards.

Images

There are 6 distinct pieces of the banner artwork.

Image	Description	Size	Variations
Image Reference
Main	This is the main part of the top artwork.	764x110	Can be shorter in width, but the height must ALWAYS be 110.
Background	This is the filler image for the rest of the top.	764x110	Can be shorter in width, but the height must ALWAYS be 110.
Side	This is the image that extends along the left side of the page.	32x465	Can vary in height, but usually not in width.
Curve	This is the image in the "corner" of the artwork. It doesn't necessarily have to be a curve either.	69x69	Can vary in width and height. It is not recommended to make it any larger than 100x110.
Ad Holders	These are the images on the left and right sides of the advertisement.	74x58	Can vary in width. Do not make them larger than 60 pixels in height, as that is the height of the advertisements.
Reply	This used to be the image displayed on the post reply or post new topic screen. It now appears in other places however, so do not include "post reply" or anything to that effect on it.	437x88	Can vary in height and width.

And now, a quote directly from the JC Administration:

Generally speaking, all banners should have a strong Star Wars theme. A banner that lacks a strong Star Wars theme may be rejected.

Please include “theForce.net” or some variation thereof on all banner submissions.

JPEG images are preferred, but GIF images are also acceptable. Please try to find a balance between image quality and image size (in terms of kilobytes); many people who use theforce.net still use 56k modems, and don’t care to spend minutes at a time downloading artistic masterpieces when they could be browsing in forums with equally effective banners.

-Raven

What You'll Need

A decent Image editing program
I would recommend Photoshop or Paint Shop Pro, but there are many other programs out there that would work for this project. I will be using Photoshop CS (8.0) in this tutorial.

Notepad, or your favorite HTML editing program
Microsoft Front Page or Dreamweaver will make things a little easier, but aren't necessary. I will be using notepad in this tutorial.

Creativity and Patience
I can't stress these two enough. Have fun with this project and play around!

Creating the Images

Ok, at this point you've got a great idea for a banner and you're ready to get to work on it using your favorite images. Open up your image editor and start by creating a new image with a resolution of 1528x110, 72 pixels/inch, and 16 bit color. Leave the background color transparent for now.

Now go to View at the top and select Screen Mode >> Full Screen Mode With Menu Bar. In this mode you can drag around the image with the hand tool so it's easier to see. Keep in mind you can also use the zoom tool to zoom out and see the whole thing.

Create a new layer and call it "top". Now choose Selections>>Select All and, with your bucket tool, fill in the entire area with a color that will not be dominant in your finished banner. I'll explain why you're doing this in a moment.

Choose Selections>>Deselect to get rid of the marquee. Now it's time to resize the canvas to accommodate the whole banner. Choose Image>>Canvas Size and make the new dimensions 1528x575. Be sure to change the anchor setting to the top.

You should now have a canvas that looks something like this. The reason for the top layer is probably more apparent now. This layer is basically a guide to show you where the boundary for the top images lies. Now let's make a guide layer for the side image. A quick and easy way to do this is to create a new image at 32x465 pixels. Use the bucket tool once again and make this a different color than the top guide layer. This will help you differentiate between the two.

Choose Select All once again and copy this image by choosing Edit>>Copy. Now switch back to your banner and paste this layer in. Use the move tool and move it to the bottom left corner. Rename this layer "side" so you can keep track of it. You can now close the other image as you don't need it anymore.

Using the layer window, make sure you have the "side" layer selected and change it's opacity to 50%. Now repeat this for the "top" layer. Keep these two layers on top of all other layers while creating your artwork. You now have a working template with which to create your artwork. Remember that you can hide the guide layers while you work so they don't get in the way. Just keep them on top of everything else and make them visible again only when you need to use them.

At this point, you're on your own. I'm not going to get into how to make the artwork here. I'll assume you know how to do that already. Here is a link to some tutorials that might help, should you need more assistance:
http://www.stirfrymojo.com/Tutorials/
The second and third tutorials are especially helpful if you're having trouble getting your curve to look right.

Skipping ahead...

Slicing It Up

Now that your artwork is finished, it's time to slice it up. Again, here are the standard dimensions for the images:

Main image: 764x110
Background: 764x110
Side image: 32x465
Curve: 69x69

Now fire up your slice tool. Begin by creating a slice for the main image (764x110), then one for the background image (764x110), then the side (32x465), and lastly the curve (69x69).

Now select the Slice Select Tool and double-click on the first slice. In the Slice Options window, rename it to "main" and check that the size is correct, then click OK. Rename the other slices "back," "side," and "curve" respectively.

At the top, click on "Hide Auto Slices" to get rid of the extra slices that were created for you.

If everything looks right, it's time to save the images. Choose File>>Save For Web. The web optimizer window will now come up and allow you to save the slices as individual images. Click on the "main" slice. At the top, choose the "Optimized" tab. At the bottom you will see the estimated file size and download time for your selected slice.

Use the settings on the right to adjust the amount of compression. The goal here is to make the file size as small as possible without compromising the quality of your images. A good quality setting is around 70 or 80, but look closely at your image and make sure it doesn't appear too grainy. Once you've decided on a good compression setting, repeat the process for the rest of the slices. In most cases, you will probably want to select the same compression level for all the slices to keep them consistent. When you're finished, click Save.

Now look at the options at the bottom. Your "Save as type" should be "Images Only", "Settings" should be "Default Settings", and "Slices" should be "All User Slices". The file name is not important as it will not be used. Now click on save. This should create a new folder called "Images" with all four of your banner images inside (main.jpg, back.jpg, side.jpg, and curve.jpg). The images should be the same names you gave to the slices. Feel free to rename the folder to something a bit more descriptive, as it will hold all the files for your banner.

Now save your ad holder and reply images to the same folder, using the same techniques as above. Again, it is recommended you use the same JPEG quality settings as you did for the others. You are now ready to assemble the HTML test page. Leave your image editor open though, it'll come in handy in a moment.

Creating the Test Page

Right-click on these two files and save them to the same folder as your images:

testpage.htm
stylesheet.css

Open up notepad and open 'testpage.htm'. A few lines down, you will notice a list of "var" statements:

var STYLE = "jc-main-style.css";
var MAIN = "main.jpg";
var BACK = "back.jpg";
var SIDE = "side.jpg";
var CURVE = "curve.jpg";
var ADLEFT = "adleft.jpg";
var ADRIGHT = "adright.jpg";
var REPLY = "reply.jpg";

These variables define the names of your image files and stylesheet. If you have different names for any of these, change them here. You should only have to update the "STYLE" var unless you've changed the names of your image files:

var STYLE = "stylesheet.css";
var MAIN = "main.jpg";
var BACK = "back.jpg";
var SIDE = "side.jpg";
var CURVE = "curve.jpg";
var ADLEFT = "adleft.jpg";
var ADRIGHT = "adright.jpg";
var REPLY = "reply.jpg";

That should be it for the html. There is no need to change anything else since the javascript inserts the image files and stylesheet code for you. After you're done, save it. Now open up your web browser and open testpage.htm. It should look something like this:

You can now see your banner starting to take shape. If you have any images missing or in the wrong place, go back and fix it in notepad, save, and refresh your browser window. At this point, it's time to customize that style sheet to match your artwork.

Customizing the Style Sheet

Open up 'stylesheet.css' in notepad and take a look at it. You should see a list of selectors (i.e. "body"), each with it's own properties (i.e. "color:white;"). Each selector defines the style for an element of your page. Let's take a look at one of them:

.BoardRowB {
     background-color: #F6E1BD;
     color: black;
     text-decoration: none;
}

Here we have the selector ".BoardRowB", which defines the style of certain table cells. Its basic properties are background color, text color, and text decoration. By changing the property values, we might come up with something like this:

.BoardRowB {
     background-color: aliceblue;
     color: #CCCCCC;
     text-decoration: bold;
}

Notice that while we have changed the values, the syntax remains the same. Make sure when you are editing the style sheet that you don't accidentally delete the brackets, and each property has a semicolon at the end. Each time you make changes to the style sheet, save it and refresh your browser to see the results.

Also note above that you can use either color names or html hex values as color properties. A list of color names can be found here.

The test page should help you out to figure out which selectors define what. For reference, here's a list of all the selectors and a description of each.

Selector	Description
Stylesheet Reference
body	Defines the page background, default text color, and colors for the scrollbar.
a.link, a.visited, a.hover, a.active	Use these to define different link states. (Usually only the text-decoration property is adjusted here)
.left	Defines the background color of the left strip. Match this to the color of your side image.
.MainTable	Defines the background color and the default font settings of the entire board table.
.MainMenuRowAlt	Defines the color and font style for the Alt Row text, aka the pm notification text ("1 new"). Do not adjust the background color.
.MainMenuRow	Defines the color and text of the Main Menu Row.
.MainMenuLink	Defines the style of links in the Main Menu Row.
.BoardColumn, .BoardColumnLink	Defines the color, text, and link styles of the Board Column. Do not adjust the background color of .BoardColumnLink.
.BoardRowA, .BoardRowALink	Defines the color, text, and link styles of the Board Row A. Do not adjust the background color of .BoardRowALink.
.BoardRowB, .BoardRowBLink	Defines the color, text, and link styles of Board Row B. Do not adjust the background color of .BoardRowBLink.
.SubjectLink, a.SubjectLink, a.SubjectLink:active, a.SubjectLink:visited	Defines the color and text style of Subject Links (thread links). Generally speaking, Adjust color and text style on .SubjectLink and a.SubjectLink (make them both the same) and only adjust the text style on a.SubjectLink:active and a.SubjectLink:visited.
.AuthorLink	Defines the color, background color, and text style of the AuthorLink (username).
.VersionText	Defines the color and text style of the Version Text. Usually only the color is adjusted.
.InputSection, .InputNotes	Defines the color and text style of the Input Section and Notes. Disregard these unless you are creating a default main banner.
.SignatureTitle	Defines the color and text style of the Signature Title. Usually only the color is adjusted.
.SignatureText	Defines the color and text style of the Signature Text.

Style Sheet Tips

Generally speaking, do not change the font types or any of the font sizes. It is important that these stay the same to keep consistency throughout all boards on the JC, and to ensure that users don't have trouble reading the text. Keep in mind that not everyone uses the same browser and screen resolution that you do.

In most cases, you will probably only change the colors in each selector, leaving all other properties the way they are. When deciding on background colors, it is best to choose colors that aren't too bright or too dark. Something a little more "gray" is always more pleasing to the eye.

Now comes the part where you endlessly play around with colors and text styles until you decide on the perfect scheme. An easy way to choose the board colors is to go back into Photoshop and grab colors out of your artwork using the eyedropper tool. Click on an area of your artwork so it changes the foreground color. Then click on the foreground color to bring up the color picker window. Copy the html color code at the bottom and then paste it into your style sheet.

Creating a good style sheet can be a little tricky at first, especially if you don't have much experience working with them. But with a little practice and a lot of patience, you'll get the hang of it.

Advanced Style Sheet Editing

Well if you're reading this far into the tutorial, I'll assume you know a thing or two about style sheets. If you're looking add a little more flair to your banner, here are a few tricks you can try:

Borders

Each of the table cell styles (BoardColumn, MainMenuRow, etc.) as well as the Authorlink style can be enhanced by the use of borders. Borders can be defined in width, color, and type (solid, dotted, dash, double, groove, ridge, inset, outset). Usually a 1 or 2 pixel width will suffice.

Example: border: 2px groove snow;

Background Images (bevels)

Another way to soup up table cells or usernames is with the use of image backgrounds. A popular application of this is the use of beveled images. If we take a 1x20 pixel bevel image, repeat it horizontally, and fill the rest of the background with the matching color, our results will be much like those to the left.

Example: background: #3C3E6A url(images/coldblue-gradientblue.jpg) repeat-x;