A cinemagraph can best be described as a high quality gif or video that is very smoothly looped. The first cinemagraphs were created in the gif format out of practicality for sharing online, but because of the limitations of the gif format, some were often employed in the HTML5 video format to display at a much higher quality and smaller file sizes. Cinemagraphs are not tied to any one file format but the way in which they’re displayed determines which format is best suited for them. Some of the best cinemagraphs capture the entire essence of a scene, or they isolate a movement within a larger scene. These cinemagraphs range from landscapes and nature scenes to street photography, sometimes augmented by only the slightest bit of motion, and at other times completely wrapped up by it. Here at Graydient Creative, we love cinemagraphs! Here is how we create them.
We use a program called Cinemagraph Pro by Fixel for all our cinemagraphs. With Cinemagraph Pro, we can take a video and turn it into a cinemagraph in just 6 easy steps. Before we go through this process, we should first talk about what videos work best. Cinemagraph Pro allows pretty much any kind of video format, the ones we have found that work the best are .mp4, .mov, and .mpeg. When picking out a video, you want one that has consistent lighting and has a camera that is still. The subject matter you want to have animated should have a repetitive or consistent movement and be isolated from any other movement in the video. Once a video is selected, we can start to turn it into a cinemagraph!
Open video with Cinemagraph Pro
We first need to open the video; when opening the video in Cinemagraph Pro, the program will create an instance of the video so the original stays intact.
Pick Video Loop
Next, we need to select what part of the video to loop through. The white box at the bottom of the program slides across the whole video timeline, allowing you to pick what section should be looped. In the example below, we are setting the very beginning of the video as our loop.
Pick Still Image
Then, we need to select what the area outside the live part of the cinemagraph should be. Now, this section can be any part of the video but for best result the still image should be within the video loop. To do this, we grab the purple bar in the video timeline at the bottom of the program and place it anywhere in the timeline. In our example, we are choosing to put the still image directly in the middle of our video loop.
Animate Part of the Video
Now, we reveal the part of the video that we want live. We do this by using the Brush and Eraser at the top of the program to reveal live and still sections of the video, respectfully. Once you start using the brush tool, you will start to see the video in that revealed section loop through the part of the timeline we defined earlier. If you end up brushing over an area you did not want live, then simply use the eraser tool to correct this mistake. To see everything in the video that will be still, click on the “show overlay” button at the top of the program. In our example, we are brushing over the bus destination sign which switches between two locations.
Choose Bounce or Repeat
Depending on what the live section is trying to achieve, we need to decide if this section should loop back and forth from start to finish of the video timeline or if this section should play through and jump back to the beginning of the loop when it has reached the end. If the motion of the live section moves in one direction, then this should be set to repeat but if there is alternative movement it might look better if this is set to bounce. This part is kind of trial and error, so see what looks best for your cinemagraph. In ours, we set the live section to bounce since it is just switching between two displays (Americana Blvd and Lynx central station).
Save the Cinemagraph
Finally, we want to export the file to create our new cinemagraph. We personally save all our cinemagraphs out as mp4 because saving it out as an ainmated gif reduces the quality of the video too much. To achieve this we simply click on the export button at the top of the program and in the pop-up window we select “H.264(MP4)”. We only need to repeat the cinemagraph once and we normally reduce the size in half to save on file size. Cinemagraph Pro also allows you to upload the cinemagraph to their cloud server allowing you to embed it on your site using an iframe.
That’s it! We have officially created a cinemagraph! Below you will find the final outcome and all the assets used. If you have any questions or would like us to create a cinemagraph for you, please reach out to us. We’d love to hear from you!