ogri.me | Editing animated GIF-images in Photoshop CS3Not being a designer, I nevertheless have been using Photoshop for simple operations with images. When it took to cut an animated GIF, I did not seek specialized software to edit animated graphics (such as the same Fireworks), but tried to find out whether it's possible to do it using itself Photoshop. It turned out - it is quite possible, though not obvious without proper instructions.

Photoshop CS3 provides creating of animated GIF file, but does not have an option to edit an existing one in a standard way without PSD source. If you try to open an animated image through File → Open... or by dragging it to the program's window, you get a message like: "This is an animated GIF. You can only see one frame. Saving a file will result in loss of information." Fortunately, there is less standard method, but it works very well.

What you need to have:

  • Photoshop CS3.
  • QuickTime installed. The method will not work without it.
  • Head & hands. Nothing at all works without them.

1. Import an existing GIF-image

In the main menu, click File → Import → Video Frames To Layers... Dialog box Load pops up. There is a single type QuickTime Movie in the Files of Type list, including several video formats; GIF not as a class. Type "*.*" or even "*.gif" (without the quotes, of course) in File name input box and click Load button. Now GIF files appear in the list. Select the needed one and click Load again. In the Import Video To Layers dialog box make sure that the option From Beginning To End is selected, and the checkbox Make Frame Animation is checked.

Now open Animation and Layers windows through the Window item of the main menu, if they are not already open. If there are tabs others than Animation (Frames) in the Animation window - make sure you are on this tab. As you might guess, each frame in the animation window corresponds to a layer in the layers window. Clicking on a frame activates the corresponding layer.

2. Changing the animation speed

If you want to change the speed of the whole animation, click on the first frame in the animation window, press and hold Shift, and then click on the last frame to select the entire frame sequence. Click the "down arrow" icon on the bottom of each frame in the animation window and choose a speed. Keep in mind that the animation speed specified in Photoshop does not exactly correspond to the actual speed of the animation in your browser. Actual speed varies from browser to browser. For example, as noted by the people, animation in FireFox is faster than in IE.

3. Resizing and cropping

Everything is standard here. Open Image → Image Size... item of the main menu and edit the size as you do for regular static image. Crop animated picture through Image → Crop or by using Crop Tool in the toolbar. The changes apply to all frames in the animation, as they practically are the layers of your document.

4. Deleting frames

You can selectively remove frames to reduce the resulting file size and speed up animation loading. As usual, by pressing and holding Ctrl or Shift you can select a separate frames or their sequence in the animation window, and then drag to the bin at the bottom of this window. Do it carefully though not to break your cartoon. After removal of the frames you can also edit the animation speed.

5. Final optimization and saving

If you try to save the result in the File → Save menu, the result will be a regular static GIF. In order to keep the animation, use the menu File → Save for Web Devices... You can change the number of colors, and also edit different settings to optimize your animated picture, depending on the statement of the problem; for example, if there is a limit to the file size, you can adjust this value. If satisfied with things as they are after previous changes - select the option Original.

Click Save, give the file a name - we have the result. You can drag it to different browsers to test its behavior.

P. S. I did not test, but some assert that in CS4 it works the same way.


+1 # nett2010 2014-08-03 19:39
Great explanation!!

Nice clear concise directions. Help me right away.

Wysoki Niski
+1 # Wysoki Niski 2014-08-11 06:52
Importing existing GIF animation is very user unfriendly. Probably I will never discover how it works without your tutorial. Thanks!
+1 # Ryoko 2015-02-20 23:20
Thank you very much... This could help me a lot!
+1 # Ogri 2015-02-21 00:01
You are welcome. I'm glad to have positive feedback.
Lita Maivia
+4 # Lita Maivia 2016-03-10 22:22
This does not work for me. No matter what I do, ALL files remain greyed out and can't be imported. :(

Users must be registered and logged in to post comments.

By working with this site, you agree to our use of cookies necessary to keep the settings you select, as well as for the normal operation of Google services.