Most of the image assets in the application are contained in sprites. A sprite is a single image file that contains multiple background images used in CSS. We use three different sprites for the broadband video application. 'sprite' is used for for menu buttons and icons. 'corners' is used for the top and bottom corners of the boxes. And 'backgrounds' contains the box backgrounds which will tile vertically. Each sprite PSD contains a layer with information saying what part of the site the image belongs to, and what CSS style uses that part of the image (in case you need to change the CSS height or width). You are free to edit the sprite as much as you want, but the further you stray from the default image sizes and postition, the more changes you'll have to make to the CSS and the more bugs you may have to fix.
There are some images that can't, or shouldn't, be added to the sprites. These include the logo, main background image and loading image and default thumbnail icons.
The design team should download the PSD below, and use it to create the following images for the development team:
Tip: Automatically translate images
When you change the path of the tout image in the "home" template, notice we have the variable {$$lang}. This variable is the two letter code of the language for the current URL. If you name your custom images to end with a dash and the two letter code ('en','fr','es', etc), the images will change automatically. For example, you could use http://assets.newspark.ca/214/images/tout_{$$lang}.png which would render http://assets.newspark.ca/214/images/tout_en.png in the template of an English website.
