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

Discussion in 'Fan Design - Sites and Graphics' started by Grimby, Jul 20, 2009.

Moderators: Grimby
  1. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    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.
    A Brief Explanation of the JC Banner
    The JC banner is made up of two distinct pieces: the graphics and the style sheet.

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

    Background Image (Size: 764x110) This is the filler image for the rest of the top. Variations: Must match the height and width of the main image in most cases.

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

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

    Ad Holders (Size: 60x60) These are the images on the left and right sides of the advertisement. (Optional) Variations: Can vary in width and height. These should not be any larger than 80x80.

    Reply Image (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) Variations: Can vary in height and width, but should never be larger than 800x90.

    Style Sheet
    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 this thread when you're graphics are done.

    Additional Notes
    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).

    What You'll Need
    • A decent Image editing program
      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.

    • Notepad, or your favorite HTML editing program
      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.

    • Creativity and Patience
      I can't stress these two enough. Have f
    />
  2. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    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.
  3. darthhelinith Force Ghost

    Member Since:
    Feb 10, 2009
    star 5
    Hooray! Tutorial!


    Now the banner I'm working on might actually work!:D
    Then again, maybe not.
  4. Jedi Gunny Yahtzee Host

    Game Host
    Member Since:
    May 20, 2008
    star 9
    I tried making a banner a while ago, but I got hung up on actually including the images on the banner. Maybe you should link to a tutorial on how to include images for those who don't know how but want to create a banner.
  5. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    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.
  6. Jedi Gunny Yahtzee Host

    Game Host
    Member Since:
    May 20, 2008
    star 9
    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.


    I was referring to this part of the tutorial. I didn't know how to do this, so I couldn't proceed any farther.

  7. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    I see. Yep, Photoshop tutorials are what you seek.
  8. Jedi Gunny Yahtzee Host

    Game Host
    Member Since:
    May 20, 2008
    star 9
    Well, I don't have Photoshop anymore (my trial ended long ago), so I'd have to get it again before trying to make a banner again.
  9. Fallen-Hero ~ Helping Hand of WNU ~

    VIP
    Member Since:
    Sep 5, 2009
    star 4
    Grimby, this tutorial rocks. Thanks so much, I've finally gotten round to trying my hand at this and I never knew how to use the slice tool until now [face_laugh]
  10. Salty Force Ghost

    Member Since:
    Dec 24, 1998
    star 5
    Can't wait to see what you come up with.
  11. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    You are very welcome. :)

    Please post here if you have any questions about the tutorial.
  12. Fallen-Hero ~ Helping Hand of WNU ~

    VIP
    Member Since:
    Sep 5, 2009
    star 4
    To be honest, this whole curve business has always been intimidating me. Primarily due to the fact that I have little knowledge as to how to make it. I presume vectors could be a way to get round to make a smooth curve, yes? Nevertheless, this is a question that most likely would be more fitted to be asked in the Photoshop thread...

    What I'd like to know though is, if for example a 'curve' is 98x70 it would be considered larger than 90x90 and so it would be converted to a background image yes? I got a basic understanding of html and stylesheets, but I was wondering, would it effect the way it currently appears when using the downloaded testpage? I'm lead to believe it wouldn't but that whole 'background' issue is confusing me, lol.
  13. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    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.
  14. Fallen-Hero ~ Helping Hand of WNU ~

    VIP
    Member Since:
    Sep 5, 2009
    star 4
    I did sneak a peak in the Advanced Banner tutorials and realized what you meant about the whole background thing with your Mara Jade from Sacrifice example. Thanks for the explanation, now it makes sense to me. There's a bunch of things I've discovered while messing around with the controls and tools on Photoshop, that some things just aren't named yet to be. By 'using a mask' I'm correct in assuming you're talking about that white blank that adds itself beside the layer and you either paint black (where it erases the content on the picture) or white (where it brings back the picture)? Kind of like the 'safe eraser'.
  15. SuperWatto Manager Emeritus

    Member Since:
    Sep 19, 2000
    star 5
    Hey folks,

    I made a banner for the Senate last year, and now I want to make a new one. I've seen that many boards now boast a bigger background. The big background image is not included in the tutorial, though. I think.

    Anybody know how I can inlude it in my banner design?
  16. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
  17. SuperWatto Manager Emeritus

    Member Since:
    Sep 19, 2000
    star 5
    Cool, thanks very much!
Moderators: Grimby