![[decorative element]](http://designorati.com/wp-content/themes/d3/images/nav1_topics_OFF.png){kind=small}
Create Animated GIFs With Photoshop (And Without ImageReady)
With CS2, Photoshop now carries its own Animation palette outside of ImageReady, thus giving you all the tools you need to create animated GIFs. Here’s how! (…)
With CS2, Photoshop now carries its own Animation palette outside of ImageReady, thus giving you all the tools you need to create animated GIFs. Here’s how!
It’s true—with Photoshop CS2, you can now create sophisticated animated GIFs exactly as in ImageReady. The key is the recent addition of the Animation palette, which allows you to build the frames that make up the animation, and the Save For Web menu item, which has been a part of Photoshop for a couple iterations now but I don’t think gets much action unless you are saving slices at different optimizations or GIFs with customized color tables.
In this How-To article I am going to animate a clock face and save it as an animated GIF; you can see the final product rolling away above. We’re going to assume that you know how ImageReady works and how layers are used to create animations. In the case of my clock face, I have to create a layer for each hand movement (see Figure 1 to see all my layers visible at once).
Step 1: Create the layers needed for your animation (in my case, one layer for each minute hand and hour hand movement, plus the clock face).
Step 2: Open the Animation palette (Window –> Animation). The Animation palette will appear exactly as in ImageReady, as well as the icons in the Layers palette associated with animations such as Match Position, Match Visibility and Match effects.
Step 3: Create the frames in the Animation palette needed for animation and set layer visibility for each frame. For this example I require twelve frames, and for each one I make visible the hour hand and minute hand each one calls for. Figure 2 shows frames 8–12 of my animation.
Step 4: Set timing as required. I don’t want my clock to run at the speed of light, so I’ll select all frames by selecting frame 1 and shift-clicking frame 12, then click any one of the frames’ delay times to get a drop-down menu where I can change the delay timing. I set the delay of my frames to 0.2 seconds.
Step 5: At this point it may be a good idea to play the animation by clicking the Play button in the Animation palette. Photoshop will scroll through the frames and run the animation.
Step 6: Once the layers are doing what you want and the frames are running the speed you want, select File –> Save For Web…. The Macintosh keyboard shortcut is Shift-Cmd-Ctrl-S, and on the PC it’s Shift-Alt-Ctrl-S. Figure 3 shows the Save For Web dialog box, a complex interface for optimizing and saving web images. You’ll see at the top that it’s “powered by ImageReady”, which is something of an understatement—this technology was lifted right out of the application, the same way the Animation palette was. On the right side you’ll see the same playback controls that were in the Animation palette—this is a new addition required by the introduction of this palette, and give you one more opportunity to play your frames.
Save For Web has too many features and options to be covered fully in this How-To, but for our purposes the only thing to make certain is that “GIF” is selected in the drop-down menu on the right side. This drop-down menu controls file format output and is surrounded by several other optimization settings including colors, dithering, lossy amount and transparency. If you create a lot of animated GIFs for the web you’ll want to learn how these work, as they can make a too-large web graphic small enough to run well online.
Step 7: With GIF selected in the Save For Web dialog box, click Save. You’ll be presented with the Save dialog box, and your image will now have .gif after its file name. Click Save once more to save your image.
That’s it! You now have your animated GIF (Figure 4) ready to insert into your website, and ImageReady wasn’t required. If you have questions about this How-To tutorial, please comment in the field below and I’ll try to post some answers or even a follow-up article. And if you have a whole new question about Photoshop (”How do you do this?” “Is it possible to do this?” “I have a client who wants this, but I don’t know how to do it…”) drop me a line and I’ll cover it either as a How-To tutorial or in my Ask D:Photoshop section!
How-To’s Day is a regular Designorati feature in which we give you fresh tutorials across all of Designorati. How-To’s Day happens every other Tuesday.
- What The Adobe-Macromedia Merger Means For Photoshop
- “How To” Tips Make Photoshop Tasks A Cinch
- BOOK REVIEW: Adobe Photoshop CS3 Extended For 3D And Video
- Ben Willmore’s “Up To Speed” Book A Great Resource
- Creating Actions With Conditionals
- Space Monkey and Other Photoshop Easter Eggs!
- Announcing Designorati: Photoshop
- Freeware Friday: Photofonts and Photofont Start Plug-in
- 11 Ways to Cartoonize Yourself
- Photoshop Jargon: GIF87a and GIF89a
I needed this info…thanks. The only problem was that you left out some critical info.
Step three needs to spell out that you need to copy the animation for the total amount of rames. Then go to the second frame and click off of the visibility eye on the layers palette and so forth!
I figured it out somehow:]
Thanks again!
Glad it was useful!
Sorry I threw you off by leaving out those details. You’ll see in the second paragraph that I assumed that you already knew animation techniques from ImageReady, which is where we get the layer visibility technique you mention.
You’re exactly right, this requires copying the frames (mentioned in Step 3) and using the Layers palette to change visibility until each frame is displaying only what should be visible.
What I like to do for something like this (where every frame has different visible layers) is to make NO layers visible, and copy the frames I need from that. Then I go back and turn on just the one or two layers I want visible. It’s a lot easier than turning off layers for each frame.
If you’re not aware, tweening is another way to copy frames and it can save you a lot of time. If you’re interested I can schedule a How-To article about using tweening.
DESIGNORATI
Hi Jeremy,
How do I create animated GIF’s with ImageReady 7.0? I was unable to find any useful information on the web.
Thank you for your help!
Kim
does anyone know how to speed a gif animation up besides setting frame delays to 0
i have few frames in my animations, all delays set to 0, yet my giffs still run slowly in playback.
(they seem to run faster in safari than firefox, and slowest on my mobile phone sony ericsson k750)
any help appreciated
This was more help then the Photoshop help was. Just took me a sec to figure out that the gif was not where i had saved it cause I had saved it as an xhtml file. but found it in my images file in my documents folder. Thanks so much
When I click on the GIF I just created, all I get is a “Drawing Failed” message. I can select “HTML and images” in the file type field, but then I wind up with and HTML document. Am I doing something wrong?
I’m not sure where that “Drawing Failed” message is coming from. If you’re doing a simple animated graphic like the one shown here, you can create the image alone (no HTML) and it should work fine if you open it in a web browser.
DESIGNORATI
wow!…thanks a lot!… so clear and helpful! i’ll be abel to cover my clients request in a snap thanks to your tutorial! keep up the good work and the generosity! Jav from montreal
thanks, this is just what i was looking for, i kinda worked it out for myself apart from saveing.
thanks again.
Not really clear how you create and copy each image from each layer into the animation palette. When I click new image on animation palette, it just creates another copy of the same frame… how to i change the images in each frame.. they are all the same..?
I have the same problem as ‘Test Tester’, i want to create a gif but with different images, if that makes sense? Is it only possible with the one image but slightly modified?
I am using Photoshop’s CS3 beta version and I have created my animation. I have set each frame for the appropriate speed and it plays great when I play it in photoshop, however when I view it in a browser or on the web it runs as if there was no time set on each frame. I have saved using ’save for web & devices’ and can adjust the looping there as well, but I see nowhere to adjust the frame speed only viewing the frames. Any suggestions how to get the frames to play at the programed speed?
aha
Well I am glad they kept the Animation palette in Photoshop CS3 however you now have to buy Fireworks to view an animated GIF. Where all you had to do was open up the animated GIF in Image Ready and it displayed the the Animation in the layers making it easy to manipulate. Photoshop CS3 will only display the first frame of the animated GIF and fireworks is way clunkier to use manipulating animated GIFs.
thanks for this.
You just saved me re-installing imageready.
I removed CS2 when instaling CS3…realised I needed a gif and though “bugger”
Unfortunately, Joe is right—I tried working with Photoshop CS3 Extended to open an animated GIF with frames intact but I don’t see a way to do this. For reasons unknown, Photoshop does have a Make Frames From Layers feature in the Layers palette so you can generate frames from layers, but you need the layers to begin with—and animated GIFs do not.
It appears the Photoshop team still sees animated GIFs as a “final” output and aren’t expecting anyone to bring the GIF back into Photoshop to work with it. That’s what the layered PSD file is for. I don’t think that’s good reasoning, since many people (like myself) sometimes find it convenient to edit an animated GIF.
DESIGNORATI
Can I create a screen saver file in photoshop I have the CS2 Suite?
wow..thanks a lot..
finally i know the way to create an animated GIF..
i think image ready is better..
I want to edit an animated gif file in ImageReady (9.0) by adding another vector gif and have it animated through the layers/frames. When I open it, it shows all 14 frames and layers, but for some reason, what I do to frame/layer #1 is done to all the other frames and so-forth: How can I make what I do to one frame only affect that frame??
P.S. I am using the “Place” command in “File” to add the vector gif to the animation.
I’m having the same problem as Nancy. It looks great in photoshop, but I export it and it looses all the timings. It also looses them on the “Save for Web & Devices Screen”.
Any help? This is driving me nuts :’(
I don’t have ImageReady on my computer anymore (it was retired with CS2, I believe) but I remember being annoyed by the same problem—place an item on one frame and it shows on all the other frames. I think I either did something with the “Propagate Frame One Changes”, a menu item in the Animation palette, or just changed the visibility on subsequent frames.
I’ve not come across the frame speed problem before. I do know that different computer environments run animated GIFs faster than others (PCs are faster than Macs, and I don’t know if browsers can also affect that). What are your current frame speeds? If they are relatively fast, maybe your computer is playing them just a little bit faster, making them seem like there is no pause at all.
DESIGNORATI
Small plug for this article: Kelly Sharkey used the info in this article to create this banner for a client.
DESIGNORATI
HelloJjeremy,
I found your tut whilst looking for a way to set the optimizing palettes in IR. I have a 38 frame gif that I am trying to make for my web site. When I try saving it, it creates a dithered look, the images are not smoothed out as they are originally, do you know how to tweak these settings to keep the images the way they are originally? I have found the same problem occurs in CS2 as well as in IR.
GIFs can be dithered in order to minimize file size, and that’s probably what is happening here. Look for a “Dither” checkbox and uncheck it to disable that. With a 38-frame image though, your file size may get pretty large if it’s not already—you may need to sacrifice image quality to make the file practical for the web.
DESIGNORATI
Awesome…
most useful thing ive learned in quite some time.
thank you!
I am working on an animated gif for some emails - I am using CS3 and after reading the above was it determined that I am up a crick without a paddle in terms of saving the gif and keeping the animation? Thanks…
Thank You Jeremy! I needed this for about a year now! this really helped me and befroe I read this I did not even know you can animate in Photoshop I only thought you can do it in ImageReady. Thanks!
It’s surprising how popular some of these older articles are, such as this one on animated GIFs with ImageReady, an application that is no longer in production. I just reviewed a book on 3D and video in Photoshop CS3 Extended, and the author didn’t even cover these animation tools because they are considered old and archaic.
http://designorati.c...for-3d-and-video.php
The popularity of this article shows that these techniques are still needed sometimes.
I ended up here after doing a google search about editing animated gifs with CS3… I used to easily load em up in Photoshop CS2, do my changes and they’d usually save out as smaller file size (assuming I adjusted the Canvas/Image Size.
Now that I’m forced to use Fireworks CS3 (which I hate by the way), lets say I open up a 106Kb animated gif. I adjust the width/height from 150×150 to 100×100 and save it again… The file size is now like 368Kb or something. ABSOLUTELY HORRIBLE!
What can I do Jeremy?
Hi midnit,
It sounds like you are just saving your file with File -> Save, which makes larger files. Try File -> Export, which is the same as ImageReady’s old Save Optimized—it will save your image at a suitable size for the web. Fireworks CS3 also has a nifty Export Wizard (look for it in the Optimize panel) which allows you not only to export your file but to export it at a particular file size. If you need a 50K file, set it as such and the wizard should save it down as needed.
Hope this helps!
There is a solution to opening an animated gif in Photoshop CS3 and preserving the animation.
Go to File -> Import -> Video Frames To Layers
Now, it filters the extensions to just video formats, but you can just type the name of the file in, hit Load, and it will ask you what you what frames you want to load, the default is all.
Hit OK, and if your Animation palette is not up, go to Window -> Animation to display it. As you can see it loaded each frame of the animation in as a separate layer, and preserved the frames in the Animation palette.
Cheers.
Adam, I tried your tip just now but Photoshop CS3 would not accept GIF as a format. I changed the suffix to .mov and imported that way but it only gave one animation. I think the problem is that I am not given a place to type the file name in—maybe this is a PC-only technique.
Even if it works, it should be noted that Photoshop will make layers for every frame—not the layers of the original PSD file.
thanks for this how to :) really helped!
Is there a way to make a gif movie faster than just setting it to “no delay”?
No, they can’t go any faster than that.
I messed with it today and realized if you save for the web as a gif then open it trhough the video to layers and choose to limit it to 2 frames it goes faster..
I tried opening an animated GIF with the Video to Layers option and it could not open them—GIFs are grayed out….
DESIGNORATI
I have read this whole thread, and found alot of new things i did not know before I started messing with making animation using CS3 before CS3 I used 5.5 Yes I know old…but I have been working with CS3 for just plain old photos etc..Now i have started to work with animation but …once my animation became bigger as i progressed with more frames and bigger images and more complicated transitions ….my files are way to big to use on the internet, well i say 4+megabits is to big but i dont know its just when i go to host them they dont come out right dont load right and the other problem is getting them hosted for free…i will pay no problem there just dont think it will solve my high size problem when loading….I know im missing something….should i be using another program along with CS3 to acomplish saving them in smaller sizes..and keeping the quality….Im at a lost a have been on google for a while and this thread JEREMY was the Best I could Find…CAN YOU HELP…………IM FRUSTRATED>>….
DO you have cs3? Because thats what I use. If you do *.* in the file name area and press enter, it will show all files to open them.
I have another question, can you use photoshop cs3 slices without having to use dreamweaver and if you can how do you get from saving your slice html and images file to puting them on your own page …on the internet like MYSPACE and SO on….I know how to host an image like in ImageShack but how do you go about it so i can see my finish design on my page and be able to host thru ImageShack? Thank you for your time in advance….
Arturo, 4MB is definitely too large for web graphics. Keep in mind that animated GIFs were designed in the 1990s for small graphics and simple animations, not complex motion graphics (which it sounds like you are doing). I use Flash for motion graphics, and it has many major advantages over ImageReady and animated GIFs.
RE: using slices without Dreamwaver, yes, you don’t need DW to handle the HTML file Photoshop outputs. The process of publishing the HTML layout on the Internet or MySpace is a different thing entirely from creating the graphics and is really beyond the scope of this tutorial. Try looking for simple tutorials about putting webpages online.
Yes, I guess i am not doing simple gifs, I ve looked around a bit and from my own findings. I believe i need to get CS3 Pro Wich includes CS3 Flash. I have Photoshop CS3 Extended but it does not have flash, Ive never used the program and watched a few tuturials on the net, about exporting your psd.s to CS3 Flash and other releated items. If you know what i would like to know is if thats the way to go……and does this fix my problem about images being so big…..and what about dreamweaver do I still need to use it to accomplish….complex motion graphics…along with flash….Or what do I need to get…
I looked at a couple of tutorials bout hosting web pages online..that problem is solved, thank you Jeremy.
Flash CS3 can be purchased by itself or as part of a suite (several CS3 suites offer Flash). Flash is a vector-based animation application so the files it produces are often quite small and well-suited for the web, although you can use bitmap graphics in Flash which will increase file size.
Even if you produce Flash content, web browsers display HTML pages so you do need an application that produces and handles HTML. Photoshop can produce a HTML page when it creates web galleries and web graphics, but Dreamweaver is a true HTML webpage editor. If you plan to do a lot of web design work, you need DW or a similar app.
DESIGNORATI
I have another question…I created an animated in Photoshop CS3 and saved for web. It views fine on my mac browser, but does not show up on my supervisors pc browser…is there a solution or reason for this. I need to send it out for an on-line magainze.
I have another question…I created an animated in Photoshop CS3 and saved for web. It views fine on my mac browser, but does not show up on my supervisors pc browser…is there a solution or reason for this. I need to send it out for an on-line magazine
Please help!
when i save my work in giff it changes the colour of the animation so it looks like a filter has been added to it. how do i stop it from doing this
Chris, I’m not sure what you’re seeing but I think you’re describing posterization. It can happen if you output your GIF with too few colors—try increasing the number of colors.
Hi Jeremy
Nice one! Ive just been struggling with image ready as its been a while since ive used it
I never knew CS2 had the animation pallet!
Note to self: Look through the menu’s…
hey Jeremy
I have done all the steps but i cannot seem to produce an animated gif… My computer says the the file is an animated gif, however, I can only view the first frame… HELP PLEASE..
Grayson, are you viewing the file with Photoshop or a web browser? Photoshop will only allow you to view the 1st frame….
DESIGNORATI
Jeremy-
After getting CS3 I lost ImageReady, this was a lifesaver!!!
MANY THANKS!!!
Wow…. great tutorial Jeremy, I appreciate it.
I followed each step and it worked perfectly. I used to use Fireworks for making animtated gif’s, but now I’m going to use Photoshop from now on… thanks bro.
I saved mine as gif however when i insert it in my website it doesnt play.what am i doing wrong?
Thanx IT helped Alot
I have created different images that are for the animation I am working on. Mine are based off of a person struggling to swing her arms at the male character teasing her by pointing his finger at her forehead. I need help with how to put all off these separate images together because I go to open the first image; then I click windows so the animation box shows up. I’m trying to get the next picture to be the next frame 2 of the animation but I don’t know how to do it.could you tell me exactly how to solve this?
thanks a lot! it works very well! and nice explanation!
Thanks a lot for the info! I managed to create an animated gif using photoshop cs3, and it seems to work find when i opened it on firefox and IE. However when i uploaded as advertisement to different sites, they dont animate. I tried re-saving and re-sending the file, but they still don’t animate on all sites. What could be the problem and how to solve it?
Hi, How do you get a gif to run at the speed it does in photoshop? its alot slow when i view it in a browser.
I made animated rain in CS5 and i am trying to get the rain falling onto a powerpoint and still be animated, is it possible that i can do that?
Thank you for the tutorial. It was very clear and easy to understand. :)
However, I have one problem. When I try drawing on one of my frames on ImageReady directly, the newly drawn objects appears in all the frames… For example, all my frames have been set up and ready, but then realized I wanted a little sparkle. So I use the Pencil on IR and start drawing. But once I draw it on Frame 1, it appears in all other frames.
Is there any way to fix this…?