Cinemagraphs are a combination of video and still photography, usually more of a photograph with some motion. The term cinemagraph was coined by Jamie Beck and Kevin Berg. Cinemagraphs are actually animated gifs, which have been around for a long time, but they have a cinematic quality and retain the feel of a photograph.
A photographer friend of mine, Jenny Chen, was visting Vancouver so we decided to collaborate on a photoshoot and use the opportunity to try to create some cinemagraphs. It was the first time either of us had tried this. I followed an excellent video tutorial, which demonstrates how to create cinemagraphs using Photoshop CS5 Extended.
Here are 4 cinemagraphs from that shoot:
Models: Taryn Emelia and Marina F Mendes
Makeup: Megs War Paint
Have you tried creating a cinemagraph? Feel free to post a link in the comment section!
Categories: Cinemagraphs, Photography, Photoshop, Portrait animated, animated gif, beauty, cinemagraph, Fashion, gif, motion, portrait
I love these animated gifs and wanted to try something like that myself. I did a photoshoot a couple of months ago with model Kristina and used a fog machine to create a misty background. It would be cool to show the mist swirling around in a short animated gif. The original photo had some mist, but I wanted to add some more in Photoshop and then animate it.
Model Kristina - Original Photo
Kristina Fog Animation
Level of difficulty: Intermediate. You should be familiar with working with layers, resizing images and using the warp tool.
Create the mist layers:
(Click on the screen shots to zoom)
Create the Animation Frames:
Fig. 3 Animation window in frame view
- Click on the frame and duplicate it by dragging it to the new frame icon. Repeat this four times to give a total of 5 frames (Fig. 4 & 5).
Fig. 4 Duplicating the frame
Fig. 5 Duplicating the frame
- Click on the first frame. Go to the layers panel and make only the base layer (retouch) visible (Fig. 6).
Fig. 6 Click on the eye to hide, click again to reveal layer
- Click on the second frame and make the retouch layer on the Mist 1 layer visible using the layers panel
- Click on the third frame and make the base layer & the Mist 2 layer visible.
- Click on the fourth frame and make the base layer & the Mist 3 layer visible
- Click on the fifth frame & make the base layer & the Mist 4 layer visible
- Select all 5 frames by clicking on the first and Shift-Clicking on the last one.
- Change the frame delay time to 0.1 (Fig. 7) You can try different timings depending on what works best for your project.
Fig. 7 Change frame delay
Tween the animation to make it run more smoothly
- Click on the first frame and Shift-click on the second frame
- Go to the animation menu and choose Tween… (Fig. 8)
Fig. 8 Animation Menu
- Enter 10 in the “frames to add box” and select all layers, and position & opacity (Fig. 9)
Fig. 9 Tween Dialog Box
- Select frames 12 & 13 and repeat the Tween for these two frames. Repeat this for frames 23 & 24 and 34 & 35 (See Fig. 10)
Fig. 10 Tweening Frames
- Duplicate the last frame (45) and move it to the front
- Tween the first and second frames as before. This makes the animation smoothly cycle back to the beginning.
- Make sure the repeat mode is “Forever”
- Save everything!
Check it out – when you press the play button you will have a pretty smooth animation!
Save the animated gif
- Resize the image to the size that you want (I used a height of 375 pixels because it gave me a file size under 2 MB). Go to Image => Image Size and select the size that you want, making sure to lock the aspect ratio.
- Go to File => Save for Web & Devices.
- Set to “forever”
- Select Gif and Save (Fig. 11)
Fig. 11 Saving the GIF
To view the animated gif, open it with your browser.
I’m looking forward to doing some more of these animations and have lots of ideas for future shoots! If you have tried it, please share by posting a link in the comments section.
Categories: Photography, Photoshop, Post-processing, smoke, tips, tutorial animated, animated gif, Animation, beauty, fog, gif, mist, model, photoshop, tips, tutorial
Just for fun!
I took some action photos using the camera’s burst mode during the bubble-blowing set our photoshoot. The burst mode takes a few photos in rapid succession when you hold down the shutter release.
In Photoshop, I layered a couple of the photos, aligned them, then used the animation window to create a series of 5 layers using the tween command. I then converted the file from 16 bit to 8 bit mode and went to the File… Save for Web and Devices, and saved as a GIF, resizing and choosing the option to loop the animation forever.
Categories: Animation, Glamour, Photography action, animated gif, Animation, asian, bubble, burst mode, gif, girl, photoshop, pink, wig