It is late a Friday afternoon here but in some places in the world it will be Friday morning or lunch time, well it doesn’t matter because today it is coffee time and editing time.
I got the idea for this edit from another blog, that was showing a workflow for cinemagraphs. A cinemagraph is an animated GIF created from a video file in Photoshop. Only one part of the image is moving while the rest is still, this creates a similar image to those seen in the newspapers in the Harry Potter films. From reading the post I knew I wouldn’t use video but use still images which means there is a slightly different process.
There are a few things I will mention first about shooting the images. The scene needs movement but the camera needs to be still, so a tripod is required. I shot only ten images to create my final animation but i would say that the more images shot would be better as it will create a smoother cinemagraph.
My idea was for my coffee to be drunk and then refill it self. Yes it is cheesy but some times cheesy coffee images work well.
First I loaded my coffee images into Adobe Camera Raw to batch edit.
Next in Adobe Bridge I went Tools-Photoshop-Load Files Into Photoshop layers. This automates opening each image and then placing them into one document.
Now in Photoshop I grouped the top nine layers together leaving one out. This image left will become the background image. Selecting a Layer mask I masked out the center of my coffee cup, as this is going to be the area where the movement will take place with the rest of the image being still .
I then resized the image to my output size as the next steps could be memory intensive.
Once resized I needed to start creating the animation. By going window-timeline I opened a new Photoshop window at the bottom of the program. Click in the center to create the video and you will see a time line similar to that below.
Every layer you create will now will also be represented in the timeline. The timeline will even recognize your layer masks.
The time line runs from left to right. To make changes like looping the animation and the frame rate click the drop down arrow on the top right of the timeline window.
I needed to organize my timeline as each layer ran for the whole animation, meaning there was no change. I double clicked on the grouped layers in the timeline window to expand it and then shortened each layer to a quick clip of a couple of frames. I then staggered these clips.
The timeline layers works in the same way as normal layers so if clip A is above clip B at the same moment you will not be able to see clip B.
Once organized I duplicated the grouped layers in the layer pallet so they were also duplicated in the timeline window. I then reorganized the clips to be a mirror image of the first folder. I did this so in the animation when the coffee reached the bottom of the cup it would refill to the top.
Next I started toning my image to a faux vintage style as a special effect.
First i added a colour balance adjustment layer. In Shadows I set blue to +100, in midtones I set red to -21 green to -12 and finally in highlights i set red to +11 green to +11 and blue +21. and set the layer to
Next I added a gradient adjustment layer. I used a dark blue then a lighter blue and then a pastel aqua green and a near white green. The layer was then set to lighten.
For the next adjustment I added a curves adjustment layer and created a slight s curve.
The image was feeling quite cold so i added a photo filter layer and warmed up the image slightly.
For my final adjusments I created a vignette and dodged the centre of the coffee cup. I placed these layers above the images and under the tonal adjustments.
To create the vignette I used the quick mask selection mode and using a low opacity big brush painted the area I wanted as a selection. I exited quick mask and filled the selection with black on a new layer and set it to overlay. I duplicated that layer and set it to multiply. I then reduced the opacity to fit the image.
To dodge the center of the cup I created a new layer and filled it with 50% grey and using a soft brush with a low opacity slightly lightened the center of the image.
Last but not least I saved the image to web using the file format .gif. Most important which, I did not do the first time, is in the bottom right where it says looping options, set it to forever.
Final Image
I really like the idea of the image with the color and tones. Of course this is not an everyday image that I would produce but if I ever wanted to created a moving picture for a website or something then I have got a technique. The animation is quite stiff and with more images it would be smoother.
I tried this method with a different composition.
Let me know what you think? Will you try this out at the weekend? If you do remember to post it and link it back to me so I can see.
Now have a cup of coffee and think plan your own cinemagraph inspired animated GIF.
Do you need a cup of coffee now I know I do?If you wish to get notifications when I post on my blog, you can follow me on Twitter@aperture64, on Facebook.com/aperturesixtyfour or alternatively be emailed by subscribing below.
Aperture64 