This just helped me create a fabulous animated GIF for a photography client…THANK YOU! I couldn’t figure out how to drag the source images so that they had the “X” like you talked about, or hit “enter” to create layers (I’m new to photoshop) so I just copied and pasted all the photos as layers. I’m not sure what I missed there. But it all worked out in the end. Thanks!!

Sweet! Did just what I wanted with this tutorial! Thanks so much, again.

Here’s what I made.

http://img688.imageshack.us/img688/1356/wigginslaughingmansig.gif

Brian, Thank you so much for your easy tutorial! I was able to put this together and upload it to my blog in all of 10 minutes! :) My only question is, how can I keep my images crisp and clear instead of looking fuzzy once I save it as a gif? On other blogs I have seen this same technique of still photos being animated and they are still sharp… any advice would be appreciated!

http://shortbutsweetlife.blogspot.com/2010/12/rawrrrr-rawrrr-rawrrr.html

Thanks again! Merry Christmas from Huntington Beach, CA!!

Dude. I love you so much right now. xD

Hi koijoy,
Make sure you go to File > Save for Web & Devices to save the GIF… If you just do File > Save As, it will ask for you to flatten layers, but that is not what you want. I hope that solves your problem.

Great tutorial, the step by step walk through made it so simple, managed to make a GIF contaning 10 layers in under 5mins :)

However I have a question, when I made my GIF is it possible to add another picture (or multiple) pictures into the current one? Tried to drag a new picture into the GIF hoping it added a new frame to the GIF. However it just corrupted the first layer(picture) in the GIF, hope you understand what I want to do and have a solution.

Best Regards
Rune

Was looking for a project like this. I found like 5 and they were complicated, I found this one and wow, you made it so easy to understand. Thanks for such a great super quick tutorial. :)

Hi misty,
Your welcome! I am not sure why it would not be working for your boss, I use a PC as well and gifs work fine in Firefox, Chrome, and Internet Explorer 8. Perhaps your boss has images blocked in the email program

Hi Chris,
It sounds like a problem with your program, I doubt you are doing something wrong (I personally have never seen this happen). There is a thread about the issue over at the Adobe forums: http://forums.adobe.com/message/2367719
It seems like the simplest solution is to just reinstall Photoshop. Hope that helps!

This was so incredibly helpful. THANK YOU!!!

This tutorial is great! But I have a few questions. I made a gif with 16 pics. I resized them so they are relatively small. And the time is just set to .1 secs each. Is there any reason why this shouldn’t work? It works when I preview them in Firefox but not when I upload them to my blog. Any ideas?

Thanx!

The Gifs that i do can never be as good as ones others make :(

this tutorial is so good!
thanks so much!

Great Tutorial.
I did this:
http://www.adamandtheasbos.com/home/pejazzle

Hi Jojo,
There is a thread about the issue over at the Adobe forums: http://forums.adobe.com/message/2367719
It seems like the simplest solution is to just reinstall Photoshop. Hope that helps!

You have no idea how long I’ve been searching for something like this!! Thank you so much :) I managed to make it work, but have a blank background sheet which I can’t delete. Do you know how I can get rid of it or how I can avoid it happening in the future? Many thanks in advance..

Hi, Have a very weird experience. whenever I save GIF even after playing with options around, its not clear. The images develop dirty pixels. How can that be avoided and keep the GIF crisp and original?
I also wanted to know how can we make the effect of fading to second image. Because current setting just swaps image. I will appreciate your help.

Thank you! This saved me an awful lot of time.
As a print designer, the thought of creating an animated GIF had me a bit confused!
Thanks again :)

ps I tried the lossy to zero but that doesn’t help

Thanx for the great tips. I was able to make some proper animated gifs for my blogs. The first try it took me all day to edit…second time just under an hour :)

Test again
http://img36.imageshack.us/img36/4639/wsig41.gif

Awesome! Thanks guys. Very easy fix.

Hi I have a question. I’m confused about this part:

Select all of the source images and drag them together into Photoshop. Release them over the general workspace. The first image should show up with a superimposed “X.” New to Photoshop CS5, the images will stack one at a time as layers in your current document when you hit “Enter.” (In previous versions, dragging the files into the workspace would simply open each one up as separate files)

I have CS5, but when I select the caps that I want and I open them, they open up separately and there is no “X” superimposed on the first image.

so i made the gif, tried to upload it to tumblr and it worked but it won’t play?! help~!

Thanks so much. I was getting ready to dig out my VERY old copy of JASC Animation Work Shop. I tried searching for “animat” in the PS help system and found virtually nothing. Sites like yours are really a great service to those of us still learning. Great you take time to give back.

Hi Greg, Thanks! To make a fade between frames, you need to crate the additional “in between” layers manually. I would make copies of your layers, and then use the Opacity value in the Layers palette, along with “Layer > Merge Down” to blend your images one at a time to end up with a set of frames, which when animated, appear to fade.

Hi, I need some help.
So I made a gif yesterday and everything was fine. But today I went to go make another one and where it says ‘Animation Frames’ it says ‘Animation Timeline’ How do I switch it back to frames?
Thanks so much if you can help me! (:

Toooooooooo Good. Such a Nice and Easy way of telling the trick. I made my gif in just 10 minutes. too goog. Thank You Very Much

Sheryl,
To make it twirl, you need to create a series of individual frames where the graphic in each frame is slightly rotated compared to the one before it. You can start of by duplicating your layer (right click the layer, click “duplicate”). Then start a rotation transform on that layer (Edit > Transform > Rotate). In the top toolbar, there will be a box where you can enter the angle you want to rotate, it will have an angle icon & the degree sign. Put in a number like, 20 degrees & hit Enter. Next, just duplicate that new layer & repeat the same process. You can pick the angle you want to rotate depending on how many frames you want for the final animation. A larger angle gives you fewer frames, & a smaller angle gives you more frames. Just make sure the angle you pick is divisible by 360 so it lines up nicely in the end. Hope that works for you!

I just wanted to say thanks you really helped out :-)

Hi so I was wondering what is wrong because I can’t drag pictures in to photoshop? Can I get help please? Thank you!

Hi Brian.
Thanks for posting this tutorial.
Do you know if the Photoshop animation/gif builder function requires Photoshop Extended? I’m on CS5 (but not Extended) and several of the options are grayed out or not functioning. I’ve done this before and am somewhat familiar with gifbuilders so I’m assuming its a software thing? Thanks, Peter

very helpful for me dude.I try this in adobe community help but there i cannot learn and atlast i find this article.thanks

Thanks dude. One question only: I need to hyperlink each frame to a web page. Can I do that in photoshop too?

This process is amazing i have tried this process by drawing circular balls any ways enjoyed creating this animation,
Thanks for sharing this post.

Great tutorial. Easy and very helpful. Thanks a mill.

Would have been a great tutorial, but I couldn’t find the “Animation palette menu (found at the top right corner of the palette)”.

Thanks, man! Just saved my life… the designer made a mistake in the design and I had to fix it :P

It was nice and easy ;-)

Hi Amy, In the Save for Web & Devices window, make sure that the file format is set to GIF (select it in the drop down box right below the word “Preset”). I’m not sure why it would save in an “image” folder, maybe your document has slices?

soft.music.job.xxx…

[...]Tutorial to create an Animated .GIF in Photoshop CS5 | briandalessandro.com[...]…

Brian, I would love some help. I am using CS5. I have blown up a .gif and can see the 16 frames in the animation window and 16 layers in my layers palette. I have added an item to each layer and then merged down my addition to the layer.

Unfortunately, although I can see the change in the layers palette, it is not represented in the animation window. Now when I play the animation, it just looks like a single frame, they are all the same.

What gives?

Hey Brian, I’m having some major issues.

When I play the GIF animation in the “Frame Animation” it’s too slow, even though it’s set to “no delay” between the frames. (It’s a clip from a video.)
But when I play the GIF in the “Timeline Animation” it’s perfect, then I go to save it with the “Save For Web and Devices”, I play it in that window, and it’s great again.
However, after I save it, and play it via IE, it’s just as slow as it was with the “Frame Animation” window.

I have no clue why it’s like that or what else to do. :/ Suggestions?

Hey Adriana, I wouldn’t recommend setting the frames to “no delay”… there has to be a certain delay in order for it to show the way you want, otherwise it may be inconsistent between programs (as you are seeing). If it is a video, and if the video plays at 30 frames per second, then you want your delay to be 1/30 = 0.033 s.

Marc, if you are also getting an HTML file, you might have slices set up in the document which means the image might be split up. I would make sure everything is on one slice, and save only as Images Only, not HTML and images.

Thank you for your excellent clear and simple instructions.

Hi Liliane,
Your welcome! The animation file can be opened & viewed in any web browser: Firefox, Chrome, Safari, Internet Explorer, etc.