Boost your website engagement with cinemagraphs

If you’ve never come across cinemagraphs, you are in for a treat. Cinemagraphs are images where subtle details are animated in a loop, creating an engaging visual. Initially coined by American photographers Kevin Burg and Jamie Beck , it has now taken a life of its own. So today we want to show you how you can create your own cinemagraphs.

What makes a good cinemagraph?

After scouring the web, there are a few common factors we noticed that separate great cinemagraphs from the rest.

  1. The subtle over the dramatic: many of these cinemagraphs just have movement in subtle details that keep the main subjects frozen in time
  2. Actions without reactions: another common trait we’ve found is that by having an action animate but not the reaction somewhats tricks the brain and makes the visual much more engaging. An example is like the below where the newspaper moving in the wind, but the subject not adjusting.
  3. Use a few elements, not many: When too many things in the cinemagraph moves, it starts to feel like a video. Sometimes, less really is more!

What you will be needing

  1. A camera or your smartphone to take a video
  2. A tripod or a way to stabilize the video
  3. Photoshop or an app such as Flixel (iOS/macOS only)

Creating cinemagraphs

Arguably, the most important step is shooting the source video, whose success depends on several key factors which can make or break your cinemagraph. Firstly, it is nearly impossible to correct for a shaky camera so be sure that you use a tripod or support to keep the video stable. Next, it is almost certainly a good idea to plan the shot before actually taking it. Unlike photography, there are many more factors to just rely on serendipity and a good eye at the time of the shoot. Fortunately, all you need are a few precious seconds of good footage and you’re off to the races. After that, there are some really easy to follow tutorials online. Here’s one for Photoshop, and here are Flixel’s official tutorials.