How to Make Cinemagraphs Still Photos that Move Like Movies!

| Photojojo

9/14/11 11:08 AM

Home

Our Newsletter

Forum

Time Capsule

Photojojo Store

Photojojo finds the best photo DIY Projects, Tips, and Gear.

How to Make Cinemagraphs Still Photos that Move Like Movies!

400
Yup, that picture moves. Nope, youre not going crazy! Cause who said photos can only feature still life? Inspired by the moving pictures created by photographer and motion designer duo Jamie Beck and Kevin
Extra photos for bloggers: 1, 2, 3

Shop @ Photojojo!

290,000
subscribers Get Photojojo for free:

Over

your email here

Subscribe
(No spam, not ever)

The 360 Spinner

A 35mm film camera that spins a complete 360-degrees for epic panoramas. More

Burg, we set out to make the magic happen. Make your pictures move like ours did with a some Photoshop magic!

or Grab our RSS

"We're addicted to Photojojo"

-- Heather Champ Flickr

Make DIY Moving Photos!

p.s. Its a Facebook giveaway today with our friends at Keepsy! Keepsy makes it easy to make photo albums from your digital photos, even from Instagram and Facebook.

"Take Photos? You Need this Newsletter."

-- Jim Heid Columnist, Los Angeles Times

WHAT MAKES EM MOVE?

Photos can show movement when made into GIFs. GIFs stand for Graphics Interchange Format, and its a bitmap image format that supports animation. This supported animation is what makes any movement possible. This magical movement hit the world wide web in the late eighties, so its

Photojojo! The Book

Finally! A book as awesome as we are and chock full of insanely great photo projects and DIY ideas. More

"use your photos to their best advantage..."

-- ReadyMade Blog

nothing new. However, the animation in GIFs are generally characterized to be rather jumpy and irregular. Then came along Jamie Beck and Kevin Burg. This talented team of fashion photographer and motion designer crafted cinemagraphsincredibly sleek and sophisticated GIFs. So celebrate the smooth comeback of GIFs by making your own photos join the movement!

"I'm never disappointed by Photojojo."

-- Dave Johnson PC World

LIST OF INGREDIENTS:

The Fuji Instax Instant Cam

A modern addition to the instant cam family that prints mini film. More

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 1 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

A camera that can shoot video A tripod Ideas for scenes to make into a cinemagraph! A model and/or whatever props needed A computer Access to a video editing program (optional) Access to Adobe Photoshop (for this tutorial, we are using the CS4 version)

SLR Sloop Camera Bag

Finally! A camera bag as good looking as you are that fits all your goodies. More

STEP 1: SCHEMING YOUR SCENE

First, plan out a scene you would like to record. For your first round of cinemagraphs, try to keep it simple. Some helpful hints & tips: Remember that for this sort of GIF, you want to show some sort of subtle movement; you want to create the intrigue of what a nice photowhoa, it moves!! Besides showing some movement, you also want to make sure you have something in your scene that stays consistent to contrast and emphasize that movement. Try to think of a scene or movement that would be fairly easy to loop since your final GIF will be set to loop forever. Your scene can involve a person but it doesnt necessarily have to. Some of the ideas we came up with were: Tree leaves gently moving in a breeze Someones eyes blinking or moving People or things moving as shown in glass window reflections

Chalkboard Speech Bubble

Bring fun and creativity into every portrait! Perfect for parties, portraits, and photo booths. More

STEP 2: SHOOT THE SCENE

Once you have your scene figured out, set it up with whatever characters or props needed. Then set up your camera up on your tripod and start filming away! Make sure your tripod is standing on a solid surface to make sure your camera can film as still as possible. You dont have to film your scene for very long; 10-20 seconds of footage is more than enough to make a cinemagraph.

The Dreamy Diana Lens

Add a retro mode to your DSLR with a classic Lo-fi Diana Lens. More

STEP 3: HAVE THE RIGHT VIDEO FILE

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 2 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

When youve shot what you needed for you scene, transfer your video file(s) to your computer. Before you can open and edit your video file through Adobe Photoshop, you have to make sure the file is something that can be opened in Photoshop. Adobe Photoshop can open MOV or AVI video files. If the video files you shot arent either of these files or any other video files that can be opened in Photoshop, open your video files in any standard video editing program to convert your files.

STEP 4: FRAME YOUR VIDEO

To open and edit your video in Photoshop, go to File > Import > Video Frames to Layers. A window will pop up where you will be given the option to: Import your entire file into frames, or Import a selected portion of your video file. As a general note, having a lot of frames will make your resulting GIF animate much more smoothly. However, more frames means more memory, and thus a larger file to work with. And you dont want to work with a huge file on Photoshop because itll slow down the program (and your computer in general). So, the best is to aim for a under 100 frames to start with. You can (and probably will) get rid of more frames as youre making your cinemagraph. For our cinemagraph, we decided to import a selected portion of our video the particular moment where our lovely model happened to look up from her book to gaze at the viewer. Before you click OK, make sure youve checked the appropriate import options you want on the left side of the window, as well as to check the box next to the Make Frame Animation option.

STEP 5: YOUR VIDEO FILE, LAYERED LIKE CAKE

Once your video file has been imported into frames in Photoshop, find your layers window. You will see that each frame of your video has been made into its own separate layer.

STEP 6: FRAMED AGAIN

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 3 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

To view these layers as frames, go to Windows > Animation. In the animation window, click on the bottom right icon of a film reel to see the animation as frames. Now youll see that each frame corresponds to each layer of your video file. This means that these layers and frames are linked to each other. Keep this in mind when youre editing and deleting layers and/or frames!

STEP 7: CATCH THAT MOVING MOMENT

Now that you can see all the frames in your video, figure out what frames capture the movement you want for your cinemagraph. Hit the space bar to play your video file so you can find the movement you want. Once youve identified what these frames are, isolate them by getting rid of both the frame AND the layer, as these are linked to each other. Note that when you delete frames, Frame 1 in your animation window will always be the very last layer in your Layer window, regardless if its Layer 1 (the original Frame 1) or Layer 92 (as in our case). If this break in coordinating frames and layers numbers bothers you, you can rename the layers to match to the frames when youve finished deleting all the unneeded frames and layers.

STEP 8: ALPHA LAYER IN, OVER

Within your now edited video file, choose one layer to show the consistent, non-moving elements of your cinemagraph. Duplicate this layer and place it on top of all the other layers in the Layers window. Name this layer Alpha, since itll be the layer that you want to consistently show on top of each and every layer and thus frame.

STEP 9: MASKING TIME

Now that you got your Alpha layer chosen and situated, its time to show the movement in your GIF. Youll be editing your Alpha layer to show this movement by using a vector mask and masking out the elements in that layer that you want to show moving. Dont know what a vector mask is or what masking means? Find out here. For our cinemagraph, we masked out the areas of our models eyes and
http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/ Page 4 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

some of her hair, as well as the bushes in the background, since these were the elements that we wanted to show some movement.

STEP 10: TESTING, TESTING, 1 2 3

Once youve masked out what you wanted in your Alpha layer, its time to do a test run of your cinemagraph! In your animation windowmake sure its viewing the framesmake sure your animation is set to loop Forever. Then play your animation. From this test run, you should be able to see what further edits you need to make to your layers and/or frames for your final GIF.

STEP 11: FEELIN LOOPY?

One of the challenges you may see from your initial test run of your GIF is in making a fairly smooth loop in the movements shown. This can be resolved in the following ways: After the last frame in your animation window, add a frame that contains the Alpha layer as well as the very first layer (the bottom-most layer). To do so, duplicate the last frame, and then change what layers show up in it in the Layer window.Then, tween the last frame and this added frame to help ease the transition that happens in the loop.For our cinemagraph, we chose this method to solve the looping challenge. Depending on the movement youre featuring in your GIF, you may want to have reversed frames of your animation to make a smooth transition.To do this, first select all your frames in the Animation (frames) window, duplicate them, and place them after all your original frames.Then, select all these duplicate frames and set them to reverse by clicking on the little down arrow on the top right of the Animation (frames) window. Dont forget to test your cinemagraph by playing it through the animation (frames) window as you figure out how to smoothly loop it.

STEP 12: COLOR YOUR CINEMAGRAPH

As your cinemagraph will be a GIF file, its important to know that GIF files cant hold a lot of color memory like other image file formats. This means your richly colored frames right now will not look as vibrant when converted to a GIF file. To accommodate to this challenge, apply a color effect that will work with less color memory. Such effects include duotone or color-processing effects. You can do this manually by playing with an adjustment mask over all your layers, or you can search the web for free Photoshop actions for color effects that you can just apply over all your layers.

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 5 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

We used cross-coloring Photoshop actions from this site for our cinemagraph.

STEP 13: RESIZE TO OPTIMIZE

We know youre probably stoked to show off your finished cinemagraph after ya get through this tutorial. To help optimize your GIF so that itll show up nicely on the weblike, say, your awesome blogwe have to make sure your GIF file wont be more large than is necessary. The internet is not friendly to large GIF files. With so many layers in your file already, its already bound to be a large file, so how can you make it smaller? Why, resize your image, of course! Resize your image according to your preference in Image > Image Size. Make sure the resolution of your image is also set to 72 pixels/inch; thats all the resolution needed for images on the web. Our cinemagraph, for the purposes of this tutorial, is set at a rather large size of 600400 pixels. Note: If youve optimized your GIF file as best you can, and you later find its still having trouble being uploaded on the web, there are free GIF resizers available online that can make your GIF file more web-friendly.

STEP 14: SAVE TWICE

Huzzah! Now youre ready to save your cinemagraph file as a GIF. First, save the file youve been editing (if you havent done so during this process) as a PSD file so you can come back for more edits if needed. Then do a Save for Web & Devices. In the window that pops up, make sure in the top right hand corner that youre saving a GIF file with 256 colors before you click to save.

STEP 15: CINEMAGRAPH SUCCESS!

You now have a cinemagraph done under your belt! Its time to show the digital world your spectacular creation so upload away to your blog, Tumblr, or web site!

MORE GIF GREATNESS

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 6 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

The design process gets GIF-ted in the image above from a funny site called I AM NOT AN ARTIST. Bonus: Make a GIF to upload to the site! Havent seen the cinemagraphs by Jamie Beck & Kevin Burg? Check em out on Jamies blog here. Visit the Cinemagraph Flickr group for inspiration and advice! Fashion cinemagraphs arent just for the ladiescheck out the GIFs by Tim Barber of fashionable men rocking out in this online lookbook!
Special thanks to Fernando J. Baez, from whose cinemagraph tutorial this tutorial was loosely based on. You rock our neon socks, Mr. Baez!

First Time Here? See more Photo projects, DIY ideas, and Gear Get it all free: Subscribe by email or RSS

You might also like...

1. Make Your Photos Move with a Thaumatrope! Extra photos for bloggers: 1,
2, 3 Thauma-what? Sounds Greek to us Well, opa! it is. Thauma is Greek for magic, and trope means something...

2. Re-Animation: Turn Found Photos into Mesmerizing Videos Did you know
you can make an animated video without picking up a camera? Cassandra C. Jones creates mesmerizing animations using her method Snap Motion...

3. How to Make Moving Pictures (Just Like Harry Potter!) Extra photos for
bloggers: 1, 2 Snape. Malfoy. Hogwarts. Horcrux. If none of those words make any sense to you, youre not a Harry Potter...

4. Photospanning: For Photos So Big They Burst Out of Their Frame Some
things are just too colossal to fit in one photo: Easter Island heads. An extended family reunion. Conans pompadour. Dont give in to the...

5. How to Make Stop-Motion Video Shorts with Your Digital Camera Stopmotion animation is one of the simplest, most fun animation techniques. Mix equal

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 7 of 8

How to Make Cinemagraphs Still Photos that Move Like Movies! | Photojojo

9/14/11 11:08 AM

parts digital camera, computer, and imagination (youve got all three), and youre...

Want more?
Photojojo covers the best photo projects, DIY ideas, and gear, twice a week. Subscribe by Email
your email here
Subscribe!

or, Grab our RSS

What's RSS? | How do I use it?

We solemnly swear: "No spam, not ever"

Published on June 16, 2011 See more Tutorials

Get Photojojo: your email here

(No spam what-so-ever.)

Yippee!

About Us | Jobs We're Hiring! | Advertising | Press | Buttons & Badges | Contact Us Send in tips or ideas | Subscribe or Unsubscribe | Privacy & Editorial
Follow us! Tumblr Twitter Flickr Facebook Like us!

MORE IN TUTORIALS (7 OF 79 ARTICLES)

Make a DIY Photo Flip-Flap Made on Omicron Persei VIII. Designed on Earth. Photojojo Average Photo Album

Hipper Than Your

http://content.photojojo.com/tutorials/how-to-make-cinemagraphs-photos-that-move/

Page 8 of 8