How to make an animated gif in Adobe Photoshop Elements 6.0


Someone I know wanted to know how to do this, so I made this up for him.

First make a new document:

and then paste in a background (if you want to have a background on your animation, such as a planet as in my example).  After you have pasted in your background, delete the background layer (normally white in color) so that you are left only with the layer with your personal background image.

Next, paste in a foreground object (the part you want to animate), for this example I put in a x-wing :)

Next, duplicate the background layer many times as frames you want to have in your animation (I will have three frames in this animation, so I duplicated the background twice so I have three total, one for each frame).  Also, you will want to duplicate the foreground object you are going to animate, so you have one copy for each frame (again three for my purposes).

Once you have duplicated all the items you are going to animate, then move the objects you would like around the way you want to animate them.  For this example, I moved the three x-wings to be in a row, so in the animation the x-wing would fly through the picture.

Next, Ctrl click one background and one foreground element (one planet, and one x-wing for my example), and then right click and choose “Merge Layers.”  Do this for every frame of your animation (make sure all the layers are “visible” before you do this – you should be able to see the eye next to each layer).

Once you have merged the layers, you should have one layer for each frame of your animation.  Also, make sure they are in the order you want them to be for the animation, the first layer being first in the animation, and the top layer, being last in the animation.  You then should be able to see only one copy of your foreground object (as pictured below), with the other frames underneath (which you can view by making the current layer invisible).

Then click “File” -> “Save for Web…”

Set the presets as below (making sure it is on GIF and that “Animate” is selected.

And you then should be able to preview your animation and set preferences in the lower right hand corner of the window like so:

And then save the file and use as desired!  Here is the example animation in all its glory:

And that’s it!

About these ads

41 Responses to How to make an animated gif in Adobe Photoshop Elements 6.0

  1. [...] have Photoshop, not elements, but therer are plenty of guides online How to make an animated gif in Adobe Photoshop Elements 6.0 [- Grasping the Cross -] Making an animated gif in Photoshop Elements __________________ Join in, nominate a helpful [...]

  2. Katy says:

    Thanks for this simple explanation. I had thought my Elements wouldn’t be up to the job, but it’s great. I’m going to design some banners for someone, so now I can animate them! Maybe I’ll make some for our church website too ;)

  3. Andy says:

    Cool., thanks for sharing the information! I found it very helpful!

  4. maly says:

    didn’t work for me you didn’t put enough information i got lost in between

  5. nathanwells says:

    Hi Maly,

    Sorry you got lost – if you let me know where you got lost I can try and walk you through it.

  6. Confused... says:

    I did this but it didn’t work for me. I didn’t get lost; I did what you said but it just didn’t work. When I click on the animation in my files to play it, it’s just a picture. I clicked the animate button while I was making it too.

  7. nathanwells says:

    Sorry you are having trouble. Make sure each layer has something different on it. If the layers look the same, there will be no animation seen.

  8. Ashley Vancuran says:

    i know how to do the animation but if u have an animation with a name on it how do u make the name show up on the final photo

  9. misteriosguy says:

    ok, very cool and thanks alot but when i try to save a big gif file as a 1024×767 it sais its too big to animate. is it any way to avoid this?

    • nathanwells says:

      Thanks,
      I’m not sure – I’ve never tried to save an animation that big (they are normally for websites, and that would quite big…). If it’s saying it’s too bit it probably doesn’t support it. You might try something with flash…but that would be another program.

      Sorry!
      -nathan

  10. Kim says:

    I want to take a photos of an object. I want the object to turn around so that a person can see it from all sides. The background must move with it so all the shadows will be correct. I am going to place the item on a plate and turn it slightly taking a picture everytime I turn the tray. How can I do this?

  11. Thanks for the tutorial! Very easy to follow…. :)

  12. Ryan Frank says:

    Thanks for this tutorial. It was great!

  13. foobella says:

    Thanks. Very simple and now I am addicted to making them.

  14. Ghada says:

    thanks for the tutorial – its all working great, but I don’t have the option to change the delay speed…When I click on the dropdown menu, it won’t let me change it from 0.2 – any ideas why that may be? I’m gonna try a restart :)

  15. Ghada says:

    Ok – so I figured out that if I just copy my 3 layers, it will achieve the same effect. That it, the animation had 3 layers, now it has 2 copies of each layer making it last longer :)

  16. Mark says:

    Found this really helpful thank you. Good old google for ranking this top and rightly so!

  17. Terry B says:

    Makes sense to me! I’m still learning the program. But I would like to do a short cartoon. I want to add sound also. Is there a limit to the number of frames or file size for web? The reason I ask is I want the movement to be a little more fluid. Any info would be greatly appreciated, Thanks!

    • nathanwells says:

      Hi Terry. If you are looking to do something like a cartoon with sound, probably the only way is to make a movie, or do something in Adobe Flash. Animated gif’s are somewhat limited. You can normally change the frame rate of an animated gif, but I don’t think Elements supports that feature. You can try something like GIMP (http://www.gimp.org) and see if that meets your needs. Thanks for stopping by.

  18. Rudi G. says:

    Great tutorial! My only issue is my completed GIF runs too fast, and the drop-down menu for Frame Delay in the Save for Web window doesn’t seem to be active. How can I adjust the time each photo displays (this is a slide show of photos).

  19. stylembe says:

    Very confusing. I have an image that I want to animate. I am making the eyes in the image glow more and more in the animation. It would be great if you could give a demo where there is no foreground image. Keeping it very simple. Can you give a demo where it is one image that changes slightly in a loop of 3. Would appreciate it.

    • nathanwells says:

      Hi Stylemdbe,

      If you don’t want a foreground image, just treat each layer as a frame in your animation. So if you want eyes that glow – duplicate the eyes so you have a few layers with them, and then in each layer change the glow effect so that it slowly grows.

  20. olivier says:

    merci beaucoup for the help.
    it was very helpful
    Olivier

  21. paul says:

    thanks for the simple explanation

  22. Thomas says:

    Great guide. Elements can do way more than i thought!
    Now for creating some gif banners.

  23. Apollo says:

    are the three Xwings different different layers each? or do you have to put them in the same layer?

  24. Paul says:

    I too, had problems adjusting timing of the gif images, even in PS Elements 9. Here’s my kludgy solution: duplicate the same layers as many times as you need to “slow” the visible transitions. I know it’s a bigger image file, but at least it worked.

  25. Rachel says:

    When I click “save for web” nothing happens.

  26. Mike Turpin says:

    Is it possible to have a fixed background layer which is pervasive, and just have your 3 x-wing layers animate in the GIF?

    I figure that this must be less pixels to store, but maybe GIFs don’t allow this.

    Thanks,

    Mike

  27. technologically frustrated says:

    So i followed all your steps, and everything was going fine until i reached the “save for web” stage. When I tried saving it for the web, i was unable to select “animate” at all >.<

  28. Raymond says:

    ..thanks… i got it.., i posted my first GIF file in my blog… http://www.tumblr.com/blog/raymondrams … thank you…,

  29. sam says:

    Hi, it’s going well until I try and save it, and then i can’t click animate?

  30. Jess says:

    I too am stuck in the final stage where I try to tick “animate” and save it. It is too large a file and even when I resize it, it will not work. :(

  31. Nicholas says:

    Thank you for sharing these instructions. Still helping me 5 years later.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: