Creative Tip: Build Animated GIFs in Photoshop.
Interested in Adobe Creative Suite? This is a weekly newsletter for creative professionals who use Macs (but Windows users are welcome too). If you're new here, you may want to subscribe via RSS or Email or Twitter for a mix of new tips each week. Thanks for visiting!
If you’ve ever wondered how to create animated GIFs in Photoshop, we’ve created a simple tutorial with some example files you can download and try out.
We use a lot of animated GIF files in our weekly tips. They are fun to build, and better for our email subscribers because Flash animations are not supported in most email readers.
A Simple Example
For a quick hands-on tutorial on creating animated GIFs in Adobe Photoshop, we’ll walk you through creating the following animation:
This simple animation combines the two most common animation techniques in Photoshop: Turning layers off and on, and using the Tween command to animate the movement of an object on a layer.
Step 1: Set up your layers.
The first step in creating any animation in Photoshop is to build a layered Photoshop file with all the elements you plan to animate. Our example document has 7 layers containing the text for our countdown, and layers for the rocket and flame.
You can download our example Photoshop file here:
Step 2: Create Animation Frames with Layer Visibility.
Chose Windows > Animation to show Photoshop’s animation palette.
On the first frame, turn off visibility for all layers you do not want visible at the start of your animation. Then add one frame at a time, and turn on the layers you want visible for each step in the animation.
Changing layer visibility one frame at a time is a classic Photoshop animation technique that covers a wide variety of needs.
In our example, continue this pattern to reveal the countdown and the flame at the bottom of our rocket.
Step 3: Create Animation Frames using Tween.
Now that the countdown is complete, we need to create the illusion that our rocket ship is taking off. Add one more frame, and this time select the group called “Rocket” in layers and move your rocket off the top of your image window.
Then choose “Tween…” from the Animation palette’s pop-out menu.
Set how many frames to add, and Photoshop spreads the movement of your layer across those extra frames.
Step 4: Adjust your Timing.
Finally, go back through and adjust the delay for each frame of your animation. That time is shown in seconds below each frame.
Tip: You can hold down the Shift-key to select a range of frames (such as the 9 frames we added for the rocket’s takeoff) and change them together.
Step 5: Export the Animated GIF.
Finally, to export your animated GIF choose:
In Photoshop CS3: File > Save For Web & Devices…
In Earlier Photoshops: File > Save For Web…
Make sure the image type is set to GIF, feel free to experiment with some of the other options, and save your file.
To test your resulting animated GIF, drag the file onto you web browser.
As a final reference, you can download our finished Photoshop file here:
Source: The animated spokesperson at the top of this tip is a homage to Tacoma illustrator Mark Monlux’s daily comic strip The Return of Stickman. Mark is a talented and funny guy, who generously allowed us to butcher his creation for this tip. Check out Mark’s site, and sign up for his daily email Stickman comic.
Nov 14, 9:30-11am — Photoshop: Preparing Images for the Web. This topic comes directly from client requests. What are the best ways to prepare images for the web in Adobe Photoshop? What formats work best? Can you create animated graphics directly in Photoshop? Come spend a fast-paced morning at CreativeTechs — your web developer will thank you for it.
November 29th, 2008 at 7:03 am
very nice, thank’s
December 1st, 2008 at 12:14 pm
Very helpful. Thanks bunches.
CW
December 1st, 2008 at 12:41 pm
That is VERY cool … and so easy. You guys are awesome … thanks!
December 2nd, 2008 at 11:23 am
Do you have alternative help for non-Mac Windows XP users?
December 3rd, 2008 at 4:32 am
Nice one guys, you just taught me something very useful that I needed, today, in my job!
Thanks.
December 3rd, 2008 at 5:37 am
Jill, I believe the process for creating animated GIFs in the Windows version of Photoshop is basically the same. The windows look slightly different, but the commands and steps are identical.
December 6th, 2008 at 4:46 pm
Wow this is really simple and neat..
December 6th, 2008 at 10:24 pm
Xlnt! Thanks so much. Never knew about that.
December 9th, 2008 at 5:52 am
brilliant Thanks!
December 11th, 2008 at 10:55 am
My problem is that I am creating a tween from frames (not layers) to fade in an image (from blank to complete). I was able to do this fine with ImageReady (CS2). It all works while in Photoshop CS3, but when saved for web as GIF, it does not animate! It only displays as the frame or layer selected at the time saved as GIF.
Suggestions?????
December 11th, 2008 at 11:03 am
@Paul - I’m not sure I have a complete picture of your challenge, but let me take a shot. If you are trying to create an animation that fades in from white, I would add a new layer that is filled with white above the rest of your image. Make that layer 100% opaque in one frame, and then 0% opaque in the next. You can then use the “Tween” technique described in this tip to tween with the opacity.
If the GIF is not animating properly, that likely means you’re doing a “Save As” rather than use the “Save For Web” option.
Either of those help?
December 13th, 2008 at 1:32 pm
Hey, very thans for you
December 16th, 2008 at 4:49 am
hey
thanks! this is the first tutuorial that showed me gifs in photoshop! awesome! just wish there were more tween options
December 16th, 2008 at 8:11 am
I continued to try with no success. I was using Save for Web option. As stated by Will above, all the tutorials (Adobe’s and others’) are based around multiple images/layers and timelines. I am trying to do mine with a tween or frames.
As stated before, it work properly when using ImageReady. It appears the same in Photoshop CS3, but the rendered GIF does not animate.
My example is at the following web site http://www.prideofireland.net .
Note the first of the photos in the random slides at the bottom of the page. This is the GIF created with CS3, the others were created with ImageReady.
December 18th, 2008 at 4:03 pm
thanks alot. i couldnt figure it out how to save my gif but this just gave it to me plain and simple. keep up the good work!
December 19th, 2008 at 1:54 am
The issue I’m having is related to rocket layer position and animation frames. I try to move the rocket to a new position before I tween the change but the rocket moves on all the previous frames instead of just on that single animation frame. Can someone help?
December 20th, 2008 at 4:41 pm
I’m having similar issues as Paul with my animation only showing the first frame. If I load them directly to my browser they animate just fine. But when I upload them they just display the first frame. I used an online gif animator like http://www.gifninja.com (very limited btw) and uploaded it. It worked just fine. So the only thing I can think of is some setting or format is not correct.
December 21st, 2008 at 6:31 pm
Found my own solution for my frame based animated GIFs (by trial and lots of errors). When “Saving for Web & Devices”, select the preset [GIF 128 No Dither], then change the colors to 256. This is the quick way. What this did is change the Color Reduction Algorithm from ‘perceptual’ to ’selective’, and the Dither Algorithm to ‘no dither’.
Your animation can be verified while still in the Save utility by testing with the one frame advance at a time play button (to the right of the play button).
December 22nd, 2008 at 8:52 pm
Thank you very much for the tutorial. I remember doing that all through ImageReady (R.I.P.), and a quick search for “Photoshop Annimated gif” brought me right here to your page with the answer. Keep up the good work.
December 22nd, 2008 at 10:01 pm
Hey its really cool… I learn easily… Thanks dude…
December 24th, 2008 at 10:12 pm
So what do i do if i get this time after time:
This is an animated GIF, You can only view one frame.
Saving this file will result in a loss of information.
December 29th, 2008 at 12:46 am
thank you very very much! its really helpful!
December 30th, 2008 at 7:43 pm
I would like to use the animated ideas and want to have a pen (I turn wooden pens) on a display turntable and have it rotate so that all side can be seen. I have not used photoshop before so do not know how to do this. Can someone explain this and walk me through this?? I appreciate any help I can get. Thank you in advance.
January 1st, 2009 at 8:11 pm
Please someone point me in the right direction. If no one can explain the process does anyone have a link to a tutorial that will show me how to set up the project I just mentioned. I do not know how to import different photos to the different layers. I need to take multiple photos of the pen spinning and then need to load them on individual layers and I do not know how to do this. Help please.
January 2nd, 2009 at 2:35 pm
Thank you for the great tutorial. I was able to create a simple animation but my goal is to embed the animation into an email. When I “Save for Web and Devices” I have the option of saving html, images or both. I’ve tried all 3 options but none of the files show up in email when I attach them. Do you have a suggestion? Thank you.
January 7th, 2009 at 11:11 am
THANKS, really
January 9th, 2009 at 8:54 am
Great - very helpful! Thanks!
January 12th, 2009 at 3:38 am
Hi everyone! Great tips, but I have a question, no matter what timings I set my frames to, the gif always runs a little too slowly. If I set the frames to differing timings, then the slow frames run at the same pace as the fast frames, which run too slow! If I set everything to a 0.1 second timing and simply add more frames (ie duplicate my slow frame so that I have 5 frames at 0.1 seconds, totalling 0.5 seconds) then it runs fine within photoshop but once I open the SAVE FOR WEB AND DEVICES box it always runs slow.
January 21st, 2009 at 7:28 am
truly helpful, thanks.
January 21st, 2009 at 5:48 pm
Simple but clear. Thank you.
January 23rd, 2009 at 12:30 pm
Thanks, very helpful.
January 26th, 2009 at 12:02 pm
Hey, I followed all the steps (only in the windows xp interface), but for some reason the Save for Web and Devices command stays grayed out, and I have no idea why…I followed the steps and created 11 slides, each with more text from a text layer being added on…but the command stays grayed…can anyone help? Thanks!
January 28th, 2009 at 4:21 pm
Hi! I’d like somethig that will be able to play as follow:
1-2-3-4-5-6-7-8-9 and, after that, looping 4-9 only. It is possible in Photoshop?
Thank you!
January 30th, 2009 at 10:07 am
hello from spain,
this is a great tip, I just discovered how easy it is to get some movement on the website.
thank you so much, I will certainly take a look at your site everytime I have a problem.
February 2nd, 2009 at 12:53 pm
Great tutorial!
Tx.
February 3rd, 2009 at 6:10 pm
Thanks, this was wonderful and exactly what I was needing. I had no idea animation in Photoshop was so easy (or possible) - I’m familliar with using the *old* JASC PaintShop Pro. lol.
You’ve certainly earned a spot in my bookmarks. I will definitely by back!
XOXO
~ Molica
Ps to future readers- Yes, everything is the pretty much the same between Mac and Windows (I’m a Windows user). Also, I would consider this a semi-advanced Photoshop technique. If you don’t have a lot of experience with Photoshop, then I would suggest spending some time getting to know her. (Believe me, you won’t regret it) Google search for basic Photoshop tutorials. They’re not that hard to come by. Good luck!
February 3rd, 2009 at 7:31 pm
I am having a problom i have no idea why but no matter where i try it my .gif animated picture will work and there is 1 way i dont know and thats how to play it directlly in web browser and i know i saved it right. Although i am using an older photoshop it should still work with 7.0 and i clicked save to web button under file but it still wont work.
February 8th, 2009 at 1:10 pm
is it possible to add an html link (a simple link to a website) in an animated gif? I just want people to be able to click on the http://www.xxx.com text and be taken to the website. How can I do this in an animated gif? I someone could post instructions (or links to where these instructions exist), that would be great. Thanks!
February 12th, 2009 at 6:08 pm
Hi Scarlett
This applies to Photoshop CS2, 3 and 4:
After you take your animation into “Save for Devices and Web”, select the slice tool and double click on the frame displayed. A pop-up will appear and you can enter your url there. No matter how many frames are in your animation, this will save the click-through to the whole animation. When you Save, choose html and images.
February 14th, 2009 at 7:09 am
very helpful!!:D
February 23rd, 2009 at 5:36 am
i am doing glitter effects in photoshop3….say i want to glitter a hat on a person.When I run the animation in photoshop its good…when i use it to post a comment in MySpace, it is all jittery, what is the problem?..
sometimes it flashes a white over the gif animation..Does a gif have to be a certain size to work right on the web
February 25th, 2009 at 10:21 am
Hey Pig,
I added the link like you said, but when I run my animation in a browser and click on it, nothing happens.
What am I doing wrong. I even made sure to put in the http://
Thanks.
Also for the author of this, the beginning file has the FINISHED animation. Not a big deal, I deleted the frames and started anew, but don’t need a final psd if it’s going to be the same file
February 25th, 2009 at 10:29 am
Never mind Pig, I didn’t read your whole post
Got it to work, duh
Thanks for that tip, never would’ve known or thought about it, photoshop has so many tools on the save for web screen!
February 27th, 2009 at 7:44 am
March 4th, 2009 at 9:07 pm
This was extremely helpful, thank you so much.
March 5th, 2009 at 6:21 am
Thanks a lot!!!
Wonderful tutorial….
March 8th, 2009 at 9:45 pm
Hi,
Very good example for making animated gif.
thank u very much.
March 12th, 2009 at 5:33 pm
Thanks for the easy and helpful tutorial!
March 12th, 2009 at 5:37 pm
Just wanted to say thanks so much for the response to my question (I’ve been traveling and not following the thread for a while)! Very helpful!
March 15th, 2009 at 5:28 pm
Thanks For The Opportunity!
March 16th, 2009 at 3:53 pm
Is there a way to control the transitions? Like adding a fade in/out to an image only animated gif?
Thanks!
March 16th, 2009 at 4:22 pm
Control the transitions with the “tween” function (pull down the menu from the top right of the animation bar). This gives limited setting options. To begin with, select all layers and all parameters.
But then the important thing to do is adjust the length of time of the tweening.
For eg, if you are transitioning between 2 frames that you have already made:
Make each frame 3 secs long. Select tween and type in 5 frames. In the animation window your 2 frames will change to 5, all 3 secs long. Leave the start and finish frames 3 secs, but change the three middle frames to .2 secs long each. Preview in your browser. It should be a soft, gentle speed fade between.
March 18th, 2009 at 4:10 am
YAY another photoshop mystery demystified…
March 18th, 2009 at 11:35 am
It’s been so long since I’ve made one of these that I almost forgot. Thanks for the reminder!
March 19th, 2009 at 2:57 am
Thanks for this nice tutorial.
I have made an animated gif and would like to use it in my documentation.
Is it possible to use it in Word, Framemaker, PDF? If i insert the gif into word or framemaker, the gif file is no longer animated. If i pdf these files, the gif is also not animated.
Thanks.
Bjorn
March 24th, 2009 at 12:10 pm
Thank you! Very informative, simple explanation.
March 24th, 2009 at 7:49 pm
they say that you learn something new everyday, well today is a new day and i learnt a lot : ) thanks for that
March 30th, 2009 at 2:14 pm
WOW! That was so simple and fun!
April 8th, 2009 at 10:45 am
Hi, it worked like charm.. Thanks for the tut. Have you tried online tools like http://www.animatedgif.web-20.in?
April 10th, 2009 at 10:04 am
Great job! The tutorial’s really helpful and concise.
Thanks a lot!
April 10th, 2009 at 11:46 am
these are great and so easy to follow!!!
April 12th, 2009 at 7:34 am
Can anyone help me? I need to add a weblink to my banner in Photoshop CS3. I used slice tool > then selected edit slice and put details of site in window, but when export nothing happens.
help
April 12th, 2009 at 3:19 pm
Marc: Are you in the Save for Web and Devices window? Just double click on your gif with the slice tool and enter the url in the window that appears. Then you don’t export, you Save and choose the format HTML and Images.
April 17th, 2009 at 3:19 am
thanks
April 17th, 2009 at 9:43 am
Thanks so much. I just need this.
April 17th, 2009 at 1:53 pm
I am trying to create an animation in which I want the same object to be large and then shrink and see this transition. I have a layer and a frame with the large object and then another layer and frame with the same but smaller object . When I tween these two, it just jumps from the big one to the small one without showing any reduction in size transition. Is there any way to tween so the object shrinks automatically (like in Flash)?
Thanks!
April 17th, 2009 at 2:07 pm
MMN: when you use tween, you have to specify the number of steps, and set timings manually.
Try this:
Make first and last frame 3 secs long each. Select your end frame (small object). Go to “tween” and choose tween with “Previous frame” then enter the number 10 in “steps”. You will now have 12 frames. Make each of the new 10 frames 0.5secs. Leave your existing first and last frames 3 secs. Preview. Adjust frame number and timing till it works the way you want.
This is as automatic as it gets. But be aware the file size of your gif animation will be much larger than a similar Flash file.
April 17th, 2009 at 2:18 pm
thanks!
I also just tried shrinking the object 20% in each frame until it reached the desired small size. You don’t have to tween them. Then with 0 secs. it actually transitions pretty good from big to small. A lot more “manual” than flash, but it works!
Thanks for your help!
April 18th, 2009 at 8:00 am
Thank you very much.
You have save me lots of time from doing the manual way.
With the tween function, i can do more in a shorter time.
Thank again.
Hong
April 21st, 2009 at 9:19 am
animacije su cool!!!
April 23rd, 2009 at 10:28 pm
thank you very much !! :] i learned a lot
April 23rd, 2009 at 11:16 pm
You know, you are a good teacher. Keep it up!
April 23rd, 2009 at 11:23 pm
You know, you are a good teacher.
April 24th, 2009 at 1:31 am
Hello, I have two problems. The first is that when in the last step in this tutorial, I move the rocket upwards for the last slide, the rockets from all of the slides move with it! The second problem is that when I tween it, it just doesn’t gradually go to the top of the screen, it disappears from the bottom by fading and then appears on the top of the screen via. fadinng. Can you please help me? School Project!
April 25th, 2009 at 4:38 am
Great tutorial, thanks! Way easier to follow your steps than to attempt to figure this out on my own. Photoshop Help returned 0 results when I queried “animated gif” ! Yikes. Especially helpful to have the PSD file available.
April 25th, 2009 at 11:22 am
I like this tut. I knew how to do it but the fact that someone as talented as you has taken the time to put it out there for the noobs is awesome. Keep up the good work!!!
April 27th, 2009 at 9:54 am
This is not CS4 is it? The animation interface has changed a LOT and it’s not quite as easy anymore (unless there’s something I don’t know).
April 28th, 2009 at 9:25 pm
very good yaar its awesome !!1
April 29th, 2009 at 8:03 am
It’s a very nice tutorial!
Thanks man!
May 2nd, 2009 at 11:25 am
Ok great, CS4 does gif animations. wow, corel draw did them 15 years ago. I just dropped $400 to upgrade from cs3 to cs4 extended because it “did gif animation”
As a webmaster with many gif animations on my site, HOW DO I OPEN AND EDIT EXISTING GIF ANIMATIONS WITH PHOTOSHOP CS4 EXTENDED???
May 2nd, 2009 at 12:14 pm
Yes, How do you open existing gif animations from a website that is already exported to gif.
Once I create an animated gif with photoshop I cant open it up again.
I also cannot open up the many hundreds of thousands of animated gifs that have been created in the past.
Ken
May 4th, 2009 at 11:31 pm
thankas….
May 6th, 2009 at 2:19 pm
this is great thank you…very simple and the rocket is so cute. I managed to create my animation thank you
May 6th, 2009 at 4:10 pm
Can some one help me please. When I save my image as gif for webready the animation stops and becomes static..im trying to create an animated banner and it doesnt work thanks
May 7th, 2009 at 9:37 am
thanks, thansks!!!
May 12th, 2009 at 7:54 pm
Hello, I have two problems. The first is that when in the last step in this tutorial, I move the rocket upwards for the last slide, the rockets from all of the slides move with it! The second problem is that when I tween it, it just doesn’t gradually go to the top of the screen, it disappears from the bottom by fading and then appears on the top of the screen via. fadinng. Can you please help me? School Project!
May 14th, 2009 at 11:34 pm
Thanks so much now I finaly know how to save a animated gif, thanks!!!
May 18th, 2009 at 5:02 am
nice one !! thanks for the tutorial ~
May 20th, 2009 at 8:48 am
ey thanks this is very nice
May 21st, 2009 at 7:38 am
Noticed a few posts about opening gif animations in CS4 and I’m not sure if anyone answered.
You can go to - file > import > Video Frames to Layers…
It will list in the dialogue box the type of files you can import, but if you manually type in the file name ex:”loading.gif” it should open it.
Hope this helps.
May 21st, 2009 at 7:45 am
Kevin, that is a really nice trick (using the Video Frames to Layers import features). I’ve been playing with that to write up a tip, but I’ve found it to be somewhat problematic on the Mac. Seems to work great in Windows however.
May 23rd, 2009 at 6:31 pm
very nice, but i have question about layer!
what the layer must one by one every motion?, and the animation creature just on image ready?
thank’s
May 26th, 2009 at 12:32 pm
Ty!
Nice and easy tut.
May 28th, 2009 at 7:59 am
It is very good but i want to knwo more about Photoshop CS3 as animated images.
May 31st, 2009 at 1:08 pm
How can a I save my new baner with a link to my website, using Photoshop Elements 7?
June 3rd, 2009 at 4:20 am
I can’t make your tutorial work properly. I’m using my own pictures, I’m trying to do animated signatures with PS and IR, I make a psd file with the seperate signatures on each their layer, then save it and jump it to IR. Here I do all the duplicating and tweening and it’s looking quite good. My problem shows up when I have to make it a gif file and make it work! When I go to save as in IR I can’t save it as a gif, unless I write it myself. Then I can jump it back to PS and save for web, I do so, but when I open the exported gif. pic its just a still picture frozen somewhere in the middle of the tweening…. Heelp!
June 3rd, 2009 at 5:33 am
Thanks for this tutorial.. Now I have a nice animated gif ad…
June 6th, 2009 at 8:19 pm
gracias por el aporte, de muchisima utilidad. thanks for the add, very very very very useful!! PIZ!
June 7th, 2009 at 10:32 am
Wow! Thanks for the advice. Very, very helpful. I knew how to animate layers, but I had the hardest time figuring out how to save the file. Thanks again!
June 14th, 2009 at 4:01 am
Thank you! Amazing help.
June 20th, 2009 at 10:08 pm
thakns for ur great job
June 25th, 2009 at 3:29 am
How do I create a flashing image with photoshop? I simply have a picture of a product and I want it to show at the top of the page for 2 seconds and then disappear for 2 seconds…and so on>>>>
June 25th, 2009 at 9:39 am
you are a star… thank you
June 25th, 2009 at 10:20 am
@Jill:
Simply have 2 frames. One with the layer on and one with the layer off. Have a delay of 2 secs between each.
If you do this tut first, what you want to do will be a piece of cake
July 1st, 2009 at 2:41 pm
Thanks for the animated gif with PSD. This is a very good example.