Hero Banner Design Guide
Download the Western Hero Banner Guide (PSD, 135MB). Requires Photoshop CS6 or greater to open.
File Setup
The working file is made up of four layer groups:
- "Guides (Hide Me)"
- "Text Box Guides (Hide Me)"
- "Your Banner Elements"
- "Textures"
And one background layer:
- "White Background"
"Guides" Layer Group
The "Guides" layer group contains the overlay elements that include the dashed line and "3rd" marker. It is intended to act as a placement guide and not be published when the banner is exported. Hide this folder when publishing the final product so the dashed lines don't appear over the banner in the final product.
The guides layer group contains two sub-folders:
- "Left 3rd Guideline"
- "Right 3rd Guideline"
The folders contain layers with:
- Left and right yellow, vertical dashed lines
- Black boxes with "3rd" written on them
"Text Box Guides (Hide Me)" Layer Groups
The "Text Box Guides (Hide Me)" layer groups contains purple headshot outlines and layers showing pink placement text boxes. The group contains the following sub-folders:
- "Right Box"
- "Left Box"
- "Centre Box"
By default, the "Right Box" folder is displayed when you open the file. The "Left Box" and "Right Box" folders can be revealed and hidden as needed by clicking the eye icon next to each in the Layers palette.
The newest version of the Western web template allows Cascade to place text over the banner image instead of having to add it to the image itself. This ensures it remais selectable and accessible. Whenever possible, the preferences is to use Cascade's text overlay rather than embedding text in a banner image. In the Hero Banner guide file, the pink text boxes are included to show where Cascade would be place those text boxes on the right, left, and centre.
The "Centre Box" banner doesn't show a headshot as it is intended for a full-width image that doesn't focus on one specific image or headshot. The example used shows a large image of Jupiter and how Cascade would place text over it.
Note: hide this folder when publishing the final product so the pink text boxes and purple headshots don't appear over the final banner.
"Your Banner Elements" Layer Group"
The purpose of this folder is to contain the designer's working assets to help keep the file organized. Upon opening the file this folder is empty.
"Textures" Layer Group
This layer group contains the following layers:
- "Purple Overlay"
- "River"
- "River Washed Out"
- "Brick"
- "Brick, Washed Out"
- "Wall"
- "Wall, Washed Out"
- "Cherry Tree, Washed Out"
Purple Overlay is a colour overlay intended to add a purple value to the backgrounds provided in the Textures layer group if required.
River shows Medway Creek and can be used as a background element behind a clipped headshot or element.
River, Washed Out shows Medway Creek only lighter to make the foreground element stand out better from the background.
Brick shows a close up of a brick wall on campus.
Brick, Washed Out shows a close up brick wall on campus only lighter to make the foreground element stand out better from the background.
Wall shows a brick wall on campus.
Wall, Washed Out shows a brick wall on campus only lighter to make the foreground element stand out better better from the background.
Cherry Tree, Washed Out shows a cherry tree in bloom only lighter to make the foreground element stand out better from the background.
Once you get your image how you want it, choose File > Save for Web. In the top right of the save dialog choose JPEG and change the quality to 80%. In the following screenshots by lowering the image quality by 20%, Photoshop has reduced the overall file size by half.
Image saved at 100% quality: 820KB
Image saved at 80% quality: 428KB
