Creative Tip: Build Animated GIFs in Photoshop.
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.
July 5th, 2009 at 10:58 am
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.
http://apexmanagementgroup.ca/animatedgif.html
Can someone please help me out. Thanks a lot!
July 5th, 2009 at 3:24 pm
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.
July 5th, 2009 at 4:10 pm
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!
July 13th, 2009 at 1:51 pm
I like this, thx!!
with love from Holland!
July 16th, 2009 at 11:36 pm
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.
July 19th, 2009 at 8:02 am
thnx very much for this great info.
July 20th, 2009 at 8:24 pm
I LOVED THIS>.. added some turbulance…
July 26th, 2009 at 5:11 am
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.
July 29th, 2009 at 7:27 am
its superb! it helps me a lot.
July 30th, 2009 at 7:27 pm
Can’t thank you more..
August 1st, 2009 at 2:47 am
so cool … thank you guys…. i will just lock someone in the rocket so it will be funny
)
August 7th, 2009 at 6:35 am
tnx for the tut . . . would be nice if photoshop would offer options to export for animated *.png as well . . . instead of only animated *.gif .
August 7th, 2009 at 11:28 pm
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
August 7th, 2009 at 11:38 pm
can i know about 3d option in cs3 ps
August 12th, 2009 at 4:14 am
Cool, thanx.. I’v learnd to create animations in like 6 minutes
. Ciao
August 13th, 2009 at 10:24 pm
Great examples! Exactly what I needed!
thanks
August 23rd, 2009 at 5:23 am
hi
tank
my web by tutorial photoshop
http://www.tutorial.40sotoon.net
August 26th, 2009 at 5:43 am
Thanks is very helpfull for me
September 5th, 2009 at 6:06 pm
You can make animated GIFs a lot easier now with http://www.gifsoup.com. You can capture animated GIFs from YouTube videos and publish them instantly for free!
September 7th, 2009 at 8:45 pm
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.
September 21st, 2009 at 10:28 am
thank you so much!! it helped me loads!!
September 23rd, 2009 at 1:22 pm
Cheers for the info guys.
September 24th, 2009 at 2:03 pm
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!
September 27th, 2009 at 5:52 pm
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.
September 27th, 2009 at 6:21 pm
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.
September 29th, 2009 at 7:19 am
Too bad Photoshop Element doesn’t have several timing TT
Anyway, thanks for this tutorial!
It is really help me reminding what to do!
October 9th, 2009 at 2:46 am
Thanks a ton for this tutorial !!!
October 9th, 2009 at 2:50 am
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.
October 10th, 2009 at 7:32 am
I’ve written a tutorial like this for Windows XP at:
http://makeyourownbeboskin.blogspot.com/2007/07/creating-flashing-glowing-text.html
let me know what you think
October 13th, 2009 at 12:38 am
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
October 19th, 2009 at 12:06 pm
This is great! you did an awesome tutorial here.. keep it up man!
October 24th, 2009 at 1:25 pm
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!?!
October 24th, 2009 at 1:57 pm
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.
October 25th, 2009 at 10:12 am
oh! thank you that simple is clear.
October 26th, 2009 at 1:55 pm
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
October 27th, 2009 at 7:24 pm
nice tutorial….
here’s another tutorial
How to make animated pictures in adobe photoshop
October 28th, 2009 at 1:25 am
Thanks for this I am very happy . Keep more ideas ..
October 28th, 2009 at 9:04 am
thanx pigmango… knew it would be something simple!
October 28th, 2009 at 2:14 pm
This saved my day. Thanks a lot.
October 31st, 2009 at 5:56 pm
Thank you very much. This was a very helpful tutorial and very easy to follow.
November 5th, 2009 at 2:42 pm
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!
November 5th, 2009 at 4:02 pm
drag it onto your web browser?
November 7th, 2009 at 11:03 pm
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.
http://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!
November 8th, 2009 at 10:46 am
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 !!!!!!
November 8th, 2009 at 1:34 pm
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.
November 8th, 2009 at 1:41 pm
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.
November 9th, 2009 at 6:24 pm
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!
November 11th, 2009 at 8:57 pm
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?
November 13th, 2009 at 8:02 pm
hank you very much. This was a very helpful tutorial and very easy to follow.
November 17th, 2009 at 3:06 pm
thanks for posting this and the files! that was WAAAAY easier than I thought! you rock!
November 18th, 2009 at 1:40 am
Really Nice……Thanks.
November 19th, 2009 at 9:57 pm
seriously, this blog is sick . I think im gonna stick around and read about 2 of your posts. Your friend
November 20th, 2009 at 6:21 am
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.
November 21st, 2009 at 4:36 pm
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).
November 27th, 2009 at 12:44 pm
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?
November 27th, 2009 at 11:44 pm
Trank you!
November 28th, 2009 at 1:17 am
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!
November 30th, 2009 at 6:30 am
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!
December 1st, 2009 at 9:03 am
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!
December 1st, 2009 at 12:50 pm
Great simple to understand tutorial. Thanks a million!
December 3rd, 2009 at 7:30 am
I would like to know if you could apply the same animation effect with Photoshop x ray.
December 5th, 2009 at 5:54 am
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.
December 5th, 2009 at 6:25 am
To clarify, I’m in CS4.
(fps query above) thanks M
December 5th, 2009 at 5:35 pm
真的十分管用
December 8th, 2009 at 8:24 am
Really Great Sharing…thanks
December 8th, 2009 at 5:40 pm
thanks, it really helps a lot.. very smooth and nice.. thanks again..
December 9th, 2009 at 4:57 am
thnxz a lot dude !! help me lot and saved my day
December 10th, 2009 at 5:31 pm
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: http://ehkasi.tumblr.com/post/278231110/this-is-my-first-attempt-in-animation-sure-go
Thanks again for this! :]
December 14th, 2009 at 1:41 pm
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.
December 14th, 2009 at 1:43 pm
Frame per second issue…
Hi again, anyone out there with a slant on the problem above posted 5th dec.? Many thanks
M
December 14th, 2009 at 10:23 pm
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?
December 15th, 2009 at 12:10 pm
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?
December 15th, 2009 at 12:32 pm
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.
December 15th, 2009 at 1:00 pm
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.
December 15th, 2009 at 1:09 pm
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.
December 15th, 2009 at 1:14 pm
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.
December 16th, 2009 at 6:35 am
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.
December 18th, 2009 at 8:02 am
AWESOME.
THANK YOU.
SUPER HELPFUL.
December 18th, 2009 at 11:00 am
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.
December 21st, 2009 at 12:47 am
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.
December 22nd, 2009 at 11:54 pm
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
December 26th, 2009 at 2:16 pm
concise and extremely helpful: tnx!
December 28th, 2009 at 4:54 pm
Is photoshop cs3 capable of playing back animated gif saved from a website and already in gif format?
December 30th, 2009 at 9:26 am
this is very helpful ^.^
December 30th, 2009 at 9:54 am
Very cool!
December 30th, 2009 at 11:31 am
beh
easyyyy :S
December 30th, 2009 at 8:46 pm
Cool tip..
thanks…
December 30th, 2009 at 10:11 pm
Its so esy nd interesting
January 1st, 2010 at 12:49 am
Thanks a lot guys.
January 1st, 2010 at 10:28 pm
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.
January 2nd, 2010 at 3:18 am
Hi,I have the same problem as Kitty, am running Adobe Elements, but have no animation option under window.
January 2nd, 2010 at 9:15 pm
Thanks a lot guys.
January 5th, 2010 at 8:14 am
wwwwwwwwwwoooooooooooowwwwww you are all a bunch of fffaaaagggss
January 5th, 2010 at 8:16 am
Fuckin Faggots
January 6th, 2010 at 8:09 am
Austin Dueck has a tiny peckerr
January 6th, 2010 at 8:11 am
just kidding ahahaha or am i…
January 6th, 2010 at 8:12 am
you guys shouldn’t be saying that online
January 6th, 2010 at 8:14 am
yo wuz up
January 6th, 2010 at 8:14 am
Yes it is infact fact very small but that doesn’t prevent me from liking men
January 6th, 2010 at 8:15 am
JUst kidding
January 7th, 2010 at 10:44 pm
@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!
January 8th, 2010 at 8:00 am
poooooooopy paaaants
January 9th, 2010 at 1:23 pm
Very short and to the point tutorial. Thank you =)
January 10th, 2010 at 1:55 pm
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.
January 11th, 2010 at 1:26 am
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.
January 12th, 2010 at 7:45 am
your a ruh tard
January 14th, 2010 at 1:32 pm
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.
January 18th, 2010 at 7:48 am
glenn has a tiiiniy weinerr !!!!
January 19th, 2010 at 6:16 am
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
January 19th, 2010 at 5:48 pm
Nice, useful tutorial. Thank you very much.
January 20th, 2010 at 10:02 am
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!
January 25th, 2010 at 4:45 pm
wow, this is so cool. I must try this.
January 26th, 2010 at 1:24 am
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.
January 29th, 2010 at 7:11 pm
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!
January 31st, 2010 at 8:29 pm
this didnt help a bit
February 2nd, 2010 at 7:48 pm
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.
February 2nd, 2010 at 8:00 pm
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.
February 5th, 2010 at 12:27 pm
I there a way to add links to the Animation frames? Like a slide show with each frame having it’s own link.