The Beautiful, Charming and Sophisticated Banner
A guide for designers on creating one.
Before we jump in...
Who am I?
Boring Stuff First
"examples and best practices"
"guidance for self regulatory program of Online Behavioral Advertising"
The creation and life of...
Media Team or Client buys a location
for the ad to run on a publisher a.k.a website.
Creative team designs a concept and produces PSD(s)
that guide the development team.
Development or production team builds the concept.
Ad serving team (AdOps) trafficks the unit.
Either the Client or AdOps collect the data points and
then create a report for stakeholders.
This proves how successful the banner was.
Considerations
PSD STANDARDS
Here are some guidelines.
-
Add layer comps to guide animation
- Resolution should be 72 dpi
- Make the PSD match the final ad dimensions
- Maximum of 3 images in 40k standard media
- Minimize points in vector objects
- Vector graphics should be imported as smart objects
- Stay away from layer and text effects as much as possible. Most do not translate over to Flash.
Layer Comps
This is a newer feature of Photoshop, but is really helpful for showing how the animation of the banners need to flow.
Reminder: Do not forget to update the layer comp when items are changed in the layers.
Image Resolution (dpi)
A common technique when building PSDs for print, is to make the PSD a high resolution (300dpi). This way when it is printed, it will be the best quality. However, most monitors only display 72dpi. So for banners this resolution is not necessary.
Tip: Make sure that the PSD image resolution is set to 72 dpi.
Number of Images
Although there is not a perfect equation (because all creative is different), there are a few ways to figure out the maximum number of images that can be used in the ad to meet the spec.
A couple tips: Save the images for web at medium quality to get an idea of size. And take into consideration the fonts and Flash code by adding 15k to the total images file size. This will give you a good idea of the final banner file size.
Animation Length
The IAB spec for standard ads is 15 seconds, but rich media time limits can vary. Review the layer comps and ensure that when building the PSD, you take the publisher time limit into consideration.
Fonts
Fonts often times cause problems when switching from PC to Mac. There are other problems when multiple packages are available of the same font.
Be awesome.
Make sure that the font package(s) do not contain any corrupt fonts and include them with the PSD when delivering.
Type Settings & Effect
Custom type settings and dynamic text do not mix. So banners that are built to consume XML text will not display these settings. As for effects, type that contains complex effects have to be imported as images in to Flash.
A couple tips: When building rich media ads that consume XML, use kerning and leading settings in moderation. And stay away from type effects that are not available in Flash e.g. strokes around type.
Layer Effects & Filters
In general, it is best to stay away from layer and filter effects.
Layer effects available in Flash are darken, multiply, lighten, screen, overlay, hard light, add, subtract, and difference. Filters available in Flash are drop shadow, blur, glow, and bevel (includes inner or outer bevel, but none of the more complex ones).
Note: Some effects are not a 1 to 1 with Photoshop. Do your testing.
Aliasing
Flash only has 2 anti-aliasing options. So when the PSD type is set to "strong" anti-aliasing, this will not translate to the final Flash banner. The same goes for “crisp" and “sharp”.
Tip: It is best to stick with “smooth" if you want an accurate representation of what it will look like in the banner.
PSD File Size
The PSD comp for a banner ad should be less than 75mb.
Tips:
Remove unused layers and images, merge layers and make sure that the file is 72dpi.
Other Things To Note
Flash is primarily a 2D media, so be cautious of timelines when introducing 3D elements. When building for standard media ads, 3D effects such as flipping have to be faked and are not optimal. There are 3D frameworks that can be used, but these require a certain amount of time to implement. Discuss timing with a Production or Project Manager.
The Beautiful, Charming and Sophisticated Banner
By Rob Sawyer
The Beautiful, Charming and Sophisticated Banner
This is an overview of what should be considered by a creative team member that is producing a banner ad.
