Showing posts with label animated gif. Show all posts
Showing posts with label animated gif. Show all posts

Sunday, April 6, 2014

Stop Whining

Monday, August 20, 2012

Those Bitches!

Classic scene I captured in animated GIF form in homage to the hilarious parody trailer, Star Wars Episode III: A Lost Hope.

Photoshop CS5 Slow Animated GIF Playback

In Photoshop CS5 you can import video and transform it into a series of layers, then export that collection of layers as an animated GIF.

However, one gotcha I encountered has to do with frame rate and playback speed of the resulting GIF animation. I found that despite the fact that I'd set the no delay between each frame, the animation appeared slow regardless of which browser I used.

To work around this annoyance, I found that I needed to tweak the frame rate of the animation in timeline mode. 

Here's how.

First off, make sure the QuickTime player is installed. Photoshop uses QuickTime to render video into layers, and the video must be viewable in QuickTime in order to be imported properly; if it's not and using some unrecognized video codec, it might import as a series of blank frames.

In Windows Explorer, right-click on the video file you want to import, and click the Details tab. Note the frame rate of the video in question is 25 frames per second (fps).

Click File => Import => Video Frames to Layers and import your video into Photoshop.

In Photoshop, perform edits you want, such as removing frames, adding text, whatever you need to do for your animation.

Ensure the Animation panel is visible by clicking Window and verifying a checkmark is beside Animation. Then, click on the button in the lower-right area of the frame view, which has a tooltip "Convert to timeline animation". Upon doing this, the frame view will disappear and be replaced with a timeline showing the layers stacked upon each other.

You should also notice that in the timeline view, the frame rate is shown. Note how it differs from the original frame rate of the imported video.

Now we alter the animation's frame rate to correspond to the original video's frame rate. In the upper-right corner of the Animation panel you should see a tiny upside-down triangle. Click this to reveal the Animation panel's popup menu, then click Document Settings.

Now the Document Timeline Settings window appears, from which you can change the Frame Rate from the default of 30 to the value corresponding to that of your imported video, in this case, 25.

Finally, click File => Save for Web & Devices to save the project as an animated GIF according to the settings you require. The resulting GIF should now be in sync with the original video in terms of frame rate, and render at about the same speed rather than annoyingly slow.