asdf

    Cinemagraph Tutorial: how to make animated photos using Photoshop

    | Photoshop Tutorials | Tutorials | 06/01/2013 02:00am
    0 Comments

    In our easy-to-follow cinemagraph tutorial we show you how to use creative Photoshop effects to make animated photos for the web using Photoshop CS6′s latest video tools.

    Cinemagraph Tutorial: how to make animated photos using Photoshop

    With the latest SLRs and compact cameras offering the ability to shoot both still and video footage, photographers and artists can find themselves caught between the two formats. Most of us are used to printing out the final piece, or uploading it to a website.

    However, when it comes to video there’s a size issue, and apart from uploading it to YouTube or burning to a disc, there’s really not a great deal of options.

    Cinemagraph Tutorial: how to make animated photos using Photoshop

    With the latest technology, however, we now have a perfect avenue for these clips, in the form known as a cinemagraph, which blends a still image with moving video to create a picture that is predominately still, with some animated aspects.

    The technique is simple. Take a short video sequence, export the footage as stills, then use Photoshop CS6’s new video masking tools to isolate the part of the image you’d like to have animated, and then export the resulting frames in a web-based format.

    Cinemagraph Tutorial: how to make animated photos using Photoshop

    Our finished cinemagraph!

    Part of the beauty of this technique is the surprise factor of having a moving still, but also the ability to apply all the usual enhancements and effects you want to the image to stylise and get the look you’re after.

    Cinemagraph tutorial: step-by-step how to make animated photos

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 1

    01 Trim the video
    Go to File>Open and select ‘Cinemagraph_Before.mov’ to open the video in Photoshop. Next, in the Timeline Panel, use the Trim tool to select a section of footage of about two seconds in length. Move the Playhead to the point in the video that you want to use as the still.

     

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 2

    02 Apply a filmic effect
    Now apply a Curves Adjustment Layer with a subtle S-curve to improve tone and colour, then a Color Balance Adjustment Layer to increase the green and blue to give the image a filmic look. Press Cmd/Ctrl+Alt+Shift+E to merge a copy of the layers.

     

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 3

    03 Apply a mask
    Add a Layer Mask, select a black brush, and paint over the balloon to mask the area. Make sure that each of the layers is clipped to the next (see Clipping Layers). Go to File>Export>Render to video and save it as an MP4. Now go to File>Import>Video frames to Layers.

     

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 4

    04 Import video layers
    Select From Beginning to End, tick Make frame animation, and click OK. In the Timeline at the bottom of the screen click frame 1, hold down Shift and click the last frame. Then, in the top left of the timeline, select Copy frames from the drop-down menu.

     

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 5

    05 Reverse the sequence
    Select Paste frames from the same menu to paste them after the selection. With the new frames selected, choose Reverse Frames. Select the first and last frames from the reversed selection and delete them. This will help to create a smooth animation.

     

    Cinemagraph tutorial: step-by-step how to make animated photos - Step 6

    06 Save for the web
    Go to File>Save for Web, choose Adaptive from the Selective drop-down menu, tick the Transparency box and select Diffusion Transparency Dither in the menu below it. Leave the rest of the settings as they are. Click Save to finish. Once exported, the animation is ready to add to your web page.

    Photoshop Tip: using Clipping Layers
    The basic principles of video enhancement are the same as with images, but you’ll need to make sure that each layer is clipped to the next. You can check this by looking at the Layers Panel to see if there’s a small arrow indicating the clipping on each layer. To clip two layers together, hold down Alt, position the cursor between the two layers, and click.

    READ MORE

    Fake a tilt-shift effect in Photoshop
    Photoshop Effects: recreate the look of a medium format portrait
    How to mimic studio lighting for stylish portraits
    Time lapse photography: how to shoot stunning sequences without any hassle


    Posted on Sunday, January 6th, 2013 at 2:00 am under Photoshop Tutorials, Tutorials.

    Tags: ,

    Share This Page

    sssss