H5 tools site

Design

PSD Creative Guide

Download PDF | Download Sample PSD

Sample Storyboard

Download PDF | View the final banner

Generator Plugin for Adobe Photoshop CC

Generator allows you to create image assets in real time as you work.

Generator allows you to create image assets in real time as you work. Add a file extension to the name of your layer or layer group, and Photoshop will automatically export the asset into an image subfolder. If you make a change to that layer, the exported file is immediately updated.

To turn on this functionality, go to

File > Generate > Image Assets
Now all you have to do is rename the layers or layer groups with the appropriate file format extensions .jpg, .png, or .gif .

In order to save out an image with a matte to preserve placement, select the entire canvas, and apply a mask to the layer. The generated image will be the dimensions of the banner, with the image content appropriately placed.

Photoshop generates the image assets and saves them in a subfolder alongside the source PSD file.

Only files needed for development should have appropriate file format extensions. Extra layers not needed for development should not have file extensions.

Headline_1.png, Headline_2.png, cta.png Use exact naming conventions based on the DOM of the master.

Retaining image quality

Smart objects and vectors should be used to retain image quality. Logos and CTA should be vector smart objects. The hero image is a large smart object. In generator you can save up files sizes to larger sizes. For Retina using the supported tag 200% logo-retina.png, logo.png produces both a 2x and a 1x asset.

In order to maintain the original canvas size and element’s position within the canvas space add a vector mask (to the canvas size) on the layer.

Dynamic Banners

Dynamic banenrs allow an advertiser to create one PSD and one code base, that can be trafficked once, and have dynamic content. For example, an ad can have various retailer branding, and can be updated easily from a spreadsheet without the need for a new development cycle or having to re-traffic tags. Below is an example oh how to setup PSDs for dynamic content.

Below is an exmaple of how a storyboard can look for a dynamic banner. Note how tha areas are marked with which elements should be dynamic.