{"id":8926,"date":"2014-08-09T05:03:33","date_gmt":"2014-08-08T19:03:33","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=8926"},"modified":"2025-08-13T12:04:04","modified_gmt":"2025-08-13T02:04:04","slug":"gimp-animated-gif-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/gimp-animated-gif-overlay-tutorial\/","title":{"rendered":"Gimp Animated GIF Overlay Tutorial"},"content":{"rendered":"
\"Gimp<\/a>

Gimp Animated GIF Overlay Tutorial<\/p><\/div>\n

We’ve come full circle with the “overlay”<\/i> concept blog posts and come back to Gimp to create an animated GIF<\/i><\/a> today where the animation is all bundled up into the one image resource called an “animated GIF” … so loved on tumblr<\/a>, for instance.<\/p>\n

For this, deferred to an excellent tutorial Create an Animated GIF Image with Gimp<\/a> … thanks heaps. Today we use the tutorial to get the idea, then realize that an image with a layer for each animation photograph (the photographs of which were derived from HTML\/Javascript Overlay Primer Tutorial<\/a>) can be used, in Gimp, to Export (or Save to) an animated GIF. We talked about layers in Gimp all that time ago, in this series of “overlay”<\/i> theme blog posts with Gimp Layers Primer Tutorial<\/a>. Another great way to do this, online, is via Gifpal<\/a>, and we have talked about this<\/a> before.<\/p>\n

So here is our tutorial<\/a>. At the end it was interesting that the original default speed between snapshots overthetop.gif<\/a> was too fast, and that a one second between slides produced overtop.gif<\/a> as a better result. That first learning phase resulted in y.gif<\/a><\/p>\n

Am sure you can imagine what the concept of a layer is with regard to image manipulation. Within Gimp, for beginners not used to this concept, you find yourself underestimating and underplaying what can be achieved with the various layers of a multi-layered image. In simplistic terms each layer has the functionality in Gimp to be treated as a whole new image, and this is the best way to think of it when trying to achieve what you want to achieve with Gimp.<\/p>\n

Link to Gimp “spiritual home” … here<\/a>.
\nLink to Gimp forum … here<\/a>.<\/p>\n

\n

Previous relevant Ajax Div Overlay Primer Tutorial<\/a> is shown below.<\/p>\n

\"Ajax<\/a>

Ajax Div Overlay Primer Tutorial<\/p><\/div>\n

Back to the recent overlay ideas (like PHP Iframe Overlay Primer Tutorial<\/a>) we’ve been doing lately at this blog, we want to show you today, the melding of HTML\/Javascript supervising Ajax<\/a> PHP in an div<\/a> HTML element. This is a powerful combination because the things you do in the div don’t have to be restricted to that div’s client functionality, because it is also using (server-side) PHP, and you can go around checking for database things or file things or things that go bump in the night.<\/p>\n

Today’s overlay concept is to append (we’ve equated this to “overlay”<\/i> today (is effectively the same)) a counter<\/i> (starting at zero) at the end of an HTML p or div tag’s value, and today’s tutorial embeds within that p or div tag (ahead of the appended counter<\/i>) an HTML img element defined in a get parameter “wording=”<\/i> (but it could easily have been some words, just as the counter<\/i> could have been an error message or status message … it is being derived by PHP, so many ideas are available to you.<\/p>\n

The major concepts, looking at the Ajax PHP supervised code’s point of view are:<\/p>\n