Cinemagraphs | Unleashed Technologies
Loading...

In my search of cool visual techniques for enhancing the user experience of websites, I came across the phenomenon that is the cinemagraph. With the massive influence that video implementation on the web is having with background videos and embedded video, it’s clear that animation is a huge attention-grabber and will resonate with site visitors. The cinemagraph takes a video and presents it in a way that makes it appear like a still photo that is moving. Even the most subtle of movements in a seemingly frozen scene of a photograph can be mind-blowing and this effect does just that.

via GIPHY

A cinemagraph is essentially an animated GIF that takes a short video segment and displays it on a continuous loop with part of the image animated in a seamless and infinite motion while the rest of the image remains still. It’s a mesmerizing effect that makes a seemingly normal image come to life, much like the newspapers and paintings in the second highest grossing film series, Harry Potter.

The overview of the process consists of:

  1. Recording a video you want to have as your cinemagraph.
  2. Trimming the video down to the range of frames that you want to be displayed.
  3. Open your video in Photoshop using a Motion Workspace.
  4. Choose your animated section.
  5. Select the still moment you want to remain stationary.
  6. Create a mask to allow only a part of the image to be in motion.
  7. Convert the frames of your video into layers and arrange them so that the motion of the video is seamless.
  8. Convert the layers back into frames so that they are once again in video format.
  9. Save it for the Web.

To get a more in-depth process of how to create a cinemagraph, check out this tutorial. Find more awe-inspiring examples of Cinemagraphs.