February 23, 2013
Remember the ’90s animated gif? You can’t miss the Tumblr blogs resuscitating the looped graphic format with infinite scrolling pages of motion clips. And cinemagraphs, selectively animating only a sliver of a photograph, have elevated the technique to an eerily stylish moving image. Recently, illustrators have gotten into the act using gif frame animation to morph the static sketch with motion elements to give their compositions some movement and wit.
Over the past few years, Adobe has published prereleases of a new app named Edge Animate, an open standards web graphic animation tool for modern browsers. Giving HTML, JavaScript, and CSS a visual interface, designers and artists can now animate their web graphics without plotting the code. Reminiscent of Flash, Edge will import graphics and place them on its stage.
The simple to use timeline with keyframe and transition features will get your images and illustrations moving. Behaviors can be simply applied to elements and perform some actions. But very different from Flash, Edge Animate uses and saves open source standards that doesn’t require a browser plugin and can be played or viewed from desktop to mobile.
The original portrait drawn in Illustrator CS6, capitalizes on AI’s gestural brush strokes and variable lines for a hand sketch effect. Choosing the different elements that I planned to animate, I saved each asset as a separate PNG. Importing the individual files into Edge, they’re ready to play on the stage.
Click or tap on the orange moths and they should float and fly back demonstrating Edge’s behaviors and actions. With some simple preloaded scripts, sequences can be easily looped or stopped and started at specific times.
For this post, I’m using the new Edge Animate WordPress plugin, Edge Suite, to display the animation. Edge Animate offers the option to save the HTML page with its assets or packaged together as an AOM file to be placed into Adobe’s web design apps such as Dreamweaver or Muse. The Edge Suite plugin uploads the AOM file and with shortcode can be placed in posts or in WordPress templates. There are responsive capabilities within Edge and depending on the design can adjust to the viewers screen size. This fashion portrait is best viewed on desktop or tablet but may appear clipped on the iPhone.
Tags: Digital Art, digital tools, Illustration, Inspiration
© 2024 Digital Design Therapy
Wonderful work! I love it.
Geoff, let’s talk about getting someone to teach this for a course in CE! Maybe it’s already there, but would like to offer specifically for fashion illustration.
melinda
love it!