[Tutorial] How to Create a JC Banner -- Graphics (Start Here!)

If you're new to banner making, this tutorial will teach you the basics and guide you through the steps of how to create graphics that can be submitted as a banner for use on the Jedi Council Forums.

Special Note: The stylesheet.css and testpage.htm files have been updated! Please download the new versions and use them for your future banner projects.

---

[color=darkblue][u][b]A Brief Explanation of the JC Banner[/b][/u][/color]
The JC banner is made up of two distinct pieces: the graphics and the style sheet.

[b]Images[/b]
[image=http://www1.theforce.net/jc/images/test/bannerexample-full.jpg]
The banner artwork is comprised of six separate pieces (some are optional):
[blockquote][color=darkred][b]Main Image[/b][/color] (Size: 764x110) This is the main piece of the top artwork. [i][u]Variations:[/u][/i] Can be shorter in width and up to 950 wide, but the height must ALWAYS be 110.

[color=darkred][b]Background Image[/b][/color] (Size: 764x110) This is the filler image for the rest of the top. [i][u]Variations:[/u][/i] Must match the height and width of the main image in most cases.

[color=darkred][b]Side Image[/b][/color] (Size: 30x465) This is the image that extends along the left side of the page. (Optional) [i][u]Variations:[/u][/i] Can vary in height, but should never be more than 35 pixels wide.

[color=darkred][b]Curve Image[/b][/color] (Size: 70x70) This is the image in the "corner" of the artwork. It doesn't necessarily have to be a curve either. (Optional) [i][u]Variations:[/u][/i] Can vary in width and height. If your curve is larger than 90x90, it will be converted to a background image.

[color=darkred][b]Ad Holders[/b][/color] (Size: 60x60) These are the images on the left and right sides of the advertisement. (Optional) [i][u]Variations:[/u][/i] Can vary in width and height. These should not be any larger than 80x80.

[color=darkred][b]Reply Image[/b][/color] (Size: 400x80) This image is displayed on the ?post reply? page in place of the advertisement when you are replying to a post or creating a thread. (Optional) [i][u]Variations:[/u][/i] Can vary in height and width, but should never be larger than 800x90.[/blockquote]
[b]Style Sheet[/b]
The style sheet is basically a list of guidelines for how the page will look. It is a separate file that is linked in the HTML code of the page. It controls everything from the color of the background, to the style of the usernames, to the color of the text and links. For this reason, the style sheet is probably the most important part of the banner. It is very important that you pick colors and styles that don't hinder anyone's experience on the boards. If you don't feel up to doing this part, don't worry. There are a number of users here who would be happy to complete this step for you. Just head on over to [link=http://boards.theforce.net/fan_design_sites_and_graphics/b10815/30288181/p1/]this thread[/link] when you're graphics are done.

[b]Additional Notes[/b]
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.

Accepted image formats are JPEG, GIF, and PNG. When saving your images, please try to find a balance between image quality and image size (in terms of kilobytes).

[color=darkblue][u][b]What You'll Need[/b][/u][/color] [ul][li][b]A decent Image editing program[/b]
Photoshop is recommended, but there are other programs out there that would work just as well (such as GIMP or GimpShop). I will be using Photoshop for this tutorial.[/li]
[li][b]Notepad, or your favorite HTML editing program[/b]
And HTML editor such as Dreamweaver or CoffeeCup will make things a little easier, but they aren't necessary. I will be using plain ol' Notepad in this tutorial.[/li]
[li][b]Creativity and Patience[/b]
I can't stress these two enough. Have f

 

Note to anyone who has downloaded and used my test files in the past: please download and use the updated files linked in the opening post! Both files have been updated. Most significantly, the stylesheet.css file has been updated with comments for every selector, and some new classes that were not included in the original file. See the stylesheet tutorial for details.

 

I'm not exactly sure what you mean by that. Are you talking about the actual process of creating the banner graphics? If so, there's a Photoshop thread where you can ask questions and get advice in regards to graphic design.

 

I see. Yep, Photoshop tutorials are what you seek.

 

You are very welcome.

Please post here if you have any questions about the tutorial.

 

The easiest way to make the curve is usually to flatten your image (merge all layers), then use the eraser tool to shape the curve. If you choose a large enough brush with the right settings for hardness and flow, it shouldn't be too difficult. (An advanced method of creating the curve would be to use a mask, but that's a more advanced Photoshop technique.)

As far as your question about the size goes, yes, an image that large would be converted to a background image and the bottom of it might be cut off by a few pixels. What I mean by "converted to a background image" is that instead of placing the image onto the page like normal and have it push the rest of the content below it further down the page, it actually becomes part of the background of the page, just like the bottom portion of the banner artwork you see on this page. Notice how the banner image is behind the ad holders and the Google search box at the top of this page? That's because that portion of the graphics is actually a separate background image.

Try this out: Put your mouse pointer to the right of the ad holders and drag it up to the top left corner of the page. See how it selects only the ad holder images and the main banner image? That's because the rest of the graphics are background images that don't actually take up physical space on the page, they just fill in the blank areas. Other content (like the ad holders and the Google search box) will show up on top of those graphics when necessary. On this particular banner in this particular forum, my background/"curve" image is actually 1564x310 (yeah, not really a curve, but I explain this approach a little more in the advanced tutorial). You only see the top portion of it because it's actually behind the forum table as well. Try right-clicking on it and choosing "view background image" to see the whole thing.

So, if your curve image is going to be 250x300 (or anything larger than 90x90), just know that when it's added to the banner, other content may show up on top of it.

 

I've explained how to do it in the Advanced Banner Tutorial. Check it out and let me know if you have any questions.