Let’s say you have a folder full of images that you want to sequence together as frames in an animated GIF. You can find special programs online to do this, but with some of the new features of Adobe Photoshop, it’s quite fast and simple.

Gather the images you want to animate into one folder.

Click File > Scripts > Load Files into Stack. When the “Load Layers” window pops up, click Browse to select & open your image files, and then click OK. This should import the files you selected as individual layers in your document. Rearrange the layers into the correct order, if necessary.

This next step differs depending on what version of Photoshop you have:

For Photoshop CS5: Open the Animation palette (Window > Animation).

For Photoshop CS6: Open the Timeline palette (Window > Timeline ).

For Photoshop CC (Creative Cloud): Open the Timeline palette (Window > Timeline ). In the middle of the palette, you will see a button with a drop-down allowing you to choose either “Create Video Timeline” or “Create Frame Animation.” You want to choose & then click the Create Frame Animation button.

In the Animation/Timeline palette menu (found under this button at the top right corner of the palette: ), click Make Frames From Layers. You can also click Reverse Frames if needed. This will take each layer in your document and set it as an individual frame in the animation.

Now we will change the duration of each frame. Make sure you are in frame view, not timeline view. If you do not see thumbnail icons of all your layers in the Animation/Timeline palette, click the icon in the lower right corner (the hover text will say “Convert to Frame Animation”). Now, back in the Animation/Timeline palette menu, click Select All Frames.

Click the drop down button just underneath each frame image (circled in red in the image below). This will bring up a menu where you can set a duration. Since all frames are selected, all frames will be set to the same time. Each frame can be changed individually, if desired.

The drop down button circled in black in the image above will change how many times the animation will loop; either a fixed number of times, or forever.

Once the frame order and timing as been set up, it is time to save the image! Click File > Save for Web & Devices, make sure the file format is set to GIF, change any other options if needed, and save the image!

You will now have an animated GIF taken from a folder full of the individual frames. In fact, as long as each frame exists as a separate layer in Photoshop, the Animation/Timeline palette can be used to create the GIF. But, with CS5, CS6, or Creative Cloud (CC) it is easy to make separate layers from a folder of the individual frames as described.

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!!

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!

Your welcome, Shari! Glad my tutorial could help. With large size gifs like you have it is hard to get the clarity of a jpg, because gifs are limited to 256 colors at most. I would recommend playing around with the settings in the “Save for Web & Devices” window from the last step. Make sure the gif is using 256 colors. Also try changing the amount of dither & the dither algorithm (Diffusion, Pattern, or Noise) to see what looks best to you. Usually 100% dither using Diffusion is the default but it may depend on your image. Hope that helps!

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.

Hi Rune,
Thanks! Glad it could help. As for your question, I think I understand. If you are using CS5 and you drag another image into your current Photoshop document, it will appear with resizing handles and a superimposed “X.” Just hit Enter on your keyboard at this point & it should crate a new layer. If this doesn’t work (or if you have an earlier version), you can always create a new layer manually by going to the menu Layer > New > Layer. Then try adding your new image. It should put your image in the new empty layer instead of in your other layers.

hi there,
thanks for the great tutorial! i just have a question…
after saving it as a gif when i drag the gif into firefox it works perfectly but my boss who is on pc says its not working?
these gifs i have created are supposed to be embedded into e-mails and sent out as mailers to clients?

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!

Thanks a ton! all the videos on youtube are stupid and dont talk about simple image animations. i usually learn better watching first then doing as apposed to reading about something but you broke it down simple as can be! thanks again!

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?

Hi Enoir,
Thanks! If the gif works when you preview in Firefox, then there can’t be anything wrong with the file itself. I would guess that your blog software is improperly editing or resizing the image, causing it to lose the animation. If you have FTP access to your site, you could try uploading the file manually. Otherwise, you could try one of the free image hosting services out there & see if it works. 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 Emma,
Your welcome! Your should be able to delete the background layer by right clicking it in the Layers palette and then clicking “Delete Layer.” Double clicking the background layer will also unlock it & convert it to a regular layer which you can then edit if needed. I hope that solves your problem!

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.

Hi Vineet,
In the “Save for Web & Devices” box, lower the option called “Lossy” down to zero. It will make the file size bigger, but it should avoid the “dirty” pixels which I think you are describing.
To make two images fade, you will need to create 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.
Hope that helps!

I have just upgraded to CS5.1 and when I use the animation of an item on a white background I am getting a ghost image. (see http://www.teak.com/products/1ASR.gif). Any idea what is causing it?
cheers for the great tutorial.

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.

Hi Kahlia,
There is another way you can try… go to File > Scripts > Load Files into Stack. From there, click Browse to load your image files & click OK. This should import the files you select as layers in your document & you can proceed with the rest of the animation steps. Hope that works for you!

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! (:

Mark,
The “Make Frames From Layers” is found in the menu which displays after you click the small icon at the top right corner of the Animation palette. The icon is small, but it is a little down arrow next to four horizontal lines.

Ariel,
In that same menu I just described (the Animation palette menu at the top right corner of the palette), click “Convert to Frame Animation” to switch back to frames. You can reverse this back by going into the menu again and clicking “Convert to Timeline.”

Making the photo GIF was so easy. Now how would you take a swirl illustration and make it turn continuously clockwise so it looks like it is in constant rotation? Sort of like when you watch a hurricane on the news but this is just from a single illustration?

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!

Hi Kristen,
There is another way you can try… go to File > Scripts > Load Files into Stack. From there, click Browse to load your image files & click OK. This should import the files you select as layers in your document & you can proceed with the rest of the animation steps.

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

Making animated gifs sure is fun. You can also adjust other animated gifs, by exploding an existing animated gif into seperate images, and the use the seperate imageas of your choice to make your own….. Exploding animated gifs can be done for free on http://www.gifexploder.com — real easy!

I tried the step by step but I’m not able to save it as the animated gif. It kept saving as a JPG and puts it in the “image” folder which kills me. Not sure if maybe something is wrong with my CS5?? I used to be able to do it in PS3?? HELP!

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?

I created the animation with PSDs and the .html file plays fine and looks good on my computer through Internet Explorer. However, when I attach it to an email and view it, the image doesn’t load at all (red “x”). It also won’t load on other computers. What am I doing wrong? Please help!

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.

Hey Howie,
I am not sure why that would happen, I just tested merging a different layer to an existing layer, and the changes are automatically reflected in the animation window. Are you sure you don’t have an extra layer somewhere you don’t expect? Try changing the animation window to the Timeline view, then do “Make frames from layers” again, and see if that fixes it.

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.

Thanks, awesome post. However all seems fine including the files saving however I cannot open them in safari, preview (‘it may be damaged or use a file format that preview does not recognise’) or anything else, and when I upload to Facebook it just shows an empty space. Any ideas? Many thanks! The file is saving as a .gif and .html version, and plays fine in all windows in CS5 up until the final file!

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.

I have been looking at doing something like this for ages but despite trying lots of different tutorials I have never seen any as easy as this one.
Thank you so much.
Are there any ways of changing the transition effect to try and ‘soften’ it up a bit?

Hey, I managed to create the gif thanks to this ridiculously user-friendly tutorial, but when I hit “Save for web and devices” I get a pop up from photoshop saying the file is too big to use for web and devices? Any ideas what I’m doing wrong? Maybe the images need to be resized? How?? Help!!

Hi Hafsa,
There is nothing wrong, that just means the image is large. Yes, you can resize the image to make it smaller, or just ignore the warning & continue. It will work, but it may slow down your computer & take a long time to load.

Hi! :) My gift isn´t working… I’m making all the steps, saving for web anda devices and nothing. I get on file.html and a folder named images. Is this right? My folder only contains one image, the first frame of the animation… Heeeelp!

Hi Joana,
Try opening the image in a web browser like Firefox, Chrome, or Internet Explorer. If the animation was saved, it will definitely show there. Windows Photo Viewer (if that is what you are displaying the image with) will not show the animation, only the first frame.

Thank you very much for the wonderful and intuitive tutorial, it takes some carefull thinking to present it in a way easy to understand and you managed it beautifully. People like you contribute to a better world with their generosity in sharing knowledge

Thank you for posting your tutorial. However, I couldn’t get it to work as you describe using Photoshop Extended CS6 on a Mac. The problem is that when you first open the Timeline palette, the drop-down menu in the upper right hand corner of the palette does not have an option to “Make Frames From Layers”.

Quite by accident, I found a way to solve this issue, and once I did, your instructions work fine. For anyone else who is having this problem, here’s what worked for me:

1. When the timeline palette opens, you will see an arrow in the center of the palette. When you click on this arrow,a drop-down menu appears with two choices:”Create Video Timeline” and “Create Frame Animation”.

2. Select “Create Frame Animation.” After doing this, you will see a button to the left of the arrow that says “Create Frame Animation”.

3. Click on the button that says “Create Frame Animation” and your first frame will appear in the Timeline palette.

4. You will now be able to select “Make Frames From Layers” from the drop-down menu in the upper right hand corner.

5. Follow Brian’s instructions for the rest of the process.

I hope this helps someone else who might be having problems creating animated gifs in Photoshop CS6 on a Mac.

Thank you! When you know which buttons hide the menus, it’s easy. Without your explanation I was totally lost. Felt like using a 40 ton truck to drive to the grocery store. Photoshop is huge, often there are too many possibilities.

Thanks for this Brian, had been having trouble with “ghosting text” in an animated gif made in Fireworks when running in IE, didn’t realise you could animate in Photoshop! Once animated there, AND de-selecting the Transparency check box, all works fine
Cheers from NZ

When I follow these steps I get an html file and a gif file. the gif file just displays the first image, but I can tell by the file size that it contains all the images. When I double click on the html file, it displays the animated gif. Is there any way to save this as one icon? I am used to seeing files with a .gif extension that show the animation when I click on it, but I don’t know how to get there.

I’m saving it exactly as this says to, and this isn’t my first time making an animation. However, whenever I save a gif and then try to upload it to a site like Photobucket or Tumblr, which support gif images, it’s just a still of the first frame. This isn’t the first time it’s happened to me, and the only way I was able to “fix” it before was to keep trying to save over and over again. After about the 10th time of saving (exactly the same way each time), it worked. I see other people are having the same problem, and I really highly doubt it’s the websites they’re uploading to. CS5 has a lot of saving issues. Is there some trick to getting it to work correctly without wasting another 4 hours saving over and over again?

Diane,
In Windows, the default Photo Viewer does not show the animation if you simply open the GIF. If you open the GIF in a web browser however, then you will see the animation.
Jessica,
I’m sorry, I am not really sure. If you are saving the file exactly the same way, it shouldn’t ‘sometimes’ work and ‘sometimes’ not. Perhaps it is a problem with the CS5 installation, and a re-install might help. But that would be a guess.

I need your help please. I have made my gif in CS5 exactly 6 secs. But i dunno why, when I pass it to my client, he said it’s actually 11 secs. He said it might be a default thing somewhere. But i don’t have any clue how to fix it. Been googling what’s the problem, but can’t find any. If you know anything about it, that will be great. Your quick help is greatly appreciated. Thank you! :)

Great tutorial. Just what I needed. Enabled me to do a animated banner very quickly and using photoshop which I already had without the need to look for specialist software. I didn;t even realise Photoshop could do this.

Please help. When I select the images, then click OK, the program doesn’t load them in, just stays blank as it was before. No matter how many times I try, it’s still the same. But it doesn’t freeze. Could re-installing help, or I shoulnd’t do that? Thank you, and sorry for my english.

First of all, you’re such a patient guy. I had no trouble making the gif … BUT… I had 2 questions:

1. I e-mailed so I can open it in my Blackberry but when I downloaded it it came as a .jpg. I tried e-mailing some other .gif files that I now to work on BB and they worked just fine. I uploaded it to Facebook and it also went there as a pic. So I’m missing something, What did I do wrong?

2. This is my very first time with .gif files, is it only possible to run them from a web browser? It doesn’t move on finder preview and if I open it from there it opens as a .pdf

Hi Gustavo,
Thanks, I’m glad it was a help!
1. I do know that Facebook won’t allow animated GIFs, it converts the file to a static picture first. I suspect a similar thing is happening with your BlackBerry.
2. Yes, in Windows, the default image viewer won’t show the animation. But, you can open any web browser and drag the GIF into the browser and see the animation.

I followed every step and when I try to save my animation a window pops up with the following error: “Could not complete this operation. An unknown error has occured.” I also uploaded a printscreen. If you get the time please have a look. http://imageshack.us/f/33/printpto.jpg/

Hi Alexandra,
I took a look at your screenshot. It looks like your image is over 3500×4900 pixels… that is much too large for an animated GIF! Each individual frame would be about 8.6 MB, which means the entire animation would be on the order of tens or hundreds of megabytes, depending on how many frames you have. Photoshop likely can’t handle that amount, and even if it could, it wouldn’t be practical if you want to share the GIF. Before going to the Save For Web screen, resize your image smaller (Image > Image Size). Somewhere around 400×300 should be good for an animated GIF. I hope that helps!

Hello! Awesome tutorial but I have a huge, undissolvable problem!! When I save it simply as .gif without HTML thing, it is just a flat picture (I save trough web&devices). Not moving or anything. But I have to present it tomorrow on other PC and I tried that but it’s just no working! I can’t save it in my e-mail, or send it to anyone so it would work. And I’m getting desperate! What can I do?? (I work with CS5)

I have a question that is gonna make me seem like a complete amateur, but I’m new to photoshop so bear with me. I have cs6, and I cannot find the option for “make frames from layers”. The only menu I can find in the timeline palette doesn’t mention it at all :'(

I cannot find the Animation/Timeline palette menu. I opened Windows-Timeline as you described but cannot locate the Animation/Timeline palette menu in the top right-hand corner of the palette. Can you please direct me?

We have had many issues in the past with GIF’s. However, just recently with CS6 we had major issues. In fact, we spent multiple days on the phone with Adobe only to find out they could not resolve the issue either. That led us into discovering and testing our own work arounds. So we created a tutorial and put it up on our blog on how to work with GIF’s and save them. We give you a few options, knowing one of them will work! Check it out http://stoneleighphotography.com/making-a-gif-in-cs6-photoshop/

I have been able to create a gif just fine in Photoshop CS5.1 on a Mac.
Saving it seems to be the problem. It saves as this kind of file:
file://localhost/Users/dayes/Desktop/SITE-Membership-logos_1GREEN5.html
Or I can save it as a .gif and then it only opens in Preview and it is not animated.

Ok I’m very new to this, I have loaded 5 images, I can get through all the steps however when I get to the finished product all of my images are partially cut off or chopped off at the head or arms etc. I’m guessing that there is a sizing issue here, it looks like when I preview the images are all of different sizes and shapes as well. What am I doing wrong??? Any thoughts, thanks

I am so tired of this. I can’t find the freaking ‘convert to timeline/convert to frame animation’ button. I swear I clicked on everything that was clickable, checked every single drop-down menu. The option to make frames from layers works just fine, but the lack of that button makes it impossible for me to do anything.

Thanks so much for the step-by-step instructions. This was my first animated gif and I was happy to see that it worked on the first try. My only question is: How do I have the animation go in the reverse direction? I rearranged my frames to be the opposite as they were and it still goes counter-clockwise when I need it to go clockwise.

thanks for this.. I tried and tried with other methods in CS6 btu this is, so far the only thing that works for me for time lapse. No matter what peole show in their tuts I can’t get the image sequence thing to work at all. It just loads the first file. so thanks for this!!! I can still export as video and not gif.

In the Animation/Timeline palette menu (found at the top right corner of the palette), click Make Frames From Layers. I can’t find this top right corner it speaks of i can’t get passed step 4 please help

I have an unusual problem. i am unable to even get past step one. once i Click File > Scripts > Load Files into Stack, this message pops up. ( http://i47.tinypic.com/2lc6y3d.png ) if someone could please help me figure out what to do, i would appreciate it so much.

Thank you for this simple wonderful tutorial. My problem is that I’ve made an animated welcome sign in colours and because it’s on a black background there is a white outline on the edge of each letter even though the edge has a black border. I’m not really sure what the settings should be when using save as for web. Not understanding interlaced, transparency etc. settings. I would be grateful for any advice. Thanks in advance.

Hi Rosa,
It sounds like the white outline is coming from the letters in your animation – the letters in each frame must have some white pixels outside the black edge. If it doesn’t take too long, the simplest method would be to take the eraser tool and delete the white pixels from each frame. Don’t worry about the interlaced option, and transparency means that areas with no pixel color information will “see through” to the background behind your final GIF when it is displayed.

Great tutorial, thanks. I found this via Google and it really helped me with a work project. Photoshop lets me see the filesize of the animated gif before creating it, which helps a lot when you’re trying to sneak a gif in under a Google animated ad limitation (50kb). Super helpful and straightforward.

Hi – thanks – this was very helpful as I have upgraded to CS6 and could not work out the ‘timeline’ pallet. Now all I need is to add sound to my animated gif but it’s not working – can you help please.
Cathriona

Thanks for the tutorial! Ever since i got Ps cs6,i was looking for websites or videos to help me make animated gifs,but none of them helped.When i found your tutorial,it helped me step-by-step.Thanks a million :)

In the Animation/Timeline palette menu (found at the top right corner of the palette), click Make Frames From Layers. You can also click Reverse Frames if needed. This will take each layer in your document and set it as an individual frame in the animation.

In CS6 that option is grayed out until you click create frame animation in the box that appears at the bottom. If the box says create video timeline, just click the down arrow and change to Create Frame Animation, then the menu item is usable.

Thanks for the great tutorial, It allowed me to replace some Java apps now that Java keeps scaring my clients with asking if it can run the application.

To those STILL having issues even after the “correction” above to the “Make Frames from layers” issue- after a million tries I figured out what I’m not doing right- this may help for those other folk who aren’t regular photoshop users. First follow the below steps from Mark….

“June 28th, 2012 at 9:55 pm

Mark Says:
Hi Brian,

Thank you for posting your tutorial. However, I couldn’t get it to work as you describe using Photoshop Extended CS6 on a Mac. The problem is that when you first open the Timeline palette, the drop-down menu in the upper right hand corner of the palette does not have an option to “Make Frames From Layers”.

Quite by accident, I found a way to solve this issue, and once I did, your instructions work fine. For anyone else who is having this problem, here’s what worked for me:

1. When the timeline palette opens, you will see an arrow in the center of the palette. When you click on this arrow,a drop-down menu appears with two choices:”Create Video Timeline” and “Create Frame Animation”.

2. Select “Create Frame Animation.” After doing this, you will see a button to the left of the arrow that says “Create Frame Animation”.

3. Click on the button that says “Create Frame Animation” and your first frame will appear in the Timeline palette.

4. You will now be able to select “Make Frames From Layers” from the drop-down menu in the upper right hand corner.

5. Follow Brian’s instructions for the rest of the process.

I hope this helps someone else who might be having problems creating animated gifs in Photoshop CS6 on a Mac.”

Now, the thing I was NOT doing, when you select “Create Frame animation” from the drop down- that itself isn’t enough- you need to actually CLICK that as well after selecting it. THIS makes the option appear to Make Frames from layers if you then click the palette as suggested. For those unsure, the palette is the 3 little lines and arrow, on the right hand side of your timeline bar at the bottom. I think all these mentions of “top right” are confusing people to look at the top right of the actual page. Hope this helps!!

You know, in CS6 often times the minute you add a fade function, you can’t save the GIF file. If you have troubles with this, we spent quite a long time with the reps at adobe only to find out they too could not figure out how to make it work. So we went and figured out some solutions. If you want check them out at our website: http://stoneleighphotography.com/making-a-gif-in-cs6-photoshop/

I’m trying to create Photoshop Action that will create GIF files, however during the Action recording process all goes well, but when I start the Action for new set of files it saves it as html format even though I have specified to save images only.

I’m using PS6 extended.
In action recording I’m using Scripts >> Load files into stack, and then your instructions.

Great instructions. I made one animated gif and it worked perfect. On my second I cannot seem to get all three frames to show up even though all three layers are there. I followed the same steps but cannot get all the frames to show up so I can put how many seconds I want them to show when looping. Please help.

Thank you so much, it took only minutes!
I had just told the customer “I don’t do animation” and thought it was time to learn.
I’m embarrassed I didn’t learn this sooner. So grateful for you sharing this step-by-step tutorial.

hi Brian, thanks for the tutorial!! i’ve got my gif, which saved as “churchbanner.html” — when I right click to open the image in chrome, the gif plays fine. when i upload the “churchbanner.html” file to my website, all i get is a blank box. what am i missing? do i need to upload other files? am i saving it incorrectly?

Thank you so much. You explained that fantastically and I’m winning this side trying to get through this assignment. I have also now learned how to create blinking text which I need to add to my Annimated gif image. Do you have any tutorials on how to do this. When I drop my blinking text on my annimated gif it stops blinking!!!!! help and thanks again for sharing your knowledge with us.

Hi Brian, Thank you SO much for this tutorial – it is worth it’s weight in gold!!! I have a question – I created an animated gif today with only two frames, and saved it as small as possible (32, no dither), but it’s still much too big. The animated gif is currently 86kb, and needs to be less than 40kb! The total size of each frame is 970×250 at 72 ppi, and each file is 16kb exported as a lorez jpg. I’m on a Mac, using Photoshop 5.5, and I looked into optimization programs to reduce the animated gif file size, but could only find them for pcs. Do you have any suggestions??

Thanks, great tutorial.
I had problems when including the gif as part of email: those with web email clients can seeing it fine, but those with Outlook just get a static frame.
My workaround was to upload the email contents to the cloud and add a phrase at beginning of email to the effect “if can’t see image correctly please see it on web browser (link)”.
Any simpler suggestion?

This was the best tutorial I’ve ever followed. One thing: when I “Save for web” I click the gif option but it ends up saving as a html file. What am I doing wrong there? It works great but nobody in my office can open it to send a proof to a client and I’m not sure our website will accept posting of anything but a gif file (haven’t tried that yet)

Hi Patrick… Thanks! After you click ‘Save’ in the ‘Save for Web’ window, a dialog box pops up asking you where to save the file. At the bottom of that dialog, you should see an option for ‘Save As Type.’ If you click that dropdown box, you should be able to switch from saving as a .html to saving as a .gif.

So that’s what I was missing.
“”””Now, the thing I was NOT doing, when you select “Create Frame animation” from the drop down- that itself isn’t enough- you need to actually CLICK that as well after selecting it. “”””
I have no hair left on my head.
Maha

To those STILL having issues even after the “correction” above to the “Make Frames from layers” issue- after a million tries I figured out what I’m not doing right- this may help for those other folk who aren’t regular photoshop users. First follow the below steps from Mark….

“June 28th, 2012 at 9:55 pm

Mark Says:
Hi Brian,

Thank you for posting your tutorial. However, I couldn’t get it to work as you describe using Photoshop Extended CS6 on a Mac. The problem is that when you first open the Timeline palette, the drop-down menu in the upper right hand corner of the palette does not have an option to “Make Frames From Layers”.

Quite by accident, I found a way to solve this issue, and once I did, your instructions work fine. For anyone else who is having this problem, here’s what worked for me:

1. When the timeline palette opens, you will see an arrow in the center of the palette. When you click on this arrow,a drop-down menu appears with two choices:”Create Video Timeline” and “Create Frame Animation”.

2. Select “Create Frame Animation.” After doing this, you will see a button to the left of the arrow that says “Create Frame Animation”.

3. Click on the button that says “Create Frame Animation” and your first frame will appear in the Timeline palette.

4. You will now be able to select “Make Frames From Layers” from the drop-down menu in the upper right hand corner.

5. Follow Brian’s instructions for the rest of the process.

I hope this helps someone else who might be having problems creating animated gifs in Photoshop CS6 on a Mac.”

Now, the thing I was NOT doing, when you select “Create Frame animation” from the drop down- that itself isn’t enough- you need to actually CLICK that as well after selecting it. THIS makes the option appear to Make Frames from layers if you then click the palette as suggested. For those unsure, the palette is the 3 little lines and arrow, on the right hand side of your timeline bar at the bottom. I think all these mentions of “top right” are confusing people to look at the top right of the actual page. Hope this helps!!

I have gotten so far as all the files are loaded, but when I click Timeline, the images don’t go to the time line and there is no option to Make Frames from Layers in that side menu. What could I be doing wrong? I have CS6. I’ll be very grateful for your reply!

Is there a way to apply edits to all the photos in the timeline? I am uploading unedited photos of adding ingredients to a blender and I would like to apply and edit to all the frames (i.e. increasing exposure, upping saturation, etc.). Do I have to do this before loading them in a stack or can you apply one edit to all frames?

Thanks! Four years later, and this tutorial is still helpful! (FYI, in Photoshop CC 2014, when I first created a timeline, it brought in the frame as clips, and I had to select “Convert clips to frames” and then everything else worked as you describe.)

Wow, nicxe tuts on GIF, i am stuck at 8 th step when when i saved, it only gives still image instead of animated image, ops thats my fault as i am not saving the file as GIF, so now problem solved, Nice and wonderful tutorial thanks a lot lot lot, It really help me a lot for my project

Brian Thank you for a very clearly laid out tute. I have a question regarding controlling size, I need this gif set at 600 x375 mm 72 dpi to be part of a emailed new letetr. So size is critical along with maintaining quality, any suggestions beyond just making the initial files smaller. My initial Giff is about 15 Mb at 100 dpi. Also once I have the gif, and it’s running on my machine, to my satisfaction how do I get it to the client to use. Do I need to export in some way. I look forward to your reply.

Hi there is it possible to create an animated Gif and make it play when someone hovers over the Gif and then stops when they move away from the gif, is it possible to do this without coding but natively in PS or another Gif making program

I’m using Photoshop CC. The last step is go to file, then save for web and devices, and that’s what I can’t find. I can go to file, then export, then save for web (legacy) though, which opens a save for web box. Problem is when I hit save, then go to the gif, it’s running at half speed. I have each frame in the timeline set for no delay. I must have something screwed up somewhere. Any ideas?

Hello , i know the steps, but lately my gif images are coming out in slow mode.
I have 168 – 230 images ,all resized but when i save it in “Save for Web & Devices” , step 8.
I get slow image.
I saves one gif image here:http://i.giphy.com/3o7WTGlGACl6z93ISA.gif

Am i doing anything wrong. Its really slow, even after extracting all the images frame by frame from a video clip.
Can anyone advice me.

Thank you so much !
I spent 3 hours searching how export a GIF with transparency in Premiere Pro.
I exported my sequence as PNG (with alpha) from Premiere Pro, then open all theses PNG with your method. This is perfect !

Your step by step instructions are super easy to follow.
After saving for web and devices, I can see the preview in the folder moving, but when I click on the gif, it goes into the preview ap and is seen as a stack of photos, not a moving gif. Any ideas?
thanks

hi good pm
I created a GIF in Adobe photoshop cs6 and i had save it in Save for Web. The file is working and it is in a HTML form I am planning to upload the file but it is not working. need some help bro Thanks.

Thank goodness I found this. I’ve done this before, but I always forget the details. My CS5 can’t find the help file (I hope it’s not gone forever!) and the first few hits on google said open the Timeline palette, which I couldn’t find! Your post saved the day. Thank you!