The draw feature image is used on both the home page feature banner’ and the lottery prize details page. Due to the responsive nature of the website, the image needs to be built with a specific safe area in mind. Please refer to the PSD attached for a template on how to safely set up the image composition to optimise for all viewport sizes.
On desktop & tablet, the draw feature image is rendered at a fixed height of 495px, centrally cropped. This area is represented in the template as the ‘safe area’. It is recommended to contain all critical information in this area to minimize unwanted cropping. The app & mobile experience will render the image at its full aspect ratio, 1170x780px.
Home page – eg: materlotteries.com.au
The ‘feature banner’ on the home page is used to advertise ‘hero’ draws. Because this banner is responsive across all viewports, certain screens may encounter small amounts of cropping. To counter this, it’s recommended to keep the image as simple as possible and abide by the safe areas set in the template provided. The banner is programmed to try and span 100% of width and height.
Photoshop Template Instructions
The accompanying draw feature image PSD template is saved out at the required dimensions (1170×780). To use the PSD template follow the steps below…
1. Place New Image Into The Template
Click File > Place Linked or Embedded
2. Select Image
Navigate to your image > Click on image > Select ‘Place’
3. Optimize Image In The Safe Area & Turn Off Guideline Template Layers (In Red)
Turn rulers on > Position image centrally to ensure it works responsively > Hide template layers
4. Save Image For Web
Click File > Export > Save for web (make sure quality is somewhere around 75 to reduce file size)
A number of collage templates have been provided in the PSD template if you wanted to show more than one image.
Home Page
An example of how the draw feature image is rendered on the home page ‘feature banner’ – the aspect ratio is 100% width and height.
An example of how the draw feature image is rendered on the home page ‘feature banner’ – notice how the image tries to span 100% of width and height. However, it inevitably comes down to the viewport width and the ‘draw title’ length – the longer the draw title, the more height needed to display the title. In the example above, you can see that the title spans 4 lines, adding more vertical height to the banner.
Prize Details
An example of how the draw feature image is rendered on mobile (web) and app – the aspect ratio is 100% width and height.
An example of how the draw feature image is rendered on desktop – notice how the image is cropped centrally with a max image height of 495px. The content sitting outside of the safe area has been completely cropped.