|July 30th, 2008, 03:13||#1|
Join Date: Mar 2005
Location: Maryland, USA.
How To Edit/Resize Existing Animated Gif Images In Photoshop CS3
Maybe some of you know of it or have already figured it out, but this is completely new to me. I was fiddling around with CS3 for ****s and giggles to see how I could use Photoshop to edit an avatar that I was working on because I didn't want to use software specifically for working with existing gifs when I prefer to use Photoshop. Since it's not obvious when trying to do it the normal way, I am going to share the process that I figured out with you all.
Normally, if you try to open an animated gif image through Open, you will get a message saying "This is an animated GIF. You can only view one frame. Saving over this file will result in a loss of information."
Heh, I showed those bastards!!!
I know that there are some people out there that don't know how to resize gifs to the forum avatar limit or want to know tricks to optimize their gifs to make them under 50 KB. Well here's a way that I found through Photoshop CS3. Usually I could only create animated gifs, but not edit existing gifs unless I had the original PSD source file with the animation information. So here's how to do it:
Import The Existing Gif
If you have CS3, go to File>Import>Video Frames To Layers...
In the open dialog, type in "*.*" (minus the quotes) in the file name part and it will show you all file types instead of just movies file types (there is no option to open gifs, only actual movie file types in the drop down file type list). You can also type in "*.gif" to only show gifs. Now, select your gif wherever it's located and when the new dialog pops up, make sure that "From Beginning To End" is selected and that "Make Frame Animation" is checked.
Now go to the Window menu (at the top) and open the Animation window. Make sure that it's set on the "Animation (Frames)" tab. Now go to Window again and open up the Layers window. Each frame is now a layer in the Layers window (you can see that only one layer is visible at a time in the Layers window). If you select another frame in the animation window, the next layer in the Layers window will be visible and not the previous one anymore. If you want to change the speed of the entire animation, click on the first frame in the animation window and press and hold Shift and then select the last frame to select all frames. Click on the arrow pointing down at the bottom of the frame thumbnail in the animation window and select a speed. Keep in mind that the speed of the animation in Photoshop will not reflect how the actual speed will be in your browser. The speed varies from browser to browser. In FireFox, the animation speed is faster than IE for some reason in my experience.
Resizing The Avatar To The Forum's Avatar Size Limits
Go to the Image menu button at the top and select Image Size... and change the global size there. Make sure the the measuring unit is set to Pixels and change the amount to 85x85 pixels. Or if it's an irregular rectangle shaped image, set the largest size to 85 pixels, and the other dimension will scale down proportionally.
Saving And Optimizing
If you go to File>Save, you won't be able to save an animated gif. Just a still gif image with little options to optimize. So what you have to do is go to File>Save for Web & Devices...
Now an optimize dialog will pop up. Here, you can change the amount of colors, and different settings to optimize your animated gif. I won't go into details about what every option does, just tweak settings to get the gif to your desired file size (50 KB for these forums). When you tweak settings, you should be able to see the file size on the bottom left so that you know where you are at when it comes to what the file size will be. Another method to optimize the gif is by reducing the colors. When you're in the gif optimize dialog look in the center right where it says "Color Table". This shows all of the total colors in your gif image. You can either drag a color to the trash can or you can go to where it says "Colors" above the Color Table. Click on the down arrow to reduce colors that way also.
Now, a good way to optimize the file size of a gif is by going to the animation window and select every other frame. Try changing some settings in the optimize dialog before resorting to deleting frames though. That's only if you're desperate and really have no other options. You can remove every other frame by clicking on the first frame and then hold Ctrl and then select every other frame after that. You can also remove every three frames and so on. What ever suits you. Drag the selected frames to the bottom right to the trash can and they will be deleted. When you delete frames, you may have to decrease the speed of all of the frames (as I explained how to do in the beginning) to get it up to a similar speed that the animation was before removing the frames. Less frames makes the animation appear faster fyi.
Once you are done, go to save and give it a name. Now right click on the gif that you have created wherever you saved it to and go to "Open With" and select your browser to preview it. Upload it and bam.
I hope that this was useful for someone, I originally made this for bobrocks95 and I ended up making it so long, that I thought that I might as well share this with others since I know that others have had the problem of resizing gifs and don't have the right software to edit/resize existing gif images.
Last edited by TheCloudOfSmoke; December 10th, 2008 at 01:53..