bclc.com templates guide. Don’t worry, we’ll still take your call.
This document is continually growing, so make sure to check back.
A dynamic graphic you only have to make once.
960x540
720x405
192x108
Sometimes. On bclc.com we try to reuse graphics as much as possible which is why graphics are dynamically resized. Once you make a graphic at 960x540 it can be reused on other pages.
3
bclc.com homepage carousel 960x540
bclc.com home feature carousel TEMPLATE NAME:
home-carousel.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 25K
192x108
bclc.com home tile TEMPLATE NAME:
bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K
4
bclc.com homepage carousel
The homepage carousel has a few items you need to remember when designing an effective graphic.
cta buttons Learn More
Call To Action (CTA) buttons are placed on top of your graphic by the web team. If need be you can build a faux button on your graphic but this is a rare acception. Just make sure the button has rounded corners.
Effective design where the button and controls are in proper areas.
Effective design where the button and controls are in proper areas.
Carousel controls are placed over top of the graphic by the web team. Be sure your graphic has a darker background to they are visible.
As you can see by this example the button is in an odd spot while the controls overlap important information. Be sure to request to your designer there will be a button overlayed on top so they can design around this parameter.
5
Homepage tiles 224x126
megamenu tile TEMPLATE NAME:
bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K
212x119
home tile TEMPLATE NAME:
bclc-home-tile.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K
6
Winners tiles 2
480x134
240x134
winners tile
COLUMN TEMPLATE NAME:
winners_1col_720x134.psd 720x134
1
COLUMN
240x134
3
COLUMN
When saving out the 3 column tiles you want to create one continuous image across 720x134 then slice the image out.
7
SAVE FOR WEB AS JPEG MAX. FILE SIZE 20K
Lotto! product pages
The 3 column carousel is used throughout your pages and the size is only 720x405. It gets better, if you are using this graphic across the site it can be resized dynamically. Yah!
720x405
Lotto carousel TEMPLATE NAME:
lotto-3-col-carousel.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 45K
8
Corporate homepage
Corporate home TEMPLATE NAME:
corp-home.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 80K Live type is placed on top of graphic to the right and the Find out more> button is placed at the end by the web team.
Promo tile TEMPLATE NAME:
promo-template.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 12K
9
Corporate “who we are” page
Corporate three panel Rounded corner on the bottom left. TEMPLATE NAME:
3-up-feature-singlerounded.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 50K
Regular square template TEMPLATE NAME:
3-up-feature-single.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 50K You might be making two of these for when all 3 are in place they all coincide with each other.
Example of copy placed by the web team.
Our Vision, Mission & Values Bringing fun to the fore in a responsible way. That’s what we do for you and for all British Columbians. Here’s our story>
10
Corporate careers page
960x540
Corporate careers carousel TEMPLATE NAME:
host-local-gov.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE ?????K This template has a bottom left rounded corner. Live type can be applied by the web team. As you can see it is on the right side of the carousel which is left aligned. Below is an area where you can place a video for viewing.
11
GameSense page
960x540
GameSense feature TEMPLATE NAME:
gamesense-2-col-feature.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 150K This template has a bottom left rounded corner. Live type can be applied by the web team. As you can see it is on the right side of the carousel which is left aligned. Below is an area where you can place a video for viewing.
12
Social media twitter LIVE AREA
Twitter header TEMPLATE NAME
twitter-1500x500.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 150K
Twitter profile TEMPLATE NAME
twitterprofile-400x400.psd SAVE FOR WEB AS JPEG MAX. FILE SIZE 80
13
This book was created by the creative department at BCLC.
bclctempbook-JUN15-2015
Any questions please contact Chris Scott or Chris Biggar
14