Our junior designer Jack has been with the Si digital team for almost six months now (how time flies!). During this time he’s been working hard on client projects with four site launches under his belt already! Between projects, Jack has started learning all about animation for his personal development.
We feel it is essential that your working life should not only include day to day tasks, but also the opportunity to develop new skills, so we were more than happy to support Jack as he got stuck into learning all about After Effects, the popular animation application from Adobe. Thanks to Jack’s hard work we now have some fantastic new animations for our website and another great facility for our client work.
Read all about Jack’s experience in his first blog post, below.
Trends come and go, more so when relating to the web, some good – some bad. Last year brought us huge hero images, auto playing video backgrounds and overused parallax scrolling. So what will 2015 bring?
Over the past few months we have noticed a massive influx of 2D animation being brought to the web. If you’ve browsed Dribbble recently it’s likely that you’ve stumbled upon some of the amazing animations that have been posted lately; from subtle mockups to fully fledged motion graphics that look like they’ve been pulled straight from a Pixar movie.
History of Animation
Animation has been a part of the web for a long time, in fact it was a big thing even before the internet existed – evidence of artists depicting motion can be seen in art as early as Palaeolithic cave paintings. It’s easier to get your point across with a series of images or frames rather than a static image, so why are we only now seeing these motion graphics being brought to the web? The truth is we’re not, but technology is constantly advancing and making them easier to create and implement, adding extra personality to our websites.
Back in the early 20th century artists were hand drawing individual frames and compiling them together to create moving pictures. These cutout animation and stop motion techniques were widely used by Disney up until the 1990’s.
As computers became more mainstream and technology advanced, we saw breakthroughs in animation software.
First came Flash, which was good for its time, but soon became outdated. Some people preferred using Photoshop for simpler things, but the same frame-by-frame technique was used, making it a tedious task trying to represent any realistic motion. Then came After Effects, part of the Adobe family – a digital visual effects, motion graphics and compositing application. Although primarily used in the post-production process of filmmaking and television, this powerful piece of software is probably the best out there for creating seamless 2D animations.
We decided to try it out. Although incredibly daunting when first opened, After Effects is fairly simple to understand once you’ve had a play around, just like any other Adobe software. It’s a great feeling playing your animation for the first time, significantly different to finishing off your latest website design, something that everybody can appreciate, not just designers.
There are a plethora of tutorials and resources available on the web for learning how to use After Effects. The one that got us started was Fraser Davidson’s Skillshare tutorial: Simple Character Animation. I should note, Skillshare is an awesome resource for learning anything – from photography to cooking, I recommend you check it out. Fraser’s class teaches you step by step how to animate a walking character like this:
This is what we made:
Yes, that is in fact supposed to be Futurama’s Zoidberg. No, it’s not perfect, in fact far from it – but we thought it was a great start to learn the ins and outs of After Effects, even if it did take a good few days to figure out how to render the project as a transparent GIF. Facepalm ensued, but that’s all a part of the learning curve.
After a few days of experimenting we were feeling confident enough to have a go at animating some of the icons on our website. Although these interactions are subtle, they add an extra layer of personality to the page that a static image just doesn’t deliver, and they’re incredible fun to create and play around with.
Once you understand the basic tools and you’ve wrapped your mind around using keyframes, the rest is simple. We first designed the vector icons in Illustrator, making sure to keep each separate moving asset on its own layer – for example, when designing the clock icon we made sure to keep the hours, minutes and seconds hands separate. This allows us to save the Illustrator file and open it up in After Effects, keeping all the layers in place.
This is where things start getting technical (sort of). Once we brought the file over to After Effects, we made sure everything was aligned properly and ensured the anchor points for each object were centred – an anchor point is the point at which the item rotates around – simple, right?
The next step was to make the clock hands actually rotate. This was simply a case of setting the starting position for each hand 10 frames into the animation (see the first set of circles below), and then setting a finishing position for each one at the end of the composition (see the second set of circles, 100 frames in).
To set a different speed for each hand we adjusted the amount of full circle rotations slightly for each one. For example, the seconds hand has 3 revolutions and then rotates an extra 95°. The minutes hand however only has one revolution, and then rotates a further 210°. This makes the seconds hand move faster from its starting to finishing position compared to the minutes hand.
After exporting the After Effects file over to Photoshop, we saved it out as a looping .gif ready to be displayed on the web. The finished product is a fairly basic, smooth clockface animation ready to drop onto our Careers page.
We proceeded to animate the other icons found on that page which can be seen below. You can probably figure out how we made those too, replacing rotation keyframes with adjusting set positions and opacity. A little bit of motion blur helps make everything look that little bit smoother.
If you’re interested in learning more about animation and want to create your own motion graphics, we’ve compiled a list of tutorials and resources that you might find useful.
- Google’s Material Design Guidelines
- 12 Principles of Animation (Wikipedia)
- Introduction to Adobe After Effects: Getting Started with Motion Graphics by Evan Abrams
- Simple Character Animation by Fraser Davidson
- The Ultimate Guide to Shape Layers in After Effects by Jake Bartlett
- Slick Object Transitions Tutorial by Mt Mograph
- How to Make a Cartoon For Beginners by Ross Plaskow
- Animated Circle Burst Tutorial by PremiumBeat
Plan your project