Bike the Bay: the animations

Bike the Bay, a virtual bike ride around the shores of Corio Bay, near Geelong in Victoria, Australia, contains a number of animated gifs. These were created from multiple images, with transition frames, and put together in Adobe Photoshop.

The Point Henry gif has two main images, a daytime view and a night view. There are 14 transition frames. The transition frames are composites of the two images, created by progressive erasure of one layer over another, then merging layers to make a new frame. The animation moves from day to night and back across the transition layers.

The Eastern Beach old photograph – new photograph merge is created with 10 transparency frames, added using the ‘Tween’ button in the Animation bar of Photoshop CS5.

The Eastern Beach Day-Night transitions were created with ten glitch layers, the glitch layers were produced with an online glitch generator http://snorpey.github.io/jpg-glitch/ created by German multimedia designer Georg Fischer. The coffee cup animation had several stages. First, two photographs of the coffee cup on an outside table at The Edge restaurant were taken, one focused on the coffee cup, one focused on the background. These were then processed in Adobe Camera Raw, and merged to a single frame in Photoshop CS5. A copy frame was made, with the start of the steam painted on, using the paint tool in Photoshop. This process was repeated, with use of both the paint tool and the eraser, to create seven layers in total. The frames are played with a duration of 0.2 seconds. The transitions between the day and night images for Westfield Flyover are blurrings of the main images created by resizing the images to very low resolution, and resampled Bicubic Smoother. There are 2 transition frames for each of day and night. The skate park/Cunningham pier gif has six transition images, three each for day and night. The progressive pixelation of the transition images was produced by progressively resizing the images to a lower resolution, and resampling as Nearest Neighbour to preserve the hard edges.

The cyclist animation was drawn using Illustrator. Three frames were created with spokes and legs in different positions. Each frame in the animation has a duration of 0.2 seconds.