Lessons

Lesson Info

Class Introduction

To get started, I want to talk about what a cinemagraph is, because really, it's sort of a made-up term. There is no actual definition that you'll find. Different people have really sort of different ideas about what it is. So, the way I like to define it is it combines the qualities of a photograph, which is really just that sort of snapshot in time. It doesn't have a beginning or an end. It just is this one sort of moment as opposed to a video, which tells a story. A video has a beginning and an end, and once you've watched the entire duration, you can derive the story. Cinemagraph really just combines these two things. You get some cinematic effects, motion. But you get that static photograph feel. You interpret your own story from that still frame. And again, it just sort of combines these two things together. So really, a cinemagraph is an experience. A lot of times people will ask well, what format is a cinemagraph? My argument to this as well is there is no technical format for ...

a cinemagraph. Typically, we see animated GIF, and this is only because way back before Flash in the olden days on the internet, back in the late '90s, animated GIF was the only way we could take an animation, put it out on the web, have it be supported in all the browsers. So animated GIFs really became the sort of default standard. When Flash came around, what Flash did was Flash actually took this animation idea, put it into a plug-in distributed by Macromedia, and then everyone can see animations. Then we saw the cinemagraphs sort of go away for Flash. Then Flash went away in 2010, 2011, and now we've seen a resurgence of this. So the reason that the animated GIFs became so popular is because in the past couple of years the social media platforms have supported these formats in their feeds. So now, advertisers, designers, animators found animated GIFs and said, oh, my god, this is a great animation technique for putting things in feeds. However, that experience that we talked about, having a photograph combined with cinematic qualities, can be in multiple formats. We can have this in video. And video's becoming the most popular because the file formats are smaller. Animated GIFs are limited to 256 colors, and they don't have the same sort of compression frame by frame that we get with video. So, we're starting to see more and more platform-support video like Instagram, for example, and some third-party software companies like Plotagraph and Flixel are supporting video as well. And then, of course, there's HTML. We can animate things with JavaScript. And I would argue that as long as we're getting that same experience, all of these can create a viable cinemagraph. So again, it's all about the experience not the particular technology for the delivery. Let's switch over to our computer and let's take a look at some examples just so we sort of get a sense of some of the different ideas and different sort of experiences cinemagraphs can create. I'll just go through a couple of these. A few of these are older. These were some of the original cinemagraphs people did early on. If we're looking at this, again, this is sort of a snapshot in time. There's no story here per se, except for the fact that you realize this is a barber shop. You can sort of look at all the details. We've got our motion here for the bar. And we can also see the barber pole in the background here as well, just this little bit of movement here. So again, this is that sort of idea of the cinemagraph, where applying some motion to a static photograph. So I'll just arrow through some of these really quick. This one here, there's a taxi cab we can see moving in the background. The workflow for these is very similar. We start with the static photo and we sort of mask out an area of the photo to show the video through. There's tons of different things we can do. Some things we can simulate. We're going to simulate water moving that will look like this video, but we'll actually do it from a static photo a little bit later today. Other ones have some really powerful effects with almost no frames. This is about six frames, and the only thing that's really giving us a sense that there's a lot of frames is the movement of the projector wheels here. On the main model here, there's just sort of this flickering effect. So again, this gives us a really interesting photograph. Again, there's no beginning and ending to the story. It's just a single snapshot, but it adds some visual interest to watching this. If you do searches online for cinemagraphs in your favorite search engine and click on the images tab, you'll see a lot of these. You'll see tons more. There are so many sort of applications for doing this. The forever subway train. We're gonna do a shoot today doing something similar to this. We're gonna use, Joe's gonna come up and be our model. We'll put a fan on him, shoot this on green screen, and we'll do something similar to this so we can see how we would go about doing something like this. And if you are photographing any sort of event, I'm not a wedding photographer, but our friends got married out in Arbutus Lake and they asked me if I would try to take some photos. I did my best. But one thing we said is, "Hey, let's make a cinemagraph of you guys." We set 'em on a bench, counted to 10, had them be still as they could, and then using Photoshop just sort of masked out the areas that would move, including her hair, part of her dress, and the water in the background. So again, from just a 10-second video we can just create these really nice effects for our photography. So all the ones I showed so far really hinge around video and having sort of the main subjects move. A couple of other techniques that people are using for advertising or even just for bringing photographs more to life, I sort of think of this as sort of the Harry Potter sort of idea. In Harry Potter they have the newspaper pictures that move. So, these guys are having a conversation. This might go a little further than just a snapshot because they are communicating back and forth. But it's not enough for it to fully be a video. So again, it really just depends on what your definition of a cinemagraph is. Another example here, just a woman moving her leg. To sell this a little bit, in the mirror we can see her leg moving over here a little bit as well. And then, the main subject moving. In all of these the main subjects are moving as opposed to the environment. And here, we've just got a man reading a paper. So again, maybe a story because he's actually changing the pages, but it's really not enough to tell a story like video would tell. So again, it's pretty close to those pieces. Really quick I'll just show a couple of other possibilities. Advertising is really taking this. We can have our entire message on a screen, have part of it moving. But again, there's no story. These sort of ideas are really powerful because people are only looking at these for maybe a second or two if they're in a Twitter feed or an Instagram feed. So you want to get that message across as quickly as possible and maybe have some of the animation sort of stop them. And then, this was really popular, especially on the HOW Design website and the HOW Design conference about two years ago. Everybody went crazy for this. This is a simulated cinemagraph. We're gonna do some of these later today as well. What's happening here is there's a photograph that was not animated, and all of the effects have been added in post, or afterwards. We're gonna do something just like this and after effects using a particle system. But again, the idea here is these are simulated. There was no actual video. These were created from a static photograph. So another example is this one. This was using a technology similar to Plotagraph, which is where you take a static image and you sort of map out different key points. If you watch it you can see sort of the blending motion. Not every single cloud puff of the train actually extends all the way out. You can see sort of the blending there. But again, the idea is that these are completely simulated. I believe our friend Rocky's watching from Nevada. Rocky Montez-Carr, he is a photographer out in Nevada, he and his wife. They've been doing a lot of cinemagraphs. This was one that they, this went viral for them, and they actually did this with Flixel. Some of this was done in Photoshop, so the reason I bring it up in this simulation is because he took some of the video from playing this in the car, put it in some of the glasses, and sort of designed this overall experience. So, here's a combination of taking design techniques, mapping it to actual video that they took, and then creating this entire cinemagraphic experience. So there's lots of possibilities for creating this type of content. And then two last examples I just wanted to show. And again, these are, it all depends on what your definition might be. So, we put together these animations for Adobe, their MAX conference a few years ago. The illustrator here was Race Bird. What we did here is this is basically an animation, I guess. I don't know if you'd call this a cinemagraph or not. My argument for it being a cinemagraph is that there's nothing really moving here that's telling any part of a story. We've got some rain. We've got the water and some clouds. The lightning and the little water drops are randomized. One thing that's really interesting about using HTML to create these cinemagraph effects is that the JavaScript gives us the ability to randomize. If we have a video or an animated GIF, we have a set number of frames. And when they loop they play the same frames every time. In a case like this, the lightning and the water drops that are dropping on top of the monster there are completely random. So the longer you watch it, you'll never see the same pattern sort of moving along. And following that same sort of idea, we did a cinemagraph for Knott's Berry Farm. This was a photo composite. It is shot and composited by Shaun T. Garden for Knott's Berry Farm. What we did here was just add some motion here. We added some fog that moves, move the gunslinger's arm, the werewolf. And then we just randomized some of the flickering happening on the lampposts there. So again, there's no story here from beginning to end. There's a lot more motion than we see in other things. But again, like I said a couple times, it really is just all about the experience of how these pieces work together.