In this tutorial, I go through the planning, shooting and post-production process, and explain how this Cinemagraph was made. You can download my raw footage and image to follow my steps in Flixel Cinemagraph Pro.
How it's made/Tutorial: Brathwait watches ad
Step 1. Plan
My main idea with this image, was to imitate a situation where a cyclist is looking at his watch during his bike ride. To achieve this look, I wanted the bicycle and cyclist to be completely still, while the road beneath them was moving in an endless loop.
My first thought was to attach a camera to the cyclist’s head, and let him drive… but I gave up this idea very fast because there is no way someone could drive and hold his hand up in a such a stable way!
Step 2. Plan some more
I decided to create this Cinemagraph with a combination of two different shots. One, the video of the moving road, and the other, a photo of a cyclist looking down at his watch.
Step 3. Think about the loop
There are three kinds of loops:
- Bouncing loop
- Repeating loop
- Repeating loop with crossfade
My hope was to find some road markings that would appear in a constant interval so I could use them to sew a start and end together in an endless loop. In order to create this effect, I used a repeating loop with a crossfade. The crossfade helped me to hide the “jump” in the loop.
Step 4. Shoot
Now, I needed to figure out how to film a road so that the footage would be very stable. At first, we had an idea to rent a Gimbal Stabilizer, but it felt dangerous to run with it on a motorway. So, instead of using a stabilizer, I decided to mount my camera on the back of my friend’s car. As we didn’t have a special car mount, we used a regular tripod and duct taped it onto the roof rack. TIP: avoid this method if possible. It’s not the most secure way of doing this, so I recommend to find a suitable camera car mount for the job.
My Sony a7rii was connected over wifi to my tablet so I could easily control my camera while we were driving. All of the settings were on manual (this is important, there should never be anything automatic during shooting Cinemagraphs. I sometimes forget White Balance on auto and that always makes me very sad in Post-production).
On our final image, the watch should be the sharpest thing, so I manually focused to a foreground, using my hand as a guide.
Step 5. Think about the loop during the shoot
We were looking for a road with some autumn leaves and distinct road markings, that would help me later combine the footage into an endless loop. We tried to drive at a constant speed and hold the same distance from the curb the whole time.
In a same day we also made photo of a cyclist looking at his watch. It was important to do both shots in similar light conditions so it would be easier to combine them in post-productions.
Step 6. Files and software
Download files from here
If you do not have your own material to work with you are welcome to use mine, but remember, it’s only for your personal use.
Download Cinemagraph Pro from here
Use coupon code VIRGOHAAN for 10% discount
For post-production we are going to use Flixel Cinemagraph Pro. You can try the app for free forever (with Flixel watermark). Or, to remove the watermark, you can purchase /subscribe to the the software using my discount code.
Step 7. Find the best footage and image
I started with the road footage. I was looking for a section in the video where there was some interesting markings on the road, as well as some leaves, so it wouldn’t be just a plain plank of asphalt. Using a media player, I make marks on paper where in the timeline there could be a potential perfect loop. I used Adobe Bridge to browse my camera raw files to find the best image of the watch and rider.
Step 8. Trim your clip
Import road footage into Flixel Cinemagraph Pro. The first thing that we did, was find the best section of our clip where the start and the end looked as similar as possible. For that, I used the Trim section. You can find the timeline at the bottom of the app window. On the timeline is a white trim box, representing the start and end of your final clip. I trimmed my clip so that the middle part had some short and thick road lines and at the start and end, they had similar long and thin lines. This step takes a some patience and a lot of attention to detail. Once you’re finished the trim, it’s time for the next step. You can always return to the trim if you ever need to modify the timeline.
Step 9. Import static image and cut out subject
On a bottom left side of trim window there is popup menu, from where you can import a static image. Find it from your computer and press import button.
Now, we need to mask out everything what should be moving on our final Cinemagraph. For that, we will select the Mask section where we can find a few simple options for our mask brush:
- With the brush tool, you can paint an area to reveal the video behind your static image
- With the eraser tool, you can paint your static image back
- Size – makes the brush smaller or larger
- Hardness – makes brush edge harder or softer
- Opacity – represents if the brush deletes everything at ones or just a thin layer of your static image
- Mask All- will mask your entire image so you can not see your static image anymore
- Unmask All- covers all your moving image with static image
From the view menu, you can zoom in to create a more detailed mask. Start with a smaller brush, with a semi hard edge, and carefully cut out the hand and bicycle. Try not to leave any dark edges on your subject. You can use a larger brush to mask out parts far away from the subject.
This is probably the hardest part of Post- production so take your time. With detailed masks like this, it can easily take 30 min or even more.
Step 10. Fade loop
In the loop section, there is a purple handle at the start of a timeline and green handle at the end. Use the green handle to adjust the length of the crossfade. If the fade is very long, you will see at the end of a clip a transparent ghost from the beginning, and this is OK for some cases, but not this time. Try to make this fade as long as it smooths out the jump between start and end, but short enough to avoid a long ghost effect.
Step 11. Color grading
For color grading, there is a section called “Adjustments,” where you can make basic color correction. There is also a section called “Effects,” where you can find some ready made presets. Take your time and play with them! If you want, you can always export your work and color grade it in another app, for example, in Adobe Photoshop.
Step 12. Exporting
In the upper right corner you can find two buttons: “Export” and “Upload”. In the Export dialog box, you can choose between Apple ProRes 422 and MP4. For uploading to Facebook or Instagram, choose MP4. In the repetition dialog box, you can make your clip longer. Pushing the repetition count up, you can see the Total time raising. For example, for Facebook you should make 30-60 second clip, for Instagram 6-14second.
If you have a Flixel Cloud subscripition, you can upload your file to the cloud and use the embed code to share it to your webpage with a custom logo.
Step 12. Uploading
Next to the export button, you’ll find the upload button. You can create a profile on Flixel.com, and upload all of your work to showcase in a cinemagraph gallery. By uploading, you’ll also get an embed code to share the work on your blog/website, as well as the chance to be featured on Flixel’s website and social accounts.
In the popup menu, you can write some information about the Cinemagraph name, story, add hashtags, etc.
In the Privacy settings you have three options:
- Public (everybody can find your work from the Flixel gallery)
- Shareable (your work will not appear in the Flixel gallery, but you can still share and embed it)
- Private (only you can see it when you sign into your Flixel account)
You can share your Flixel post to Twitter and Facebook, but it will be static image linking to your Flixel page. So, I suggest not use those options, instead export video and upload it to your social media accounts.
Step 13. Embeding
When your work is uploaded to your Flixel account, you can use the Embed code for showing it on a webpage or blog. In the video below I am using an embed code to show my watch cinemagraph on my personal webpage portfolio. My webpage uses wordpress content management system, but the workflow is similar with other similar products.
By pressing the Embed button, a popup window will open where you can find a few options:
- Responsive (This option makes your Cinemagraph change size responsively to your window size)
- Fixed (This option gives a fixed size to your Cinemagraph)
- Use HD (Choosing this option lets you show your cinemagraph in High-definition 1,920×1,080)
- Force Mobile Gif (On supported mobile browsers a BPG image is displayed by default. BPG is a higher quality animated image compared to a GIF. If more than a few are embedded on the same page, the page may fail to load. In these cases, enable this option to use the lowly GIF.)
When you are done press the “Copy to clipboard” button, open up your webpage manager and paste this code inside your post.