Animated GIF's and Muse.

13 minutes to complete this task.
How to create and use animated GIF's with Adobe Muse and Photoshop. 13 minutes to complete this task.

WARNING: Lots of moving images in this article and a total over-use of animated GIF's

In this article we will show you how you can use animated GIF's with Muse.

To get the most out of this article you will need to download the GIF Player widget and the sample training files. If you are a 123muse member these are free to download.

If you are not a member, you need to join to get the files.

Example GIF Example GIF

What is a GIF?

There is no point reinventing the wheel on this one so check out the wiki article here.

GIF's Wiki Article

More importantly what can we use GIF files for and why are they useful?

GIF’s offer a great way of showcasing short animations without much effort or knowledge, whilst the color palette is restricted they are still a great way of conveying information in an animated format.

GIF’s are also multi-device compatible so that adds to their usefulness.

When would you use an animated GIF?

Let’s take a look at some examples. GIF’s are often used to show short viral video clips of funny cats or the most awkward fail of the day but they can offer more than that when put to good use in a page design.

Take a look at some of these excellent examples:


Macaw makes excellent use of animated GIFS to show users how to carry out simple tasks.



Invisionapp likewise makes use of GIF’s on their landing page to showcase how their app works.

Invisionapp GIF Example

Design and illustration


With a bit of thought and creativity you can put the hard working animated GIF format to use in your designs.

For illustration purposes take a look at some of these amazing examples in this excellent wired magazine article -

Wired magazine examples

Create an animated GIF with Photoshop.

Making an animated GIF in Photoshop is fairly straight forward, you will need to import your video file as layers, select the frame delay speed (the time between each animation frame), export the animation and then place it in Muse.

Take a look at the training video above to see just how to this. It’s easy, peasy.

Other animated GIF makers:

You could use all sorts of packages to create your GIF’s, we especially like GIF Brewery for MAC - GIF Brewery -

App Store: GIF Brewery

Here’s how to create an animated GIF with GIF Brewery:


GIF’s are here to stay and with a bit of planning and creativity you can use animated GIF’s to good effect in Adobe Muse and with our new GIF player it’s even easier.


If you need some quick GIF management tools for cropping, resizing and retiming your GIF's take a peek at this awesome online tool.

GIF Editor Tool

Article Author: Chris Kellett

Chris is one of the worlds leading experts in Adobe Muse and skilled in all aspects of HTML, CSS and Javascript a graphic designer, animator and film producer.

A freelance web developer for 19 years with 150+ muse templates and over 100 muse widgets (and counting) for other Muse template providers under his belt.

Skills Highlight:

Adobe Muse

Coding & Development

Graphic Design & UI

Looking for Adobe Muse Widgets? Looking to for Adobe Muse Training?
Copyright © 2015 - All rights reserved