Animated banners

The animated advertising banner is shown here for Weight Watchers during my eight years at BMF Advertising. This banner was my introduction to Flash, which is now called Adobe Animate. Adobe Animate is an excellent platform for creating compelling motion graphics at high resolution and relatively small file size. Most of these animated banners were required to load super fast. The file size needed to be under 40k back when the internet was relatively slow to achieve that internet speed. Vector animation is a lot more efficient than similar mp4s, requiring up to 100 times that size.

In the past, this type of animation was played using Flash Player, but google Chrome no longer supports this technology Chrome. The introduction of html5 allows this banner to play in a new format. By uploading the javascript, an image folder, and HTML code straight into the back end of the website the file size is kept quite small compared to a gif or mp4. It’s a more complicated upload for the web d, and a more secure method than the old flash player shat required by the end-user. The benefit of using this method is that you can achieve complex animations with a fast upload speed.

Extreme nouns gif animation

Two frame gif animation

Animating images in Photoshop?

Animation can be created within a dedicated animation program like Adobe Animate, or in this example, I’ve used Photoshop.

The two hand positions shown here were rendered from two angles in a 3D program called Poser. Poser enabled me to light the image in 3D and get the realism I was after. The rest of the image was made in Illustrator and finished off in Photoshop.

Within the PSD layers pallet, I’ve created two folders that contain variations of the same image. Each variation is turned on and off in a timeline to complete the GIF, which loops over 2 seconds.

Adobe Animate

An Animated logo

This animation is an example of an animated GIF created from Animate CC – formally Flash. The file size is relatively small, sharp, and loads quite well. The first stage of the animation is making the logo or at least separating the parts that need to move. The vector elements are imported into Adobe Animate and move within multiple timeline layers within the program.

Choosing a format for your animations

Depending on the assets within the original animation, you can choose to render the file in a responsive HTML5 format which includes two sets of code and a linked image folder, a GIF image to upload to your site directly or as an MP4. The form chosen will determine the file size and whether it is appropriate for your use on your website. For vector art and simple tweens, HTML 5 would is excellent, but for image-heavy animations with photographs, a GIF may work better. Longer animations can be rendered as a movie, and an upload to YouTube can make that work.

Need an animator for your next project?

Contact Stuart Flynn – 0414 595 393

Sunshine Coast Logo animator - Bodhi

Pin It on Pinterest

Share This