Hero Graphic

Introduction

As an intergral part of your web presence, hero graphics offer the opportunity for unique, creative representation of your organization.  There are two types:

• Static
  A static hero graphic is simply a still banner that's formatted specifically to occupy the hero graphic area.  It should be a common web graphic format; the kind you'd normally add to your site as an image , such as a JPEG or PNG.
• Flash
  A Flash hero is an animated, or otherwise interactive banner that can contain hyperlinks and likewise be configured according to your needs. As the name suggests, it's an Adobe Flash movie  (.SWF)—not to be confused with Flash video (.FLV).

Dimensions

Static Hero Requirements

A static hero graphic must be 1500 pixels wide by 176 pixels high.

Warning: If a hero graphic is not exactly 1500x176 pixels, it will fail to fill the entire area, and may repeat horizontally.

Flash Hero Requirements

A Flash hero is actually comprised of two pieces that, when present together, enable Flash to function properly:

1. A Flash movie (.SWF file)
   The Flash file itself should be 600 pixels wide by 176 pixels high. When sized correctly, it will automatically position left-aligned inside of the hero graphic area, filling the first 600 pixels. Flash movies wider than 600 pixels cause the content well to stretch, and makes the other columns shrink.
2. A static background image (.JPG or .PNG file)
   This background image exists to fill the remaining space behind the Flash file, creating the illusion of one continuous graphic. For this reason, it must be 1500 pixels wide by 176 pixels high, just like any other static hero.

What's Seen

(Click to enlarge)

One Size Fits All

To recap, a static hero, or background graphic for a separate Flash hero, must be 1500 pixels wide by 176 pixels high. This allows users with high-resolution displays to expand the browser wide enough to fill most of their screen, and not run out of image.  (Try this with the hero above by resizing your browser window now.)

Supporting Small Screens

You should design your hero so that the focal area can be seen at the smallest supported desktop screen resolution, 1024x768 pixels.  You must also keep in mind that any page which shows a hero graphic will be either a three or two-column layout:

• Three-Column Layout
  If portlets are present on the right, you have the first 650 pixels from the left to work with, regarding what you want all users to see.  Anything to the right of this 650 pixel line will be cut off in a smallest-screen scenario. 

• Two-Column Layout
  If you're certain that no portlets will be visible on the right, you have the first 830 pixels from the left to work with, regarding what you want all users to see.

Text should be contained within the first 630 pixels from the left of your hero graphic, to be visible to all users and have sufficient breathing room.  (650 simply denotes the point at which the third column (containing portlets) starts on 1024x768 screens.)

Fonts

These are accceptable typefaces, in order of preference. Don't mix within a graphic:

1. Gills Sans
2. Lucida Grande
3. Verdana
4. Trebuchet

Sizes

Characters within the range of 10pts–30pts are acceptable. You can use varying character sizes as you see fit.

Styling

• Regular, normal-weight text is preferred. Bolding, italics, and caps should be used sparingly.
• Do not increase letterspacing so that large gaps appear between the characters, or decrease letterspacing so that characters overlap.
• Do not skew, stretch, or distort the text.
• Taglines and quotes should end with a period.
• Quotes should be contained within quotation marks.
• Try to keep styling such as dropshadows to a minimum. If one is desired, we suggest an opacity of 35% or less for a black shadow.

[top] 

Colors

Custom Colors

When choosing color for backgrounds, text, and other elements, we suggest using the eyedropper tool (in Photoshop) to pick color from the photo in your graphic.  Colors that are already part of an image won't clash with the image itself. 

(Click to see all of this example.)

Be mindful of saturation; you don't want colors so strong that they overpower your site (e.g. hot pink, neon green, etc).

"Site Blue"

While you don't have to use it, the hex value for the predominant blue used in the SOM web site is #336699.

[top]

Photographs

Guidelines

• Be sure to have appropriate permissions for the use of photos, particularly the permission of individuals who are easily recognizable in the images.
• Don't skew, stretch, or otherwise distort proportions in images.

Where to Find Photos

• Hero Graphic Image Library
  A variety of medical school and health affairs photos.
• Images of Carolina
  Main campus photo site.

[top]

Publishing Hero Graphics

Static Hero Requirements

None other than the above.

Flash Hero Requirements

In order for a background image to be shown for a flash movie, it must have the same title as the flash file.

Example: Flash is named 'hero_flash'. The background image must be named 'hero_flash'. Very important: this is the title—the "Title" field on the upload form—not the file name.

This naming convention is very important, as it does two things:

1. Prevents the background image from being shown as a stand-alone banner.

2. Allows the image to be shown as a background image for its companion flash.

Where to Place the File(s)

For the Entire Site

1. Go the the root (home) directory of your site and add a folder named "banners" (excluding quotes), if one doesn't already exist there.
2. While viewing the contents of the banners folder, use the Add Item command to upload a finished hero graphic (or a finished Flash movie and it's related background graphic, giving both the same title).
3. Publish the uploaded item(s).

The heroes will now appear on any pages you select to display them, because the folders in your site inherit hero graphics from parent folders.

For Specific Folders

1. Go the the folder you want to show unique heroes in, and add a folder named "banners" there (excluding quotes), if one doesn't already exist.
2. While viewing the contents of the banners folder, use the Add Item command to upload a finished hero graphic (or a finished Flash movie and it's related background graphic, giving both the same title).
3. Publish the uploaded item(s).

The resultant hero graphic will only be available to that folder and any folders it contains.

[top]

Hero Graphic Rotation

By placing multiple heroes within a folder, you utilize an automatic function of your site, which is to randomly rotate the actual hero displayed.  All banner files in the "banners" directory and sub-directories are pulled randomly and added to the system's list of possible banners to show, as long as they are not in private state. So, this means that it's possible for a static hero graphic to be shown at random, and then, upon refreshing, a flash hero.

[top]