• How to embed animations into still images

    Article by Ey@el

    Original en français

    Today, there are many free online or downloadable applications to create animated GIF from videos. Such a commonplace manipulation, you might say. Let's use the idea to embed the animations you'll make (or find) into still images with a little bit of ingenuity for striking and totally original look. As always this tutorial is based on Paint Shop Pro which is the image editing software I use, but it's very easy to adapt it to any other program provided you master the basics. In order to do so, you'll find a link to download the companion application to Paint Shop Pro while it was still manufactured by JASC now available as abandonware (therefore free). It runs on Windows only (though Linux users might be able to run it on Wine?), but there are many similar applications that you may use instead. The important is to get the idea, then you can always find different ways to achieve it.


    - a photo featuring a item large enough to embed an animation into it (binoculars, camera lens, eyeglasses, mirror, window, TV, photo frame, etc.)

    - an animated GIF

    Animation Shop (installation required)

    Lens reflection (optional)


    1. Open animated GIF in Animation Shop. Select all frames (CTRL+A) and using File - Save images as menu, save as PSP file for Paint Shop Pro, making sure you check “Save as layers”. If you use another image editing software, save as JPG and you'll paste all images separately. Before importing, note duration under each frame as you will need it later on.

    2. Open your multi-layered PSP image in Paint Shop Pro. In the Layer palette, click on Image 0 at the bottom to activate it and add a new layer group. Drag the other layers into the group respecting their order so that the last image is still at the top. Resize all layers if necessary that is if your animation is to large to be contained in your chosen item.

    3. Open a copy of the picture you wish to embed the animation into. Resize if necessary and convert its unique layer to raster layer (essential in order to add a transparent zone).

    4. Now is the most difficul part: use the Freehand or Eraser tool depending on the complexity of the shape the area to outline and select the zone that needs to be erased in order to embed the animation. Once selected, press Delete (except if you used the Eraser).

    5. Copie the layer group from the animation and paste it into your picture. Move the single original layer on top. Reposition the animation correctly so that it fills the transparent area (since all layers are linked, moving a layer in the group will move the remaining others as well). I also rotated each layer in the group by 15 degrees clockwise so as to match the angle of the shot.

    6. If you embed your animation in a glass object like I did (binoculars/ camera lenses, eyeglasses or else), you may add a top layer to make it more realistic and paste (or create if you know to do it) a reflection. Open a copy of the provided lens reflection and resize it to match your outlined zone then copy it and paste it as a new layer just below your original still pic and above the layer group. For the above picture, I had to paste it twice as I have two lenses and set the layer blend mode to Overlay. Since the effect wasn't strong enough, I duplicated each lens layer and set the blend mode of the copies to Dodge. Actually, it all depends on the pictures you will use so you need to experiment and see what looks best.

    7. Now comes the most tedious step where all your layers must be visible and you need to copy merge them, launch Animation Shop (unless you didn't close it) and Paste as new animation. Back in Paint Shop Pro, toggle the visibility of the last layer of the group (the top one), Copy merge again and Paste as new frame before active frame in AS. Repeat these last steps, toggling the visibility of one more layer at a time respecting the descending order until you have used them all.

    8. In AS, your animation should have as many frames as the layers in your group. Select all and and set duration (ALT+Enter) according to the value you noted on step 1.

    9. Launch the Optimisation Wizard (via File menu) and choose “Animated GIF File” then click Next. Choose “Best Quality” then click Customise.

    Colour tab:
    - Number of colours: 255
    - Optimised Octree
    - Error diffusion

    Optimisation tab:
    - All options checked

    Click OK then Next to start optimisation. Now you can save your animation as GIF file via the File menu.

    Click on each picture to enlarge

    NOTE: For the above example, after outlining the camera lens, I contracted the size of my selection, chose a feather value equalling the value of my contraction (in pixels) so as to get a seamless result. Since the original lens surface was totally opaque no additional reflect was necessary.

    Have fun, let your imagination run wild and above all, be creative!


    Reproduction of the above contents is strictly prohibited.
    © lapensinemutine.eklablog.com. All rights reserved.

    Back to top

    Bottom of page

    « 5 tips for Recognizing Health Warning DreamsAbout reflexology »

    Tags Tags: , , , ,
  • Comments

    No comments yet

    Suivre le flux RSS des commentaires

    Add comment

    Name / User name:

    E-mail (optional):

    Website (optional):