Create Animated GIFs Using Photoshop

Animated GIFs allow a designer to inject movement into webpage graphics or avatars. Using Photoshop, you can create and edit movie clips and turn them into animated GIFs with no problem! This article will show you how to do it for the latest version of Photoshop, and earlier versions of Photoshop CS as well. Just get started with Step 1 or see the specific sections listed above for your version.

Steps

Using CS6

  1. Launch Photoshop. To create animations with Photoshop, you will need to have at least Photoshop CS3 Extended. Versions of Photoshop starting with CS6 includes animation in all versions.
  2. Open a video. From the File menu, choose Import > Video Frames to Layers...
    • Select a movie file. Be aware that Photoshop will only import a maximum of 500 frames. If the movie file you've selected is longer than that, you will need to trim it.
  3. Adjust import settings. In the Import Video to Layers window, make any adjustments necessary. The options under Range to Import are the main ones you'll want to look at.
    • "From Beginning To End" is the most straightforward. Photoshop will attempt to import every frame of the movie. If there are more than 500 frames, the movie will be truncated at that point.
    • "Selected Range Only" lets you choose the in and out points using the controls at the bottom. Use the scroll thumb to quickly look through the movie, and drag the bookends below that to set the range of frames to import.
    • "Limit To Every [n] Frames" will cut your frames by at least half, at the expense of choppier animation.
    • "Make Frame Animation" enables both the conversion of the movie into layers, and turns the layers into an animation. Deselecting it will still import the movie into layers, but does not then create an animation. For this tutorial, we will leave it selected.
    • When you're set up, click OK to import your movie. It will take a couple seconds, then you will see all the individual frames in the Layer menu, and each individual frame spread out across the timeline.
  4. Apply adjustments. You can use Photoshop's adjustment layers to add effects, color correction, brightness and contrast, and more. Adjustment layers are, by default, applied to all layers below them.
    • You can apply a wide variety of built-in adjustments. You can also add a new layer using an overlay to change the character of the video, or a new base layer to add a background.
    • For example, you could have a short video of somebody just standing there looking around. On the lowest layer, you might add a picture of the city—or the country—to place them in a particular environment. You could then add adjustment layer on top of everything, to give it a sepia tone. You could even recreate the look of the animated newspapers in the Harry Potter movies.
  5. Edit individual layers. Click on a frame in the Timeline window, and find the matching layer. By default, the frame number is the same as the layer's name, i.e., frame 18 can be found on Layer 18.
    • You can modify any individual layer, either to add effects, or clean up glitches, or whatever strikes your fancy. If you do this over several frames, you can even animate your effects.
    • For example, if you add a lens flare to one frame, in the next frame you could type Control-Alt-F (Command-Option-F on Mac) to bring up the same filter. Reduce the effect by 10%, then move to the next frame and repeat the process. Continue until you've reduced the effect to 0, and it will look like the lens flare is animated.
  6. Save your animated GIF. From the File menu, select Save for Web... This will let you set the size and output options for the GIF, as needed to fit your requirements.

Using CS3, 4, & 5 Extended

  1. Create a document. Put each frame of the animation on a different layer.
    • Alternately, open an existing video. From the File menu, choose Import > Video Frames to Layers...
  2. Select the layers. Select the layers to be used in the animation from the Layers window. To select a group of layers, select the layer at the top of the group. Then hold the shift key and click on the bottom layer. This will highlight every layer in between.
  3. Open the Animation window. From the Window menu, choose Animation. When the Animation window opens, it should look like the photo above. If it doesn’t, that means it opened in the Timeline view.
  4. Change to Frame Animation. Click on the "Flyout" menu in the upper right hand corner of the Animation window and select “Convert to Frame Animation.”
  5. Create frames for each individual layer. Click the "Flyout" menu on the Animation window and choose “Make Frames From Layers.”
    • All layers don’t have to be selected. To select a few layers, use the copy layer button at the bottom right of the animation palette to add layers.
  6. Modify each frame as desired. Select the frame on the Animation window and change it as desired in the main Photoshop window.
    • To add or remove a graphic from another layer to any frame, select the frame and in the layers palette. Click the “eye” to toggle the visibility for that layer either on or off.
  7. Display the timing menu. Click on the arrowhead under each frame to display the timing menu. Select the display time for each frame.
  8. Save your GIF. From the File menu, choose "Save for Web and Devices" and choose GIF from the drop-down menu.
    • To save as a movie, select Export > Render Video from the File menu to export the document as a movie.

Using CS2

  1. Get good screencaps. You'll need a series of screencaps of good quality. These should be taken very close together and from a clean, clear video source. Netflix is a good option, if you have access to Netflix.
    • Naming them in order will help a lot. When you save the original screencaps, name them something like 1, 2, 3, etc.
    • If you don't know how to take a screencap, see this article tutorial or the equivalent for your OS. Generally, you will use the Print Screen button and paste the file into an imaging program.
  2. Drag and drop them into different layers. Starting with the first image as Layer 1 in a new Photoshop file, drag and drop each successive image into a new layer in that same file. Make sure to keep them in order.
    • You'll need to open each file in Photoshop in order to drag it into the main file. If drag and drop doesn't work, just use copy and paste, making sure the image goes into a new layer.
    • Make sure that the images are properly aligned.
  3. Hide the upper layers. Click the eyes next to all of the layers in the layer menu, except for the one with the first image, in order to hide the layers.
  4. Open the Animation window. Click Window from the upper bar and open the Animation window.
  5. Reveal the layers. Click the "New Layer" button (looks like a sheet of paper being folded) in the animation window and then click the eye button for the next image. Alternate between New Layer and reveal to set each one of the frames to an animation "cel".
  6. Crop the canvas. If you have extra stuff that you want to cut out from the screencap, such as the rest of your desktop, use the cropping tool to get your images down to the right size. The standard sizes for GIFs can be readily found online. Use the specific settings in the upper menu set the size, not manual cropping or the more common Image Size menu.
  7. Set the in-betweens. If the animations move too fast, you can create in-betweens. The button that brings up the menu is found next to the New Layer button on the animation menu. Fiddle with the settings until your animation looks correct.
    • You'll need to set the opacity to 79% for every in-between frame you create.
  8. Save the file. Click "Save for Web" from the File menu up at the top. In the menu that opens up, you should make sure that it's set to GIF and that the colors are set to 256. You should also have selective diffusion and dither at 100%. Once the settings are correct. Hit the save button.
  9. Done! Enjoy your gif!



Tips

  • Because Adobe ImageReady is no longer being developed, most of the features from ImageReady are available on Photoshop CS3. Those which are not will be available on Adobe Fireworks.
  • Note: To loop your animation continuously, choose "Save For Web and Devices" under the Save option. Under "Looping Options, select "Forever" and save the animation. You can also pick "Others" and select the number of times that you want your animation to loop.
  • If you save an animated GIF file from Photoshop CS3, the animation frames are lost. To solve this, open the animated GIF file in Adobe Fireworks, which provides editable layers and timelines for GIF files.

Warnings

  • Save your work often so that you don't lose hours worth of effort if you make a mistake.

Related Articles

Sources and Citations

Retrieved from "https://kipkis.com/index.php?title=Create_Animated_GIFs_Using_Photoshop&oldid=352897"