Posts Tagged ‘how to’

Cinemagraphs, Cinegraphs, Plotagraphs and Dynamic Imagery

So by this point if you haven’t seen, heard or even created a cinemagraph then you’ve had your head so far in the sand, you’ll be coughing up beach for weeks.

Brief  (very brief) History of Cinemagraphs
According to what the web says, cinemagraphs were coined by Kevin Burg and Jamie Beck, more than likely in the same way as stitching multiple shallow DOF (depth of field) images together creates what is now called the “Brenizer effect” even though both were created years previously but were, let’s say, popularized by the aforementioned. Ryan Brenizer, Kevin and Jamie would probably some of the premier artists in their fields when it comes to these specialty techniques. Doug Richardson out of Texas was one of the early pioneers having applied for several patents and creating his first cinemagraph commercially for Land Rover back in 2005. As well Gus Mantel used the effect to great success with his exhibit of cinema stills animated back in 2013.

Some of the first cinemagraphs I remember seeing were back in LA, in 2004 or 2005. They were located in bus shelters and on electronic billboards, back then called “living billboards” and such, they had yet to have a trendy name given to the method of a still image with an aspect of it portrayed in motion. It was very simple motion included into the still image; things like blinking eyes, lights turning off and on or a waft of hair blowing. Today we can do just about anything within the confines of a “cinemagraph”, including water, clouds, time lapses, and even rotoscoping, a technique where we go in frame by frame and mask off areas for the desired effect. But I’m getting ahead of myself.

Creating a Cinemagraph . . . Simply
So what’s the best way to create a cinemagraph?
Well you need to get some very good motion footage. From there you can use a few different Adobe products to get an end result but probably the easiest is using Photoshop (CS6 or later, including CC). So Adobe made Photoshop video capable back in CS6 in 2012, with that you can drop your video file onto the PS icon or select import and bring it into PS.

From there, basically, you’ll create a still frame from the video portion of specific time you want frozen. With that still layer on top of your video layer, you’ll create a layer mask and simply paint in the motion from the layer beneath. They are tonnes of tutorials that can show you how to do this on Youtube.

A second way to create a cinemagraph is solely from a still image. This involves animating sections of the image to create the illusion of realistic movement. There are a few methods to create these cinemagraphs, one is with the use of the “Plotagraph” app. Its not cheap though. If you are interested in this method you can also try tutorials using both Photoshop and After Effects; both methods will require you to be in your most attentive state (no red wine tonight) as they are quite complicated and intensive to create realistic results.


Example of an animated still image (Plotagraph style)

Example of an animated still image (Plotagraph style) gif format

One last method to creating this type of dynamic imagery is by layering a still file with a video file and simply changing the blending mode of the motion file. For example, in the image below I took an archived image I had from Glenariff Forest Park of a girl watching the rushing water fall over the rocks at Ess-na-Larach. I sandwiched this image along with a video file of snow blowing, changed the blending mode and voila.

— Example of a still image and motion file layered together

File Formats
If you do an Instagram search for cinemagraph, you’ll find tens of thousands of images with moving elements within them, some good, some not so good but all of them are video format files and usually mp4. For social media there are two formats of choice, gifs being self loading and looping while mp4’s require some finessing in whichever video player you want to play them through, on whichever platform they are located. For example, you won’t be able to loop a YouTube or Vimeo based motion file without doing a little bit of simple coding when you go to embed. Mp4’s will giving you a better quality(more colours & sharpness) in trade off for file size(sometimes) while gifs are self loading, looping can be embedded in just about anywhere; emails, web, etc etc.

Example of a looping mp4 cinemagraph
—– Example of the same scenario in gif format Example of the same scenario in gif format

Uploading to the Web
Obviously when exporting cinemagraphs for the web, you need to be thinking about file size; not everyone has broadband but hopefully the market you are trying to reach has something close, otherwise you’re going to be uploading some very small gifs and mp4s. Even though this blog post is hosted in the UK and the USA, you might see lagging and slow to play files. If you want to use them on Facebook they need to be in gif or mp4 formats; Facebook now supports gifs and any video file shorter than 30 seconds will automatically loop. Gifs need to be “linked” from a hosted site when posting on Facebook; sites like Tumblr, Giphy, imgur or your own site. With your video files when posting them on Facebook, remember to go into after you post it and change in the settings for the video, the default playing resolution to HD, otherwise they will play in SD unless the viewer changes it.

If you want to upload to Instagram then the best format is mp4, that’s the way it is. Mp4’s will give you a better quality(colour & dithering) in trade off for file size and self loading while gifs can be embedded in just about anywhere; emails, web, etc etc. You can only upload video files from their mobile app, not the desktop version. So somehow you need to get the video file onto your mobile; email, AirDrop, iCloud, DropBox and of these will allow you to move that file onto your mobile device.

Optimizing GIFs
While there are some tricks that are only whispered about in back rooms about how to make crazy minimalised sized HD resolution gifs, you’re probably going to be stuck outputting through Photoshop’s web legacy “save for web” option or maybe experimenting with one of the many newly written apps for creating gifs like Gif Factory, GifRocket and one of the latest ones, from the makers of VSCO is DSCO. If not using one of these apps, you’ll need to use Photoshop’s “save for web” legacy option under export in the file menu. Saving a gif for web is sort of hit and miss; trying to get the file size down while preserving the colour and smoothness of the image. Too much dithering, colour reduction or compression can ruin the look of your image.

Optimizing Video
Video for the web can be a tricky one; you want it a small file size but you also want also the resolution, smoothness and saturation that the video gives you over a gif. Personally I use the mp4 file format, it gives me a small file size without compromising too much on all the other aspects. After I finish all my fiddling in Photoshop with the cinemagraph, I go File>Export>Render Video, then I use the default settings for a 2k cinemagraph (image below).

Render video settings

Render video settings



While cinemagraphs are still trending out there in interweb land, marketing and advertising agencies will keep ramping up their use. As long as the platform can support their files sizes, either in mp4 or gif formats, a dynamic image will almost always draw in a larger more involved audience than a static image.
There are several so called rules though to producing and distributing cinemagraphs to the public.

1. Does the image stand on its own? There are still random issues with gifs and mp4s on different platforms; gifs don’t render in MS Outlook, still the major email program for most businesses. All the end user will end up seeing is the first frame of the gif as a static image.

2. Keep them small and tight. The file size needs to be small for the platform to load it quickly and play. The motion in the image should be smooth and simple, nothing too busy or complex.

3. Following number 2, is it “Dynamic”? Does the image have a good use of colour and motion; does it draw the viewer into repeatedly watching it?

4. Be creative with it; make sure the content is intriguing and stimulating

5. Does it loop seamlessly? The motion needs to repeat itself without the viewer becoming aware of it.


To see more of my dynamic motion content(cinemagraphs) click here