CreativeTechs

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:

ExampleAnimation.psd

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:

ExampleAnimation-Final.psd

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.

 

Comments

mili November 29, 2008

very nice, thank’s

Cubie December 1, 2008

Very helpful. Thanks bunches.
CW

Rae Stanton December 1, 2008

That is VERY cool … and so easy. You guys are awesome … thanks!

Jill December 2, 2008

Do you have alternative help for non-Mac Windows XP users?

Tris December 3, 2008

Nice one guys, you just taught me something very useful that I needed, today, in my job!

Thanks.

Craig Swanson December 3, 2008

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.

Joe December 6, 2008

Wow this is really simple and neat..

Victor December 6, 2008

Xlnt! Thanks so much. Never knew about that.

Joanne Nova December 9, 2008

brilliant Thanks!

Paul December 11, 2008

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

Craig Swanson December 11, 2008

@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?

Martynas December 13, 2008

Hey, very thans for you 😉

will December 16, 2008

hey
thanks! this is the first tutuorial that showed me gifs in photoshop! awesome! just wish there were more tween options

Paul December 16, 2008

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 https://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.

tom December 18, 2008

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!

Mike December 19, 2008

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?

Captain Jack December 20, 2008

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 https://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.

Paul December 21, 2008

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).

Ryan December 22, 2008

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.

TechnicalSathish December 22, 2008

Hey its really cool… I learn easily… Thanks dude…

D. Rumsfeld December 24, 2008

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.

🙁

stephanie456 December 29, 2008

thank you very very much! its really helpful! 🙂

John T. December 30, 2008

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.

John T. January 1, 2009

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.

Kelly Hume January 2, 2009

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.

Zed January 7, 2009

THANKS, really

Mel Tipps January 9, 2009

Great – very helpful! Thanks!

Daniel Warren January 12, 2009

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.

claire January 21, 2009

truly helpful, thanks.

James January 21, 2009

Simple but clear. Thank you.

taly January 23, 2009

Thanks, very helpful.

Adam January 26, 2009

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!

corneliu January 28, 2009

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!

jani January 30, 2009

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.

9uillo February 2, 2009

Great tutorial!
Tx.

Molica February 3, 2009

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

Cory S February 3, 2009

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.

Scarlett F. February 8, 2009

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!

pigmango February 12, 2009

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.

ranny February 14, 2009

very helpful!!:D

hodx February 23, 2009

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

David February 25, 2009

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 https://

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 😛

David February 25, 2009

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

Kyaw Ko February 27, 2009

🙂 powerful tutorial…….!i!

Craig March 4, 2009

This was extremely helpful, thank you so much.

Sarath March 5, 2009

Thanks a lot!!!
Wonderful tutorial….

Anil Desai March 8, 2009

Hi,

Very good example for making animated gif.

thank u very much.

Kayla March 12, 2009

Thanks for the easy and helpful tutorial!

Scarlett F. March 12, 2009

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!

Oscar March 15, 2009

Thanks For The Opportunity!

Crash March 16, 2009

Is there a way to control the transitions? Like adding a fade in/out to an image only animated gif?

Thanks!

pigmango March 16, 2009

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.

Charlene March 18, 2009

YAY another photoshop mystery demystified…

James McWhorter March 18, 2009

It’s been so long since I’ve made one of these that I almost forgot. Thanks for the reminder!

Simoen Bjorn March 19, 2009

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

Kristie March 24, 2009

Thank you! Very informative, simple explanation.

Captian Jobs March 24, 2009

they say that you learn something new everyday, well today is a new day and i learnt a lot : ) thanks for that

Brandon March 30, 2009

WOW! That was so simple and fun!

tombrider April 8, 2009

Hi, it worked like charm.. Thanks for the tut. Have you tried online tools like https://www.animatedgif.web-20.in?

Tono April 10, 2009

Great job! The tutorial’s really helpful and concise.
Thanks a lot!

Tim April 10, 2009

these are great and so easy to follow!!!

Marc April 12, 2009

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

pigmango April 12, 2009

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.

ayub khan April 17, 2009

thanks

Aca April 17, 2009

Thanks so much. I just need this.

MMN April 17, 2009

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!

pigmango April 17, 2009

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.

MMN April 17, 2009

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!

Hong Teo April 18, 2009

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

dul(96) April 21, 2009

animacije su cool!!!

dea April 23, 2009

thank you very much !! :] i learned a lot

cesar April 23, 2009

You know, you are a good teacher. Keep it up!

cesar April 23, 2009

You know, you are a good teacher.

Helli April 24, 2009

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!

Matt Cassarino April 25, 2009

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.

Rusty April 25, 2009

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

Lisa April 27, 2009

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).

soumya April 28, 2009

very good yaar its awesome !!1

Martin April 29, 2009

It’s a very nice tutorial!
Thanks man!

The man May 2, 2009

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

Ken Smithers May 2, 2009

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

tharanga May 4, 2009

thankas….

Shana May 6, 2009

this is great thank you…very simple and the rocket is so cute. I managed to create my animation thank you

Shanaz Haque May 6, 2009

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

Matheus May 7, 2009

thanks, thansks!!!

Helicopter May 12, 2009

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!

ChristianL May 14, 2009

Thanks so much now I finaly know how to save a animated gif, thanks!!!

kaza May 18, 2009

nice one !! thanks for the tutorial ~

ricky O. May 20, 2009

ey thanks this is very nice

Kevin Betker May 21, 2009

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.

Craig Swanson May 21, 2009

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.

mie May 23, 2009

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

Jöran May 26, 2009

Ty!

Nice and easy tut.

Anand Pandey May 28, 2009

It is very good but i want to knwo more about Photoshop CS3 as animated images.

Tracy May 31, 2009

How can a I save my new baner with a link to my website, using Photoshop Elements 7?

Louise June 3, 2009

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!

Viktor June 3, 2009

Thanks for this tutorial.. Now I have a nice animated gif ad…

hirsaid June 6, 2009

gracias por el aporte, de muchisima utilidad. thanks for the add, very very very very useful!! PIZ!

Angela June 7, 2009

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!

william June 14, 2009

Thank you! Amazing help.

dndz`sri lanka June 20, 2009

thakns for ur great job

Jill June 25, 2009

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

flair June 25, 2009

you are a star… thank you

David June 25, 2009

@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 😛

amarnath jayaprakash July 1, 2009

Thanks for the animated gif with PSD. This is a very good example.

Matt_U July 5, 2009

Hi Everyone,

Can someone please help me. Im creating a website for a client and they would like an animated gif with 3 pictures which loop continuously and would like a DIFFERENT LINK on every picture that would redirect to its appropriate page.

But all I can get is 1 link for all 3 pictures. I just went through this tutorial. It’s not the best animated gif, but they said its good, though im not crazy about it. I think you can only have 1 link for the animation, but I’m not sure.

this is the link where you can find what I did.

https://apexmanagementgroup.ca/animatedgif.html

Can someone please help me out. Thanks a lot!

pigmango July 5, 2009

Hi Matt

Your client has asked for something that is impossible. A url link is attached to the whole gif animation, not each frame.

They can achieve this in a Flash animation only.

Matt_U July 5, 2009

Hi Pigmango,

First and foremost, I’d like to thank you for answering my post.
I had a feeling that it couldnt have been done, but I wasn’t sure. I know how to do it in Flash but my client doesn’t want it done in Flash.

Now all I have to do is change those 2 last photos. So once again thank you for responding and have a good one!

Thomas July 13, 2009

I like this, thx!!
with love from Holland!

Amy July 16, 2009

Thanks so much for that. This wasn’t no1 on google for the search term I used, but it was much better and more in depth than the one that showed up at 1.

webcamgirly July 19, 2009

thnx very much for this great info.

Sam July 20, 2009

I LOVED THIS>.. added some turbulance…

Linda N July 26, 2009

FINALLY….. a site that doesn’t over complicate the instructions and doesn’t assume that everyone knows where everything is. This has to be the BEST tutorial I have ever witnessed. I can’t stand Fireworks when it comes to creating animated gifs, this really lets you have more control over the appearance of your gifs and how they behave. So happy that Photoshop now has this feature. Thanks guys for making an excellent tutorial.

praneedkumar July 29, 2009

its superb! it helps me a lot.

dj fred marchetti July 30, 2009

Can’t thank you more..

fa2408 August 1, 2009

so cool … thank you guys…. i will just lock someone in the rocket so it will be funny :))

pnamajck August 7, 2009

tnx  for  the  tut . . . would  be  nice  if  photoshop  would  offer  options  to  export  for  animated  *.png  as  well . . . instead  of  only  animated  *.gif .

sanjog August 7, 2009

now i just try to cs3 photoshop programe and i couldn’t make animation in cs3 ps please send me some help from My Email Address : slc_bhorletar@yahoo.com
Thanks For help

sanjog August 7, 2009

can i know about 3d option in cs3 ps

Jonas August 12, 2009

Cool, thanx.. I’v learnd to create animations in like 6 minutes 😉 . Ciao

Photoshop Tutorials August 13, 2009

Great examples! Exactly what I needed!

thanks

majid August 23, 2009

hi
tank
my web by tutorial photoshop
https://www.tutorial.40sotoon.net

Student August 26, 2009

Thanks is very helpfull for me 🙂

Make animated GIFs September 5, 2009

You can make animated GIFs a lot easier now with https://www.gifsoup.com. You can capture animated GIFs from YouTube videos and publish them instantly for free!

Rhoda September 7, 2009

Thanks for this. I am very relieved. I recently upgraded from CS to CS4 (ok- took me a while) because I got a new computer with a quad core and Vista 64. I couldn’t find Image Ready and didn’t know how I was going to do my 2 yearly animations for a contest web site. I started on the background and remembered my rule – “use the help!” and this was very helpful and “day-saving.” Hopefully this will work with CS4 although it seems written for CS3. Thanks again.

Rd September 21, 2009

thank you so much!! it helped me loads!!

Cheers for the info guys.

Mike Rogan September 24, 2009

Excellent – I will be teaching this to a new generation of users in an Introductory Web Design class. Our school recently upgraded to the CS products and finding good intro items for kids without using a text book is great. Thanks!

Hannah September 27, 2009

I’m tring to make a .gif as a tag for me on a website but my Photoshop doesnt have the ‘Animation’ window option. I Open Window and look but its just not there…. I don’t know what to do.

pigmango September 27, 2009

If you don’t have the Animation option then I guess you are running an old version of Photoshop. In that case, click the Image Ready button on the bottom of your tool palette and create the animated gif inside the little App that opens.

Zala Wajik September 29, 2009

Too bad Photoshop Element doesn’t have several timing TT

Anyway, thanks for this tutorial!
It is really help me reminding what to do!

Carl Jackson October 9, 2009

Thanks a ton for this tutorial !!!

Reg Cure October 9, 2009

I had learnt this before, but forgot in due course of time. Now when I realized its application in designing, I feel so thankful to the publisher of this wonderful tutorial.

Perry October 10, 2009

I’ve written a tutorial like this for Windows XP at:
https://makeyourownbeboskin.blogspot.com/2007/07/creating-flashing-glowing-text.html

let me know what you think

Ali October 13, 2009

Hello

I live in Iran. It was an excellent lesson for me, exactly what I was needing..Thank you for the great tutorial.
I want to send you a gift so please write me your address.

Regards,
Ali

Adiwijaya Hadinoto October 19, 2009

This is great! you did an awesome tutorial here.. keep it up man! 🙂

torn October 24, 2009

i am running ps cs3 full version on windows xp but for some reason can’t find any tween option. it isnt in the top right hand popup menu and i cant find any tweening options anywhere else… please help!?!

pigmango October 24, 2009

Torn, you’re probably in the wrong view. You need to be in “frame” animation view. Click the little ‘film strip’ rectangle at the bottom right of the animation floating palette. Now you will be able to choose tween.

Nyi Zaw Moe October 25, 2009

oh! thank you that simple is clear.

Photoshop Tutorials October 26, 2009

Great Tutorial! You should stop by our site and see some of our tutorials at tutorialblog.org…we’d love your input as well as our users. Keep up the great work.

-tutorialblog.org staff

eugines October 27, 2009

nice tutorial….

here’s another tutorial
How to make animated pictures in adobe photoshop

Bhuwan Roka October 28, 2009

Thanks for this I am very happy . Keep more ideas ..

torn October 28, 2009

thanx pigmango… knew it would be something simple! 😛

Jo October 28, 2009

This saved my day. Thanks a lot.

Cher Cabula October 31, 2009

Thank you very much. This was a very helpful tutorial and very easy to follow.

Louise November 5, 2009

Hi there

I saw an earlier comment about getting a gif animation to send/play automatically via e-mail. But I did not see a reply … did I miss it, or? I have successfully made a gif (saved as html and image), thanks to your super simple tutorial, but cannot mail it as an automatic animation. Would love to know how to do that. Could you explain how to do that, or direct me to your previous reply?
Thanks.

Also, I am v. curious how you make an e-mail newsletter with text and pics and animations … or is that getting too complicated?

THANKYOU!

Heidi November 5, 2009

drag it onto your web browser?

Frances November 7, 2009

Hi there guys! I’ve been wanting to animate some layouts by .gif for a long while now. I use them for Neopets (Nerdy, I know) which is why it must be in that format, but since I got CS3 the quality of the image(s) has been really crappy. :c Any ideas? No amount of tweaking seems to correct it.

https://img269.imageshack.us/img269/2518/istarexample2.gif

That was just me practicing an idea, and you’ll notice the animed star is still… pixely? Not nearly as clear as yours or the others I’ve seen. Help would be <3ed!

Juliette November 8, 2009

Hey guys

I’m getting crazy trying to understad how to simply create an ANIMATED GIF, made of 3 different “jpeg” images, with Photoshop or Flash CS4 !!!!

Can anybody help me please ???????

tx !!!!!!

pnamajck November 8, 2009

Juliette Says:
November 8th, 2009 at 10:46 am
Can anybody help me please ?

save each image as gif . . . NOT jpg.

photoshop_cs series no longer offers image_ready (animator) . . . rather, the animator comes packaged inside of photoshop itself . . . go to window / animation.

pigmango November 8, 2009

Juliette: just put all 3 jpegs in the one photoshop document, on three different layers. Put the first pic in the animation on the top layer, 2nd on layer under it, 3rd on the bottom layer.

Now go up to Window and pull down to Animation. A window will open within photoshop. Switch to frame mode by clicking the bottom right hand button in the animation window.

Then come back and go through this tutorial. Good luck.

Jonatan November 9, 2009

You shure helped me!, i only wanted to know how to export, because i used to use image ready, but with the CS3 i didn’t knew a thing!

Jessica November 11, 2009

I’m having the same problem as Mike but no one has replied to his comment :{
I can’t figure out how to move the rocket without having it move in all the other frames
I even tried to make a copy of the rocket and flame and move it but when i tween it the first rocket fades out and the second one fades in
can anyone help me out?

blu ray ripper November 13, 2009

hank you very much. This was a very helpful tutorial and very easy to follow.

dward November 17, 2009

thanks for posting this and the files! that was WAAAAY easier than I thought! you rock!

Sandip November 18, 2009

Really Nice……Thanks.

myspace 2.0 layouts November 19, 2009

seriously, this blog is sick . I think im gonna stick around and read about 2 of your posts. Your friend

Laurie November 20, 2009

I just did a 40 frame photo gif from this and it came out fine, skipped the part about adding frames, didn’t need to, but did do “tween”, just in case. Built all layers from jpegs, but could have used photoshop files also. Size the images FIRST. You can look at “preview” in save for web and devices in CS4 before saving and go back and adjust the time for each frame, it helps a lot.

wendy November 21, 2009

The layers I duplicated are all the same. I don’t know how you made the 6 different frames (maybe I should call they layers).

adam November 27, 2009

I’m having the same problem as Mike and Jessica above. “I can’t figure out how to move the rocket without having it move in all the other frames.” Is there a correct setting in the animation or layers panel (or combination) that lets you independently alter a layer on a given frame?

You life November 27, 2009

Trank you!

Jeff November 28, 2009

What trick is there to making an animated gif play within an e-mail?

I would like the gif to play when the recipient opens the e-mail.

Thanks!

Nice forum!

Jamison November 30, 2009

I got the animated .gif to work fine and posted on my website. I have a similar question to what Matt_U asked before. I’m using Dreamweaver to create my site and the animated gif as the homepage. Is there any way I can make the hotspot over the animated portion time sensitive so I can set the href link to change at the same rate as the gif changes?

Great forum on here, this really helped me a lot.

Thanks!

Snow December 1, 2009

Thank you for the guide! It is very helpful! I can’t thank you enough! 🙂
Thank you for helping us newbies on Animation, Keep the Good Work! 🙂

Please do always take it easy and always remember to have fun! 🙂

Take care and God Bless! 🙂

Phil December 1, 2009

Great simple to understand tutorial. Thanks a million!

Tony December 3, 2009

I would like to know if you could apply the same animation effect with Photoshop x ray.

Margaret O'Hare December 5, 2009

FRAMES PER SECOND
Problem when saved for W&D:
10 second animation on the timeline set at 30fps but when saved to web and devices the gif plays for 30 seconds presumably at 10 fps.
Cracking up, where am I going wrong?!
Advice appreciated. Great site btw.

Margaret O'Hare December 5, 2009

To clarify, I’m in CS4.
(fps query above) thanks M

Simon (西門) December 5, 2009

真的十分管用

Rajan Singh Patialvi December 8, 2009

Really Great Sharing…thanks

cubex December 8, 2009

thanks, it really helps a lot.. very smooth and nice.. thanks again..

sinu December 9, 2009

thnxz a lot dude !! help me lot and saved my day

Kim December 10, 2009

Hello! This was very helpful. Thanks for posting this. :] I’ve made my first animation and I’d say it was ok. If you want to see it, here’s the link: https://ehkasi.tumblr.com/post/278231110/this-is-my-first-attempt-in-animation-sure-go
Thanks again for this! :]

Trinidad Boxer December 14, 2009

Hi!. Thanks a bunch for the info. I’ve been digging around looking some info up for shool, but i think i’m getting lost!. Yahoo lead me here – good for you i suppose! Keep up the great information. I will be coming back over here in a couple of days to see if there is any more info.

Margaret O'Hare December 14, 2009

Frame per second issue…
Hi again, anyone out there with a slant on the problem above posted 5th dec.? Many thanks
M

Sandi December 14, 2009

Anyone have a problem with Photoshop CS3 crashing immediately after selecting “Save for Web and Devices?” I’ve created an animation in Photoshop, but can’t use it until I can save it for web and devices. Is there another way to save it?

cheryl December 15, 2009

I am having some trouble getting my animation to work on my webpage. I have animated a photograph and it works in photoshop, and in email, but when I put it on the webpage there is no animation. I have followed the your instructions for “Save for web devices” and it works in photoshop. Is there something I am missing in the settings to get it to animate online?

pigmango December 15, 2009

Cheryl: are you saving both images and html? You will then need to upload the images folder and the html to your website. The html is what plays – and it refers to the file in the images folder.

cheryl December 15, 2009

I think so, I uploaded the file to my images folder and then inserted the html code so it would play, but it doesn’t. The image shows up, so it is linking properly, but it still isn’t animated.

pigmango December 15, 2009

Cheryl: Just try uploading the html and the images folder together without putting the images into another folder. The html has been told where to reference, but it can’t find it if it has been moved into another folder. That’s why you see the first frame (the gif is on your server) but it doesn’t play – the html can no longer see it.

sandi December 15, 2009

Posted last night about Photoshop (CS3) crashing when selecting the “extract” filter and when saving “for web and devices.” Think I solved the problem, so I thought I’d share. I did a clean reinstall of CS3 in the “safe” mode. (Reboot the mac by shutting down, restarting then holding down the shift key immediately after you hear the chime. Once you get the gray apple and the wacky looking gear thingy, you can release the shift key. Your computer will take 5 or so minutes to reboot, but once it doesn’t you can reinstall software.) Reinstalling software this way has helped me when both MS Office and Photoshop were acting quirky.

Pat December 16, 2009

I am a student who is trying to save the gif file I just made in the instructions above (in CS3), and I am unable to save using the “save for Web & Devices” command. It appears grayed out, and will not let me click on it. I am using a Mac running OSX, if it matters.

GLEN December 18, 2009

AWESOME.
THANK YOU.
SUPER HELPFUL.

Alvaro December 18, 2009

Hiya … I found this site by mistake. I was looking in Bing for Antivirus software that I had already purchased when I found your site, I must say your page is really informative, I just love the theme, its amazing!. I don’t have the time today to totally read your entire site but I have bookmarked it and also signed up for your RSS feeds. I’ll back in a day or two. Thanks again for a awesome site.

nosyt December 21, 2009

decent tutorial, 3/5 stars. I dont know what these people are talking about when they say it’s the best tutorial ever. to be the best, it has to have a step by step WITH PHOTO, and a lot of steps are missing (ie: “On the first frame, turn off visibility for all layers you do not want visible at the start of your animation. “) . WTF does that even mean? i finally figured it out in photoshop and the words are different.

Darwin December 22, 2009

the part where you say save for webpage, that is all good but can you give in more detail how to implement the banner into my webpage. dont you have to add the html information in? Thank you

irena December 26, 2009

concise and extremely helpful: tnx!

manny December 28, 2009

Is photoshop cs3 capable of playing back animated gif saved from a website and already in gif format?

RanaSpot December 30, 2009

this is very helpful ^.^

Anssi December 30, 2009

Very cool! 🙂

pawep December 30, 2009

beh 😛 easyyyy :S

Astho December 30, 2009

Cool tip..
thanks…

zaki December 30, 2009

Its so esy nd interesting

Dar January 1, 2010

Thanks a lot guys.

Kitty January 1, 2010

Hi Pig,

I read the tut, but I have this problem, I don’t have the animations option under Window. I also looked and i don’t have Imageready either. I have the Photoshop and Premire Elements 8. Can you please help, I really want to make and animation.

Bennie January 2, 2010

Hi,I have the same problem as Kitty, am running Adobe Elements, but have no animation option under window. 🙁

blu ray to mp4 January 2, 2010

Thanks a lot guys.

vicktor January 5, 2010

wwwwwwwwwwoooooooooooowwwwww you are all a bunch of fffaaaagggss

Vicktor The 2nd January 5, 2010

Fuckin Faggots

Dr. Faggot January 6, 2010

Austin Dueck has a tiny peckerr 😉

Dr. Faggot January 6, 2010

just kidding ahahaha or am i…

Mr Lee January 6, 2010

you guys shouldn’t be saying that online

Akon January 6, 2010

yo wuz up

Austin Dueck January 6, 2010

Yes it is infact fact very small but that doesn’t prevent me from liking men

Austin Dueck January 6, 2010

JUst kidding

April January 7, 2010

@Kevin Betker: Whoa, you just saved me so much time. I’ve been doing this really annoying runaround involving Quicktime Pro. Your way is so much better. Thanks!

Vicktor The 2nd January 8, 2010

poooooooopy paaaants

Sandy January 9, 2010

Very short and to the point tutorial. Thank you =)

Saggi Malachi January 10, 2010

Thanks for a great and quick tutorial.

For a quick preview you can also click ‘Preview’ from the “Save for Web & Devices” window and it will open in your default browser.

Glenn January 11, 2010

wow, i love the animated stick guy. I love this one.. I am using Photoshop CS3, I missed the imageready.. which was removed from the photoshop package.

fag January 12, 2010

your a ruh tard

Web Design Philadelphia January 14, 2010

Very interesting. I like the idea. I use to use flash to do these simple animations, but it seems there is a better more efficient way. Five thumbs up to this article.

viktor January 18, 2010

glenn has a tiiiniy weinerr !!!!

Noga January 19, 2010

Nice and easy to follow, thank u very much! I have Windows (don’t shoot me…) and had no troubles at all.
Also thank u Saggi Malachi for the “preview” tip

sandor January 19, 2010

Nice, useful tutorial. Thank you very much.

Soraya January 20, 2010

Thank you for this. Took me quite a while to figure out how to actually work layers, but once i did that the rest was easy thanks to this. Can’t wait to make my site really snazzy now! 🙂

amma January 25, 2010

wow, this is so cool. I must try this.

Anonamas January 26, 2010

nah nah nah nah NO man this tut ain’t workin cus I ain’t stooping, to a person using m@c, what a low life f@g. I use da M1cr0s0ft, da best operating system, so i ain’t giv a cr@p about ur m0thafckr m@c,.. by the way, im black.

Holly January 29, 2010

I still have not see any reply for how to make the animation gif to work on email. I made the gif animation. But it did not work by sending out by email.

Please help!

ThisFails January 31, 2010

this didnt help a bit

petec February 2, 2010

I haven’t done this for a while and this was a great refresher, however In cs2 hen i would save the gif, i could email to a client and they could see it run right in their email. Now it is simply a static pic of frame 1. Am I doing something wrong? Is there a way to make this work like that?
It appears Holly is having the same problem and has not had a reply.

pigmango February 2, 2010

Petec and Holly: I’ve found the same thing, and I believe that it is a MS issue, not photoshop. (I may be wrong).

BUT to get around it, I hang the html and gif off my website and email the client the url of the html.

koyBoy February 5, 2010

I there a way to add links to the Animation frames? Like a slide show with each frame having it’s own link.

jayadev February 9, 2010

but in CS4, Bridge gives you all the tools you need to import images into multiple layers in one Photoshop document.

1. Open Bridge.
2. Navigate to the directory that your images reside in
3. Select the files. Â You can click and drag around them, or use the shift button to select multiple files.
4. Now in the menu bar select Tools > Photoshop > Load Files into Photoshop layers

Now all those images are in one Photoshop files and you can get your edit or design on. Â How simple was that?

Geoff February 9, 2010

Petec and Holly: The problem with e-mailing animations is that most e-mail applications (and most businesses) will default to a non-HTML view style when opening e-mails because of virus threats.

I know that in MS Outlook there is an option to disable animations as part of the HTML based e-mail page. I would guess that is your problem.

If you are sending an e-mail and want to test an animated *.gif, try using an HTML email program like GMail or Yahoo. Both of those enable image encoding in emails and then “give” the receiver the option to display them with a click.

I hope this helps.

Geoff February 9, 2010

Slightly off topic question.

I have the CS4 web suite and I use just a few of the programs to build the custom button animations for my websites. Here is what I do now.

I use Photoshop script to automate the movement of a layer in a comp and then I Save As… the image. So, I’m using just one *.psd file and creating as many images as I need from it for the individual frames.

OK here is the problem. As far as I can tell, there is NO WAY to use the same .psd comp over and over again in scripts to create files that have a unique name. Something like Dog_01.png followed by Dog_02.png ect.

Right now I run the script and it saves a file like Dog.png and if I rerun the script it copies over the same file.

I know there are some of you thinking, “just use batch” but that doesn’t work in this case (I think) because I’m not batch processing lots of images that already exist, just using on PSD that’s already open.

Does anyone have a method of scripting a movement of a layer in PS CS4 and then saving the file with a unique name multiple times?

amie February 16, 2010

Hi, Im having trouble with animated GIF’s. There is an animated GIF that is available for me to save and use on my website but it seems whatever format i save it in when i uplaod it ontpo my site its just a still image and does not flick to other pages in the animation as its supposed to.
The animations i am trying to use are found here –
https://www.bourneleisuresales.co.uk/affiliates.php
The animations are under the resources tab and i have tried all 5 of the animated banners at the bottom but none of them work on my site, can you tell me where I am going wrong and how to do it?

Earl Cartwright February 20, 2010

hello my name is Earl Cartwright
for some reason I got into my head to do a animated gif and I cannot leave it alone in till I get one done here is my problem I am learning Photoshop CS4 on my own and I am 57 years old and had no formal training on computer if it would be possible for you to send me a step by step instruction on how to do this item I would immensely appreciate it I started with element 6 and went to element 8 and now I have CS4 it’s a little bit more complicated but I am learning it in elements I could create the animation and it would work but I could never save it to be used on a e-mail and that’s his exactly what I want to do your instructions on your website is helpful but not all clear so if you can get me going in the right direction I would be grateful thank you hope to hear from you Earl C.

jeri March 2, 2010

So cool and amazingly easy! Thanks!

Miss Honey March 6, 2010

Thank you very much for the tutorial! Just what I needed!

Andrew March 17, 2010

cool, thanks

qualitypoint March 22, 2010

It’s very useful for beginners.I have tried this.

Matar March 23, 2010

Thank you it is very useful

Sarah March 23, 2010

thnx..very crisp and clear instructions

zabe March 26, 2010

how can you not know this exist I was a bit surprise well… ok!

reymond March 30, 2010

wow…so, thanks for the tutorial
i hope this can be help.^^

Jeremy Attaway March 31, 2010

Had loads of fun with this. Didn’t take me long. I love PhotoShop, and I am taking a Abobe Flash Class this year, so I had well enough understanding. Thanks a bunch, this will be something I will never forget. ^.^

bw March 31, 2010

This was great. Thanks!

John Doesnt April 1, 2010

Best tutorial ever. It made me actually buy Photoshop 🙂

Ashley April 6, 2010

I did an animated gif project with my students for a high school class, and was wondering if there is an easy way to display all the completed assignments on one page somewhere? I’ve seen other teachers display them in a blog format but wasn’t sure if I could make a simple blank webpage and plug them all onto the page. Does anyone have any easy free ideas?

Thanks!

Ali April 8, 2010

thank you! I made some awesome dancing mod gifs.

Hitesh April 10, 2010

Thank you so much!
This my first experience to create animation by photoshop……

Thanks once again!!!!!!!!

awek telanjang April 13, 2010

Great thread. Enjoyed the posts…

logo contest April 19, 2010

Coool!! I like it! :))

flv converter April 20, 2010

very crisp and clear instructions

suck my nuts April 21, 2010

read my name

grant April 22, 2010

I like this post, simple tutorial and easy to follow.

h. April 26, 2010

Fantastic – very simple & works perfectly!

Kelly April 28, 2010

This is great….but how do I insert in email??? Using Entourage 2008.

convert hd video May 4, 2010

very crisp and clear instructions

sparrowbird May 6, 2010

Thank you so much. Great site but…
having created two short animations, saved in Image Ready as optimised GIFs using Web only colours, I have mixed results when sending as email attachments.
The animations jumped into action as soon as two friends opened their emails, the one I sent to myself wouldn’t open at all, only when I’d saved it and then opened it ( from the desk top) and several other unlucky recipients can only see the first frame as a still.
Oh blimey, what can I do?
Thank you to anyone who can help.

dvdkslr May 6, 2010

Hi, Anyone have an idea for adding sound to animated gifs? or adding animated gifs to sound might be more realistic.

Svenja May 7, 2010

This is super helpful and so easy to follow! Thank you so much!

GB May 7, 2010

Thanks so much! Easy, clear and helpful!

Bob May 10, 2010

I’ve got the same problem as Mike Jessica and Adam. I just can’t get the damn rocket to move upwards independently of the one in the other frames. Please someone enlighten us all ….

Ben May 11, 2010

Ashley Says:
April 6th, 2010 at 8:27 am

I did an animated gif project with my students for a high school class, and was wondering if there is an easy way to display all the completed assignments on one page somewhere? I’ve seen other teachers display them in a blog format but wasn’t sure if I could make a simple blank webpage and plug them all onto the page. Does anyone have any easy free idea?

If you still need help with this email me at bensschool@gmail.com

coupe 2010 May 14, 2010

I remember I tried this a while back. It brings back good memories. Nothing good seems to work the first time. How long did it take you? I look forward to your next story.

Very nice, thats what i am looking for. thank very much for this good description!

Joel May 21, 2010

Jessica and Mike and Bob and Adam,

I wonder if you’re using CS2 also. The tweening seems only to work with fades not with position for me in CS2. I don’t know how you’re trying to move the rocket, but if you select the two frames with the start and end position of the rocket and choose tween (position) then it should create the in between positions fo the rocket automatically. In my attempt, it isn’t doing it though, so what I did was I created the two positions of the rocket and then did Save for Web. In that save window, there’s an option that says Edit in Image Ready (this is Photoshop cs2, remember), so when I clicked it, I was able to get the tweening to work in Image Ready! Tehn I saved the gif in Image ready and it was fine. I’m not checking back here later, so don’t bother asking me Qs.

Carroll S. Leedel May 26, 2010

This blog was extremely usefull to me, thank you for that. This site provided me lots of good and usefull info. I also got a Blog about in the genre of design, its mainly about Blogger/Logo Design. maybe you can drop by some day so we could share some information. Well, I hope to hear from you soon and ones again, thank you for this great site!

Marc May 27, 2010

Hi, wonder if you can help me with a query, I am at present building an animated banner for my site, my question is: how do I link individual pages so that each product as it shows in the changing banner ad can be clicked upon … at present whichever page you link to, directs all the images to that particular page …. is there a way to link each layer seperately …. Thanks, Marc

pigmango May 27, 2010

Marc, the answer is no.

An animated gif can only have one link attached to the whole gif. This information is in the html file.

The only way to do what you want is in Flash.

Sabine June 3, 2010

thank you very much !! :] i learned a lot

fatalfemale June 4, 2010

I learn something new everyday! Thanks for sharing 🙂

film June 7, 2010

very good, thanks a lot

Nany June 15, 2010

How can I do this in CS4? the timeframe is different.. I’m confused.

Emmanuel Sibanda June 20, 2010

Thanks for the help…

Lee B. June 21, 2010

How do you open animated gif files in Photoshop CS4? Tried: ” Import video frames to layers, that does not work”

Srini June 22, 2010

Thank u,Very Nice

payday loans vancouver June 22, 2010

Thanks. This is really supportive for me.

loukaz June 23, 2010

awesome tut!
very helpful 🙂

skachatwarez June 27, 2010

Cкачать 100 бесплатно мультфильмы на сайте skachatwarez.RuDownload бесплатно на лучшем сайте – Раздачи ICQ – skachatwarez.Ru

shradha July 1, 2010

Thanks a lot!
Never knew about that.

Whodat July 1, 2010

Dude you made this look way too easy – thanks!

logithan July 2, 2010

i have done an animated loading picture in gif format in photoshop cs3 by using windows – animation and saved in file – save for web and device and the output comes perfectly and i applied in pc mobile device it doesnt animate can u give me clear solution for that

lookaroundyou July 9, 2010

thank you very much !! 🙂 i learned a lot

Kiddo July 9, 2010

I just wanna ask, when I’m saving the file. The “Save for Web and Devices” are gray out. Means that I can’t use that command. Anyone who can help me with that? Thanks. I’m a newbie in animation

rudatingnet July 11, 2010

Домашние животныеВсе о деньгах – описания _ ru-dating.Net

hulu downloader July 11, 2010

The only way to do what you want is in Flas

Юрий July 11, 2010

Популярные компьютерные игры и addons ко всем играмИгры для Nintendo Wii, а так же коды ко всем лучшим играм на лучшем сайте – neo-game.Ru

Гавриил July 13, 2010

Онлайн shop женских недорогих костюмовВсе женщины хотят выглядеть сексуально? Онлайн Магазин женских модных костюмов разных размеров, под любой стиль

Автандил July 14, 2010

Подвесные замшевые потолки фирмы Edelweiss недорогоПодвесные бесшовные,стильные, надежные и современные потолки фирмы Cerutti . Подвесные потолки – прайс лист

cod black ops July 16, 2010

A very well written post and an insightful one too. I have one question, I have CS2 and there is no tween option. What would be the best alternative?

Hoda July 17, 2010

Thank you very much. It’s very helpful 🙂

Knife4u July 20, 2010

Great tutorial!Never knew about that.
Thank you

Quick Student Loans July 21, 2010

Thanks for the write up! This is really some great stuff here! Wishing for a following post for the similar subject. 🙂

ttt July 22, 2010

Awesome!!
Thanks SO much 😛

pandaKrusher July 22, 2010

I just got a job as an animator for a cable TV network. Problem is, I lied on my resumé and have no experience with animation. These tips just saved my career! Thanks!

Mailing July 22, 2010

I just wanna ask, when I’m saving the file. The “Save for Web and Devices” are gray out. Means that I can’t use that command. Anyone who can help me with that? Thanks. I’m a newbie in animation

Jennifer July 26, 2010

Hi,

I was able to follow your instructions. Thank to that my animation is playing in Photoshop CS 3 but when I save for web and devices, it doesn’t play the animation. How do I save in GIF format that will automatically play the animation even if outside of photshop?

Thanks.

Jennifer

imaddy5 July 27, 2010

Thanks and wish u the best.

OwenEHU July 30, 2010

Hi there

Great tutorial but I am having problems trying to make it a smoother transition between my 3 slides on a gif I am creating. It is all quite jumpy at the moment and I need it to have a better flow (if that makes sense!)

Any tips?

Thanks

Owen

Rachael August 1, 2010

My computer opened the Example animation and it just froze and the animations wont pop up. It is like blank with none of the pictures of the rocket excep for the first slide.

Neeeeeed help.
Thank-you
Rachael.

sujan lama August 5, 2010

thank you for the tutorial

evo3cx August 7, 2010

i was able to follow your instructions. Thank to that my animation is playing in Photoshop CS 3

Bruno August 22, 2010

Works perfectly, very cute animations btw 🙂
B

Paul Davies August 24, 2010

The Kindle app is optimized for the iPad, iPhone, and iPod touch, providing users the ability to read Kindle books using a beautiful, easy-to-use interface. You can discover and read over 630,000 books in the Kindle Store, including the latest best sellers and new releases. You can also read your Kindle books on your Kindle, Kindle DX, PC, Mac, BlackBerry, and Android-based device. Amazon Whispersync automatically syncs your last page read, bookmarks, notes, and highlights across all of your devices, so you can pick up right where you left off no matter what device you are reading on.

Pete August 24, 2010

That’s the simplest and best explained tutorial I’ve seen on this subject. Thanks a lot. I’ve tried to making animated gifs for a while and have always been put off by what has appeared to be complicated instructions. I think I’ve just had what could be described as a moment of clarity.

durgesh August 27, 2010

Thanks a lot…..gr8 article……i have played wid photoshop before but never knew this. thanks a lot.

I like this website shown and this has provided myself some sort of commitment to succeed for some cause, so thanks.

Carter Birden September 4, 2010

I’m wondering what the name of this theme Is it free or paid? Which site did you get it from? Thanks in advance for your response!

mouth guard September 4, 2010

Nice information, many thanks to the author! It is good and correct. The usefulness and significance is overwhelming. Thanks again for this very informative post and good luck!

nailah September 6, 2010

I’m looking for make animation with adobe photoshop..so that i register forum adobe.. tengkiu so much..

gossip girl season 4 episodes September 8, 2010

Great share thanks for the read!

aaadesigns September 8, 2010

Great Tutorial, However it seems some people are still struggling.

Let us know if you need more help on this topic, or send a direct request via our website aaadesign.co.uk

gossip girl season 4 September 9, 2010

Thanks good share!

watch gossip girl season 4 September 9, 2010

Thanks nice share, great read!

eugene lee September 10, 2010

i never comment.
But your animated comic at the top was sooo awesome i just had to tell you how much i enjoyed it =D
keep up the joyful work

Michigan Podiatrists September 12, 2010

What a great and detailed tutorial on how to build animated GIFs in Photoshop. Have used it to build a banner ad already.

joe snow September 12, 2010

What versions of Photoshop can do this though?

Howard Hughes September 16, 2010

Thanks for this. Love the illustration and the instructions were fool proof i.e. I got them!

Farah Quinnett September 19, 2010

Exactly what I have been thinking. Your content was unbelievable. To get your lover back is not the hardest of the accomplishments But it sure may cost some time

vishal September 22, 2010

hey, am having problem to save animated file. when i tried to save it as SAVE FOR WEB AND SERVICES, it says ‘NOT ENOUGH MEMORY’ plz help me out.

Yaser Harara September 26, 2010

Nice an esy information.

will September 26, 2010

Vishal – you need to delete items from the drive that you are saving to. Or empty your trash. Or save to another location (external drive/ memory stick etc)…

Nice tutorial – many thanks 🙂

Whoever September 26, 2010

I know how to use it. so after save in my picture libraries and then make a new fold, then save animates in new fold. then click “open with”, then “Windows photo viewer”.. notice its not work that didn’t move animate, what the hell?! I use Window 7/HP 64 bits laptop. so can you help me a bit for how do I want see it move animate in window photo viewer before I send it (upload in Myspace or FB, other) to my friends.

Whoever September 26, 2010

Oh and I running Adobe Photoshop 7.0. that is little old and everything is work in my laptop but….

vishal September 29, 2010

thanks will

off topic chat October 6, 2010

Oh, thanks for this! I’m going to give it a try for some topic icons for my site. Would love to have animated gifs instead of boring old pngs!
Cheers 🙂

Newgeneration techniques October 7, 2010

Great man I made an animated GIF for the first time, that is because of you, keep it up. thanx again and again.

Bron August 16, 2011

figured it out:
had to change to 72dpi.
Menu: image, image size, resolution: 72pix/inch

I have more than 400Gb free space…

Anita August 16, 2011

Thanks for a very informative article. I did it and it worked but I wanted a transparent background. It stayed transparent through the Save for Web & Devices, but after it was saved, it had a white background. What can I do to keep the background transparent? Thanks! PS – I’m using CS5.5

Linda September 14, 2011

Way cool and easier than I thought. Thanks 🙂

jeff matin September 14, 2011

Excellent post. Suitable for a beginner like me.

Upendra Chaubey August 29, 2012

Dear Anita,
Just delete the Background from the first set of file… after that it will work without a white background.

Upenrda

Vagnerd September 17, 2012

thank you, really helped my left brain to comprehend how the timeline works

Batman September 17, 2012

I thought i could challenage myself and do it myself but just could’nt……. This helps alot, cheers

Batman September 17, 2012

Gee this is simple and helps a thousasnd, cheers

Write A Comment