This article should be used as a resource when customers are creating Photoshop files in-house with the intent to have Cendyn animate them into HTML5 banners. Customers should refer to this document when learning how to setup these files for Cendyn to minimize back and forth and reduce production turnaround times.

Cendyn recommends using HTML5 (animated) banners for upper-funnel tactics or when you need the time and space to introduce a customer to your brand or to evergreen messaging.

General Specifications

• Standard Sizes: 300x250, 728x90, 160x600, 300x600
• Mobile Sizes: 320x50
• Resolution: 72dpi
• Color Profile: RGB
• Application: Using the latest version of Photoshop- CC 2020

File Naming Conventions

Please click here to learn about our naming convention setup preferences

General Layout Tips

• Each PSD file should have artboards for all required sizes. Example: If the client requests banners sizes 160x600, 300x250 and 728x90 the PSD file should have artboard for each of the sizes needed. Please reference the sample PSD here.
• Everything in the PSD should use whole numbers vs decimals so they translate perfectly into html5. Examples: 23.45pts should be either 23pts or 24pts. Example 109.45px should be 109px or 110px.
• Common elements (logos, buttons, border) should be in a common folder above all the other layers/elements on each folder for each size.
• Minimum 1-point rule border around each size. Please note that this cannot be white.
• Each frame of the animation should be in a group within the PSD file in their respective artboard in ascending order of appearance.
• Layer/folder naming conventions should ideally match Cendyn’s preferences as listed in our Setup Preferences article.
• Please do not link images/graphics from your library, cloud, or external folder.
• Please do not use any Photoshop Type Styles like bold, italic, or all caps. Please use the correct cut/weight font and type in the text using caps lock instead.
• End frames should have a clear Call to Action (CTA) in text or as a button. This is optional on prior frames, but recommended.

Logos, Graphics, Shapes & Gradients

• Logos should be SVG smart objects with outlined fonts, and no Photoshop Layer Styles applied. Do all necessary adjustments on the actual Adobe Illustrator SVG file. For example, the Color of Logo
• All shape graphics should aim to be SVGs if they are not created using the Shape Tool in Photoshop. This includes gradients which can be done using the Shape Tool in Photoshop.
• Photoshop Filters and Layer Styles should be used at a minimum as they are not all achievable in HTML5, and usually require exporting the artwork out as a png or jpg, and not able to be SVG vector or live text in html5.

Pixel Images

• Images should use smart objects, and the RGB image should be maximum 3000px by width or height and minimum 1500px width or height @72dpi. This will allow for 2x image exporting and prevent the PSD from being overly cumbersome.
• Please do not composite any elements such as gradients into images. In order to create layered animations, every element needs to be a separate layer and/or smart object.
• Preferably, all image effects/adjustments should be applied to the image within smart object.

Fonts

• We highly recommend the use of either Adobe or Google fonts to ensure the text renders properly.

Animation

• If you prefer a certain animation technique (such as a wide pan or tilt down), please ensure the images in the PSD will work as-is without additional Photoshopping of the image by Cendyn.
• The maximum length of animation is 30 seconds, but Cendyn recommends completing animations in approximately 15 seconds and holding for approximately 15 seconds to ensure the user has time to read the message.
• We recommend 3 steps as the average number of frames. It’s important to keep in mind that longer text blocks take longer to read.

Final Steps

• Clearly label all layers and delete unused layers.
• Create layer comps of each slide for quick reference.
• Please provide a Final PDF of each frame and each size along with the layered Photoshop file.