The good old animated gif has come a long way! Now the once ugly duckling of animation has become a show stopper and art form in itself.
Described as the grown-up version of the animated gif, Cinemagraphs – a term coined by the US photographers Kevin Burg and Jamie Beck – are fast becoming the new black of animation in digital. With Flash gone, dead and buried we had to go somewhere!
So what is a cinemagraph?
Cinemagraphs are more than just a fancy animated gif. I've heard them described as a number of things:
A living moment in an otherwise still photograph.A moving photo. They exist between video and stills.It’s somewhere between a photo and a video, a piece of artwork that seeks to perfectly capture a fleeting moment in time.Still photographs in which a minor and repeated movement occurs, forming a video clip. They are published as an animated GIF or in other video formats, and can give the illusion that the viewer is watching an animation.
Cinemagraphs convey feeling and mood. If you look at any of the work from their creators, who are absolute legends, you'll see each piece has a story.
Like this one: Cinemagraph from Cinemagraphs.com
Everything is still except for the flames in the fire, and if you look closely, there is a tiny flickering reflection in the saucer of the teacup.
You truly must check out their cinemagraph website and to read a little more about them their company website.
How are they made? (You can make them too!)
People like Kevin Burg and Jamie Beck put love, sweat and tears into the making of their cinemagraphs – this is evident in the quality of their work. Each frame of the animated gif is clearly thought out. And because cinemagraphs are, in fact, a loop – with the beginning matching the end – they've spent the time to ensure these are perfect.
There are quite a number of amazing apps out there to build them, but my favourite is a cheap little photoshop plugin.
It's down and dirty, simple to use and will get you quite a nice result like in this example I've created below. I think we spent more time getting the props right than we did creating the cinemagraph.
Or if you really want to get into the nuts and bolts check out this great (and quite entertaining) tutorial from Phlearn.
Uses for cinemagraphs
I've seen cinemagraphs used in websites to create drama and advertising, from campaign banners to microsites. I think one of the best uses for the humble animated gif is in email campaigns. Email clients (the piece of software the end user uses to read their emails) are notorious for being archaic when it comes to them accepting anything but good old html (and basic html at that!).
After all these years, we still can't reliably insert a video to play within an email and know that it will work 100 per cent of the time. But what all email clients can do is display a gif. So the cinemagraph has given some class to the animated gif and people like the folks at Twitter are using these to create impressive, eye-catching and I wanna click on what you're selling me email campaigns.
Tips and tricks
Just because you can doesn't mean you should! Even though you can output some crazy, crazy big files, when you are producing animated gifs it's best if you still compress as much as possible. You can limit file size by making them dimensionally smaller, keeping the animation to a small area and optimising for output either via the photoshop save for web palette or a great little tool like ImageOptim.
Locked off camera view
Get a tripod or have an incredibly steady hand. Cinemagraphs need to have a locked off view, so the movement is part of the subject matter rather than the whole frame of the image.
Remember cinemagraphs are a looping movement so make sure you pick a piece of video or create an effect that can be looped. The first frame and the end frame need to match otherwise you end up with the jitters. Take a look below at one of our attempts; my hand just couldn't quite get back to the original spot.
Subtlety is actually the key. Most cinemagraphs have movement that is subtle – pay attention to the smaller details like shadows that are cast, as in the example of the fireplace above.
Cinemagraphs are stunning, easy to produce with a few tips, tricks and know-how. Why not have a go?
Strategising your website is about getting into the nitty gritty of not just what a website looks and functions like, but who it is targeting, how they will find their way to the website, and make their way through all of the great content you have.
If you think you don’t need to worry about Google because you’ve got all your info on your website, think again. There are a lot of people out there who will Google your business and never visit your website.
ScreenFlow is screencasting and video editing software for the Mac, and it adds a sheen of professionalism to any dreary old presentation. We use ScreenFlow to record our computer screens or iOS devices and the audio from our microphone headsets.
People who come to your website expect good web copy, and it’s important you give them at least that. But amazing web copy can win new customers, and convert existing customers into raving fans. And it’s not as hard as you might think.
Data science is a fancy schmancy term for grabbing stats and data and reviewing it all to gain insights or knowledge. Data helps us understand more about our customers and potential customers so we can customise our marketing to them.