Got an amazing scene from your favorite series or movie that you want to recreate as an animated GIF? In this tutorial, you’ll learn exactly how to make an animated GIF in Photoshop—it’s so fast and easy that even a beginner can follow along!
Table of contents
Create a New Document
To start the process of learning how to make an animated GIF in Photoshop, click on the Create new button.
On the Preset Details panel, set the Width and Height to your desired dimensions. Set the Resolution to 72 Pixels/inch, so it’s web-friendly.
Under Advanced Options, set the Color Profile to sRGB IE61966-2.1.
Then, click on the Create button.
Import a Video
To import a video, choose File > Place Embedded, locate the video file on your computer, and click on the Place button.
That places your video into the document window.
Transform the video to fit the canvas.
You can always create a canvas with the same aspect ratio as your video, but we’ll create a square GIF for this tutorial.
Then, click on the checkmark icon to commit the changes.
Use the Timeline Panel to Trim the Video
Choose Window > Timeline.
Click on the drop-down menu icon and select Create Video Timeline.
Then, press on the Create Video Timeline button to convert the video into a video layer, which allows you to apply animations, trim the video, and edit the audio.
To trim the video, click on the Play button to estimate where you want the GIF to start and end.
To find those in the timeline, click-and-drag the Playhead to scrub along the entire video timeline and place it where you want the video to start.
Once that is set, click-and-drag the video layer’s edge towards the Playhead until it snaps into place.
Click-and-drag the video layer towards the 00 starting point.
Once again, use the Playhead to scrub along the video timeline to set the video’s end.
Then, click-and-drag the opposite edge of the video towards the Playhead until it snaps into place.
You can click on the Play button to preview your clip.
Loop Video Preview
Click on the Options icon > Loop Playback.
Then, click on the Play button to set the video on an infinite loop.
Export Photoshop Video Layer as Animated GIF
Choose File > Export > Save for Web (Legacy).
The Save for Web window may sometimes be slow to open depending on your computer’s processing power, the file dimension, and the animation’s complexity.
On the right-side panel, set the File format to GIF, and the default setting should be appropriate.
Check the Image Size and make sure that it has the appropriate dimensions.
Under Animation, set the Looping Options to Forever.
Preview the GIF by clicking on the Play button.
When you’re ready, simply click on the Save button, name your file, and click on the Save button to finalize your GIF!
My New Video Series on Adobe
In case you missed it, Adobe and Photoshop Training Channel partnered up for a 6-part series that introduces Photoshop users to Adobe Illustrator and Premiere Pro!
It covers 3 videos for Adobe Illustrator from creating a logo, making scalable texts, and designing a business card!
For Adobe Premiere, you’ll learn how to color correct, animate graphics, and even resize a video for social media sharing!
This video series is perfectly designed to make you more comfortable using Adobe’s other applications, and you will surely have fun along the way.
