Photoshop Tutorial: How To Create Animated Gifs Using Ps & Imageready 15 step tutorial =D

[mimi_m 0]

I noticed in the discussion about animations that a lot of people don't use IR, or don't know how. I love IR, and once you know how to make an animation, it becomes so simple! So I decided this tutorial may help people…

 

15 quick steps… nothing complicated, just the basic stuff. I will be using PS and IR version 7 for this tutorial.

 

1. In photoshop, create a small image, it can be anything you want.

 

For this example, I created a pixel-based image of 'Duo' from Gundam Wing. It doesn’t have to be pixel-based, but I like the way these look. If you don’t know how to create pixel-art, there’s a million tutorials on the web, just search for them. Basically, it's just creating an image using only dots (or pixels) using the pencil tool with a size of 1px in photoshop.

 

2. Save it as a GIF image. (see thumbnail 1)

 

 

3. Now, using the same image, change it slightly in any way you want. I'm making Duo blink, so I just changed his eyes to being closed in this image (see thumbnail 2).

 

 

It's IMPORTANT to note that you should only make a SLIGHT change to the image. Don't change the size at all (ie. keep the width and length the same), and keep the basic shapes or outlines the same. (If you practice and practice, you'll come to understand how to make just very, very slight changes... but we won't get into that now).

 

4. Save this image as another GIF, with a different name. Now you have two images that are the same size and basically the same in appearance.

 

5. Open them in ImageReady. In ImageReady, leave the settings to default (and all should be fine). Make sure you have the Layers window, the Animation window, and the Tools window open (they can all be found in 'Window' in the menu tab). These are all we'll need for this tutorial.

 

6. Click you're second image (by default, the 'original' tab should be chosen). Click on the 'Move' Tool in the tools window, and click and drag your second image ontop of your first image.

 

IMPORTANT: You need to make sure that the second image fits PERFECTLY over the first one. This is essential in making the animation work, and that's why I stressed earlier about keeping them the same size.

 

7. You can close the second image now. We don't need it anymore. Now in the Layers window, you should have two layers… the original GIF image (Duo with open eyes) first, then ontop, a second layer with your second image (Duo with closed eyes).

 

8. Click on the animation window, and you should see a little picture of your second image (these are called FRAMES) with the number '1' in the corner of it. Click the Frame Duplication button on the bottom on the animation window, and a second frame should appear in the window next to the first one – exactly the same as the first but with a number '2' in the corner. (see thumbnail 3)

 

 

9. Click the first frame again in the animation window (the one with the number '1' in the corner), then go to the Layers window, and HIDE the layer that has your SECOND image on it. (you hide by clicking the little eye icon to the left of the layer). The frame with '1' in the corner should now look like your FIRST image (duo's eyes open), while the second frame ('2' in corner), should remain as your second image (duo's eyes closed).

 

10. Now for the animation part! On the bottom left corner of the animation window, you’ll see a tab saying 'once' with an arrow next to it. Click the arrow and change the 'once' to 'forever'. This will make the animation continuous, instead of just moving once.

 

11. Directly below each frame you should see '0 sec' and a little arrow. These are to specify the length each frame will run for when the animation plays. Click that little arrow for the first frame, and a menu will come up with a list of times you can choose (these are all in SECONDS, by the way). Choose a time you want the first frame of the animation to play for, or click 'Other…' to specify your own time. For my first Duo frame, I specified the time to be 1.3 seconds.

 

12. Click the second frame, and specify the time you want THAT frame to run for. I chose my second frame (closed eyes) to run for 0.5 seconds.

 

13. After this, you can click the 'PLAY' button on the bottom on the animation tab to play your animation and see how it looks. It will play in the image window it originally opened in. YAY! Now my Duo blinks!

 

NOTE that if you specified really QUICK times for your frames, it might go slow on ImageReady, so just make sure to note that.

 

Press stop before saving.

 

14. To SAVE the animated GIF, go to "File > Save Optimized As…" and a save window will pop up. Choose the GIF's destination and name it anything you like. Save as type: Images Only (*.gif), and the settings: custom. (these should automatically be present by default)

 

15. NOW you have a working animated GIF! Just close ImageReady (you don't have to save changes), open your animation in a browser or image viewer or whatever… and watch it move! My Duo now blinks proudly! (see thumbnail 4)

 

 

(awww isn't he cute?)

 

Just some side notes: If you want to make more than one frame, no prob. Just keep making the VERY slight changes to each image, drag all of them so that the layers are in order ontop of the first image, and duplicate as many frames as you need to have them all there (remember you just hide another layer for another frame). Keep practicing to get really good! I use to create all these smilies of my friends, and at one stage I was into those little dolls, you know? Lol... teen years.

 

And you don't just have to make animations with pixel-art, you can manipulate normal images, too. But that's a little harder. I created this one for my sister's live journal last year, but it kinda looks scarey to me now... I don't really do animations that aren't pixel based. (watch his eye)

 

 

Just ask me if you don't understand anything or if you have any trouble.

 

Have fun chickadees!

[austiniskoge 0]

well that's pretty cool. I like how simple and easy it is- you don't have to run out and get any of those animated GIF creators.The only thing is, I'm working way in the future with Photoshop CS2. Anybody know how to do that in CS2? I've never seen that Animation window. Does it only pull up with GIFs?Most likely nobody will know... this thread is pretty old.

[KiLLerxQu33n 0]

good tutorialreally easy to followthanks for posting it!

[iGuest 3]

This tutorial works on CF2, no problems, just made my first one!-Jaddodd

[iGuest 3]

A great help - could not do it myself and your guide was so easy to follow unlike directions elsewhere - looking to do zoom in and out now - have you any tutorials on that one. Many thanks again.-Margaret

[Morten 0]

Just ask me if you don't understand anything or if you have any trouble.
Have fun chickadees!

Hi.. I just followed a tutorial on Youtube on how to create a swf in PS.
I am now looking at 121 files in the animation box. I have no problem exporting this as a swf. But I want it to become a GIF file.
I have tried many ways, but everytime i save it, it only shows a gray background (1st frame) with no animation.

Can you help me?

[iGuest 3]

Your animation tutorial

Photoshop Tutorial: How To Create Animated Gifs Using Ps & Imageready

 

Hello,

 

Just used your Gif animation tutorial!

Thanks for the help.

 

Very easy to follow directions.

My question is how can I attach to e-mail so

That it works? Mine work on the web but when I

Attach to e-mail no animation.

 

Thanks for any help,

John

 

-John Dixon

[iGuest 3]

animated gif on imageready

Photoshop Tutorial: How To Create Animated Gifs Using Ps & Imageready

 

I'm trying to animate a bunch of simple black and white drawings all identical size but I can't align them when I drop them into a new file using the move tool. Any help?

 

 

 

THANKS!

 

 

 

-Dave

[iGuest 3]

Replying to FeedbackerYou have to change your email format to html-reply by blake

[iGuest 3]

animated gif saved file sizePhotoshop Tutorial: How To Create Animated Gifs Using Ps & Imageready

Hello

Great explanation, but I am stck I am sure at a pretty basic place. I need to saved an animated Gif at 30K, the size of my pic is 468 pixels x 60 pixels. Each GIF pic I have saved is no more than 10 kps. In image ready I have 31 slides of which 3 have a delay of 10 seconds while the rest are tweened between them with no delay. 

Problem 1: when saving via "file>export>macromedia flash swf" I get an swf file saved at 109 kProblem 2: when saving fvia "file>save optimised as> image only" it saves my animated gif as a blank pic (468 x 60 pixels) and when previewed it opens in photoshop and is a locked layer named index.

Please tell me you can help cause I'm under deadline and stuck with no directionThank you chris

[iGuest 3]

I can't drag the image.

And when I wanted to open the images in ImageReady, it asked me to convert image to 8 bit RGB color mode.

 

[iGuest 3]

IR Animated GIFs become very pixilatedPhotoshop Tutorial: How To Create Animated Gifs Using Ps & Imageready

I created a number of animated gifs with IR but ocassionally the smalle ones become very pixilated.

I am using images that are all 150*150 (100 resolution).

Here is my process:

Once I have created the pictures and put them in the animation window,

1) I optimize the animation from the menu on the side of the animation window.

 2) Then from the file menu, I  "save optimized"

3) Then from the file window, I "save optimized as" and save the file to my computer.

For some reason the photos begin to fade and pixilate and look awful.

I use IR 7. 

I have CS IR 2 but am not using it.

Help!

 

 

-reply by Tom Clubs

[iGuest 3]

I work in CS2 too.

just go to  (Windows) tab, press on it, and check the Animation option

and that will bring up the animation little window to u

-reply by Ethun