Get ready, because this one isn't really easy to do!
Here is what you need to create the cinemagraph:
- A camera that can shoot video
- A tripod
- A computer
- Adobe Photoshop (we will CS4 in this tutorial, but almost any newish version will work)
Step 1: Figuring out the Scene
For many this may be the hardest step of the process. Creating a successful cinemagraph really depends on whether or not you can find a subject/location that will work well for your cinemagraph.
Remember, subtlety is the name of the game when it comes to cinemagraphs.
Step 2: Shoot the Scene
Once you have an idea for your cinemagraph, shoot the scene! Make sure you have a tripod or flat surface to lay your camera on. Picking a background without moving parts may be really helpful down the road as well.
You only have to shoot about 10 seconds of video. That should be more than enough to capture a successful cinemagraph.
Step 3: Upload the Correct File Type (image 2)
Adobe Photoshop likes to work with two different video formats. They are .MOV and .AVI. If your movie is not one of these file formats than make sure to convert the file using video editing software before working on your cinemagraph.
Step 4: Frame the Video (image 3)
Now in order to upload your video, go to File > Import > Video Frames to Layers.
In general, the more frames the smoother your cinemagraph will be, however, more frames equals more memory usage and a larger file size. Aim to use around 100 frames or less.
Before clicking "OK" make sure to check the "Make Frame Animation" option within the dialog box.
Step 5: View your Layered Video (image 4)
Once you press "OK" on the last step, you will see that the frames of your video have been put into individual layers within Photoshop!
Step 6: Animation (image 5)
Go to Window > Animation
You will see a box appear on the bottom of your screen with the frames of your cinemagraph appear on individual frames. From this you will be able to play and preview your animation!
Step 7: Edit Down to just the Frame You Want
Now it's time to delete the frames AND layers that you do not want in the animation. Make sure that if you delete a frame, delete the corresponding layer because they are the same and linked. If you do not delete both you will get an error.
Please note, the frame number and layer name may not be the same, but as a point of reference the first frame is the bottom layer and the last frame is the top layer.
Step 8: Choose an Alpha Layer (image 6)
Choose a layer/frame that you want to be the image that does not move during the cinemagraph. Every time there is nothing moving this is the image that you will see.
Once you have chosen which layer you want, duplicate the layer and place it on top of all the layers. Name this layer "ALPHA".
Step 9: Layer Mask (image 7)
Now that you got your Alpha layer chosen and situated, it’s time to show the movement in your GIF.
You’ll 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.
Don’t know what a vector mask is or what masking means? Find out here.
For our cinemagraph, we masked out the areas of our model’s eyes and 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: Time to Test!
Once you’ve masked out what you wanted in your Alpha layer, it’s time to do a test run of your cinemagraph!
In the animation windowmake make sure your animation is set to loop “Forever”. Then play your animation.
You can test your animation and try to make it perfect. This step will take a lot of patience and dedication, but you can do it if you are determined!
Check out the full tutorial in order to better understand how to get a flawless cinemagraph.
Step 11: Resize for the Web (image 8)
You will want to resize the cinemagraph for the web, so make sure to change resolution to 72 (ppi) and around 600x400 pixels in size. Making the file too big may make it load poorly on the web!
Step 12: Save 2 Times (image 9)
Save the first time as a .PSD. This way you can come back and edit the cinemagraph if you ever want to make some adjustments to it.
Then, go to File > Save Images for Web. In this dialog you will be asked a variety of questions. Make sure to save as a GIF and 256 color.
Now you should be done! I hope you can make a successful cinemagraph! I am no good at video editing, but hopefully you guys have better luck than me :)
@smpmemento I hope this tutorial helps!