Animated GIFs allow a designer to insert movement into web pages or avatars. Using Photoshop you can create and edit movies and turn them into animated GIFs without any problems! We will show you how to do this with the latest version of Photoshop and older versions of Photoshop CS. Read the whole article or search for your version in the specific sections listed below.
Steps
Method 1 of 3: Use CS6
Step 1. Open Photoshop
To create an animation with Photoshop, you must have at least Photoshop CS3 Extended. Photoshop versions starting with CS6 include animation in all versions.
Step 2. Open a video
From the menu File you choose It matters > Video frames in layers …
Select a movie. Be aware that Photoshop will only import a maximum of 500 frames. If the movie you have selected is longer, you will need to cut it
Step 3. Adjust important parameters
In the Import Video into Layers window, make any necessary adjustments. Under Import range there are the most important ones:
- "From start to finish" is the most unambiguous. Photoshop will attempt to import all frames of the movie. If there are more than 500 frames, the movie will be truncated at that point.
- "Selected range only" allows you to choose the input and output points using the controls below. Use the scroll to quickly see the movie and drag the trim controls below the video to set the range to import.
- "Only one every [n] Frame" will cut frames by at least half, making the animation rougher.
- "Create Frame Animation" enables the conversion of the movie into layers and transforms the layers into frames. Unchecking it will still allow you to import the movie into layers, but you won't be able to create an animation from those. For this tutorial, we'll leave it selected.
- When you are done, click "OK" to import your video. It will take a couple of seconds, then you will see all the frames in the layers menu, and every single frame in the timeline.
Step 4. Make 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 underlying layers.
- You can apply a wide range of pre-defined adjustments. You can also add a new layer using a transparent image to change the font of a video, or a new base layer to add a background.
- For example, you might have a short video of someone standing and looking around. On the lower level, you could add a photo of the city - or the countryside - to put the person in a certain environment. Then you could add an adjustment layer on top of everything to make it sepia. You could even recreate the look of animated newspapers like in the Harry Potter movies.
Step 5. Edit the individual levels
Click on a frame in the Timeline window and look for the corresponding layer. As a pre-selected setting, the frame number is the same as the layer name, for example frame 18 can be found on layer 18.
- You can change any level, either to add effects or to correct mistakes, or whatever strikes your fancy. If you're going to do this over several frames, you can even animate your effects.
- For example, if you add a lens flare to one frame, you could type Control-Alt-F (Command-Option-F on a Mac) on the next to apply the same filter. Reduce the effect by 10%, then move to the next level and repeat the process. Continue until you have reduced the effect to 0, and the lens flare looks animated.
Step 6. Save your animated GIF
From the menu File, select Save for Web …. This way you can set the size and output options of the GIF, depending on your needs.
Method 2 of 3: Use CS3, 4, & 5 Extended
Step 1. Create a document
Put each frame of the animation on a different layer.
Alternatively, open an existing movie. From the menu File, you choose It matters > Video frames in Layers …
Step 2. Select the layers you will use in the animation from the Layers window
To select a group of layers, select the layer at the top of the group. Then hold down the Shift key and click on the layer at the bottom. So you will highlight all the levels between these two.
Step 3. Open the Animation window
From the menu Window, select Animation.
. When the window opens, it should look like the following image. If not, it means that it has opened in Timeline view.
Step 4. Switch to Frame Animation
Click on the "Flyout" menu in the upper right corner of the Animation window and select "Convert to Frame Animation."
Step 5. Create frames for each layer
Click the "Flyout" menu on the Animation window and choose "Create new layer for each new frame."
You don't have to select all levels. To select just a few, use the copy layers button at the bottom right of the animation palette to add layers
Step 6. Edit each level as you like
Select the frame on the Animation window and edit it as you want in the main Photoshop window.
To add or remove any frame from another layer, select it in the Layers palette. Click the "eye" to show or hide that layer
Step 7. Click on the arrowhead below each frame to show the Tempo menu
Select the time for each frame.
Step 8. Save your GIF
From the menu File, select "Save for Web and Devices" and choose-g.webp" />
To save the movie, select Export > Render Video from the menu File to export the document as a movie.
Method 3 of 3: Use CS2
Step 1. Take good screenshots
You will need a series of good quality snapshots. They should be taken very close together and from a clean and clear video source. If you have access to Netflix it can be a good option.
- Naming them in order will help you a lot. When saving the original snapshots, call them 1, 2, 3, etc. or in a similar way.
- If you don't know how to take a screenshot, search for a wikiHow tutorial according to the operating system you use. In general, we will use the Print Screen button and then paste the file into an image management program.
Step 2. Drag and drop snapshots into different layers
Starting with the first image as layer 1 in a new Photoshop file, drag and drop each subsequent image into a new layer, again in that file. Make sure you keep them in order.
- You have to open each file in Photoshop 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 the images are properly aligned.
Step 3. Hide the top layers
In the Layer menu, click on the eyes next to all layers, except the one with the first image - this will hide the layers.
Step 4. Open the Animation window
Click Window from the top bar and open Animation.
Step 5. Reveal the layers
Click the "New Layer" button (similar to a sheet of paper being folded) in the Animation window and then click the eye for the next image. Toggle between New Layer and Reveal to set each of the frames in an animation cell.
Step 6. Cut out the canvas
If there are any items you want to exclude from the photographed screen, such as the rest of your desktop, use the crop tool to set the images to the right size. Standard formats for *-g.webp
Step 7. Set the frames in between (inbetween)
If the animations are moving too fast, you can create frames to arrange among others. The button that opens the menu is located next to the New Layer button on the Animation menu. Play around with the settings until the animation looks correct.
You will need to set the opacity to 79% for each inbetween frame created
Step 8. Save the file
Click "Save for Web" from the File menu at the top. From the menu that opens, you need to make sure the settings are on 256-color GIF. You should also have selective diffusion and 100% dithering. Once the settings are correct, hit the Save button.
Step 9. Done
Enjoy your GIF!
Advice
- Note: To loop your animation, choose "Save for Web and Devices" in the Save option. Under "Loop Options", choose Always and save the animation. You can also choose Other and select the number of times you want the animation to repeat.
- Since Adobe ImageReady is no longer being developed, most of ImageReady's features are available on Photoshop CS3. The ones that are missing are found in Adobe Fireworks.
- If you save an animated-g.webp" />
