How To Edit/Resize Existing Animated Gif Images In Photoshop CS3

[TheCloudOfSmoke]

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.

__________________
http://thecloudofsmoke.deviantart.com

Originally Posted by BigIg

If I support the game company, then I won't won't be supporting the blank DVD business.

Decisions, decisions.

---

Last edited by TheCloudOfSmoke; December 10th, 2008 at 01:53..

[snickothemule]

Nice work. Will be of use I am sure.

__________________

My grass is the greenest.

---

Last edited by snickothemule; July 30th, 2008 at 03:50..

[bobrocks95]

Good walkthrough but CS3 is nearly 500 dollars on the site.

[TheCloudOfSmoke]

Originally Posted by bobrocks95

Good walkthrough but CS3 is nearly 500 dollars on the site.

Get the demo mofo.

__________________
http://thecloudofsmoke.deviantart.com

Originally Posted by BigIg

If I support the game company, then I won't won't be supporting the blank DVD business.

Decisions, decisions.

[bobrocks95]

It's like 500MB and I won't use it enough for it to be worth anything .

[Cheesus]

Brilliant tutorial TCOS. Never really fiddled with animation on Photoshop CS3 (always used flash...), but I might just try this ^^.

Great job

__________________

Desktop: Core i5 2500K @ 4.2Ghz; Radeon HD 6870 1GB; 8Gb 1333Mhz; 1.75Gb Seagate HD; 128Gb OCZ Vertex 4; 23" LS23A350HS; 24" LS24A350HS; Windows 8 Pro 64bit

Lenovo x121e: Core i3 2367M; Intel HD3000; 4Gb 1333Mhz; 128Gb OCZ Vertex 4; 11" Matte Display; Windows 8 Pro 64bit

[Hard core Rikki]

Originally Posted by TheCloudOfSmoke

Get the demo

It aint functional if it cant export the files or save them, lulz
Doing the resizing in Fireworks or Imageready instead is headache-sparing.

__________________

deviantART | Blog | VBA-M | GeneralEmu | XTemu | FMVTool2 | @ES | Shendo new

NGemu toolbar http://ngemu.ourtoolbar.com

[cottonvibes]

thanks for the guide tcos.


i remember trying to do this in PS CS3, and it gave me that crap about "only able to view 1 frame" and i was like WTF!

i was able to do it with another program, but next time i'll follow your guide.

__________________

"It was, of course, a lie what you read about my religious convictions, a lie which is being systematically repeated. I do not believe in a personal God and I have never denied this but have expressed it clearly. If something is in me which can be called religious then it is the unbounded admiration for the structure of the world so far as our science can reveal it." - Albert Einstein
check out my blog

[karas81]

Usefull, thanx for the tutors.

__________________
"I've had enough, there's no hope left for this pathetic clan."
"Growth occurs when one goes beyond one's limits. Realizing that is also part of training."

[bobrocks95]

LOL, necro.

REVEL IN THE PHOTOSHOP GLORY OF TCOS.

[masta.g.86]

11 out of 10 spam bots prefer TCoS brand threads.

__________________

The truth is there for those who choose to see it.

Core i7 2600K 4.2GHz | 8GB DDR3 1600MHz
AMD Radeon HD6870 Vapor-X | Samsung 24" Widescreen 1920x1200
Realtek HD 7.1 | Klipsch 5.1 Surround Sound
Samsung 6X BD-ROM | WD 1TB + 2TB Black
Windows 7 Ultimate 64bit

Join the NGEmu Folding@Home Team! Info
Download the standard client here OR preferably download the GPU or SMP client here.
Set your team ID to: 161326