Gimptalk - Premier Gimp Community: Creating animated jpg's for web publish - Gimptalk - Premier Gimp Community

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Creating animated jpg's for web publish Using gimp to add touch of animation to photo stills

#1 User is offline   ximonn 

  • Newbie
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 24-April 15

Posted 24 April 2015 - 09:34 AM


This short tutorial is about adding a touch of animation to photographs to emphasize their story and to touch the viewer.

Examples you can find here:

* Intermediate skill level with Gimp (I won't go into details, assuming you know your way around gimp)
* Intermediate or better Photography / videography skills - to create the content
* At least very basic understanding of html & css
* At least very basic understanding of javascript
* Access to a server where you can place html content with javascript (if you use wordpress/joomla/drupal -> there is no plugin yet to make this easy, suggest to upload the single page (e.g. fast.html) and include that page as iframe in your content.

Check the high level tutorial (general principle how the jpg's are animated):

To create your own:

Step 1:
* Capture base image, use a tripod - as you want to capture the animation from the exact same position.

Step 2:
* Capture animation frames by
1) using burst mode photography (e.g. in my case 10 frames per second on OM-D EM-1)
2) capturing a movie fragment, extract frames in png format:
A) mplayer -nosound -vo png:z=9
B) ffmpeg -i -vcodec copy -vbsf mjpeg2jpeg frame_%d.jpg

Step 3:
Check alignment of the images
* Open the base image in Gimp and then from file open the animation frames as layers.
* Now zoom to 200% and look for a contrasting element (a hard boundary in the picture)
* Check if you see horizontal or vertical shift between frames: Press shift - left mouse on the various eye symbols in the layer menu to jump between layers

Step 3B:
* If your images are not aligned properly - or if you used a different camera for the base image and the animation frames, align the images.
* The align layers feature in Gimp is not suited for this specialist operation, we use Hugin for this.
* In hugin:
1) Open all your images
2) Align the images
3) In the photo overview, right click a photo and select 'Reset' -> 'Reset photomatric parameters'
4) Go to the 'fast preview' - check the 'crop' e.g. use 'Autocrop'
5) In expert mode, go to the 'stitcher tab'
5.1) check canvas size & crop (use the buttons to optimize if needed)
5.2.) deselect all options, but select "Remapped images - Exposure corrected, low dynamic range'
5.3.) Stitch (this may take a while) - the result should be a perfectly aligned stack of images.
5.4.) open the aligned images as layers in gimp

Step 4)
* Export your base image

Step 5)
* Select the area (square) which contains the animation
* Write down the x,y and width & height parameters of the selection (you need these later on)
* Crop to this selection

Step 6)
* Add a layer to the top, with transparency
* In this new layer use a hard brush (hard edge is important)
* To draw a mask in 100% green (red and blue at 0)
* Keep at least 16 to 32 pixels as margin around the animated area - if you want hard boundaries between still area and the animated area - you need to create these in gimp, e.g. by using another layer with a mask (can't be done by the animation effect later on - usually this is not needed)
* Export each frame as png or optionally as jpg at high quality

Step 6b)
* If your animation changes size/position - be sure to adapt the mask between frames to prevent bits of the previous frame to remain on the image.

Step 7)
* Use the base image and the animation frames (images) with simegraph JS - to create the animated jpg
* Follow the tutorial here:

Step 8)
* Create the composite image following the simegraph JS tutorial (using the cut.html)
* In the browser right mouse, save as -> composite.png
* Open the composite.png in gimp
* Optionally crop the image (write down the width/height - update fast.html canvasVirtual size, and the size in the impage.css)
* Export to composite.jpg, at high quality (e.g. 85% or better)

Step 9)
* Check the fast.html, use the simegraph1.js lib and place the files on your websever

Hope this works for you, I had a lot of pleasure in creating the animations with Gimp!
If you run into difficulties - let me know and I may be able to help you.

Share this topic:

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic