My Role: Updating Animated Images into Static Advertisements for Multi-Resolution Display
Animated GIFs to Static PNGs
The Proposal:
• We would need to incorporate all 3 callouts to the static version - keeping the Honest logo. From there we will add the Amazon logo and in variation 2 the Amazon logo will be replaced with the "Shop Now" cta.
1. Make the Amazon logo white and place it at the bottom of the frame
2. Make the Shop Now white and place it at the bottom of the frame
• Keep images under 200KB
1. Make the Amazon logo white and place it at the bottom of the frame
2. Make the Shop Now white and place it at the bottom of the frame
• Keep images under 200KB
This layout was the rubric used to follow advertisement guidelines for the DSP images.
Photoshop & Animate
All GIFs were brought into Animate to breakdown the entire animation sequence, there I could export individual frames for reworking. The priority here was being able to layer and manipulate text boxes, logos, and artwork flawlessly atop the original static image. From there, I could lay all the information down simultaneously on one image so that the animation was no longer needed.
Static Image with added Artwork
Original Animated GIF
File sizes are important to these advertisements, as each image was to be less than or equal to 200KB, while retaining its new PNG format. This is where the amount of image quality had to be sacrificed to meet our goal.
1. The largest image size, 1940x500, became tricky to keep a small file. These have a maximum of 13 colors (png) and are borderline 187kb.
2. To keep the image color: another format, such as a Jpeg, would be able to compress and retain the dimensions, quality, and colors below 200kb.
The Full Set of Static Images
After the retouching was complete, a full set of static images remain that contained all prior animated information into one single image. In total, 14 variations were created.
