bclc.com templates guide. Don’t worry, we’ll still take your call.
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
Effective design where the button and controls are in proper areas.
The homepage carousel has a few items you need to remember when designing an effective graphic.
Effective design where the button and controls are in proper areas.
Learn More
A button might be placed over the graphics by the web team. Be sure to request this in your job request.
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 home page
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
gamense 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
notes
13
14