PHOTOGRAPHY

Bring images to life with the Adobe Photoshop animated GIF maker.

Movement has a way of catching the eye, especially on the web.  Adobe Photoshop  makes it easy to create moving images of your own with high-quality GIFs that can tell more complex stories than a static image ever could.

Watch Kendall Plant’s GIF-creation process in this quick one-minute video. The steps are written out below.

Headshot of Kendall Plant - Adobe associate creative art director, designer, and photographer.

With work that incorporates nature, street photography, and even skulls,  Kendall Plant   is a designer, art director, and who brings a unique approach to her work at Adobe as an associate creative director.

Fill your GIF with avatars, emojis, webcam footage, and more. Flexibility coupled with ease — you couldn’t ask for more. Watch Plant create an animated GIF in the video below.

How to make an animated GIF in Photoshop.

Follow along with Plant step-by-step to make your very own GIF.

Before you start.

Use these  sample sketches  or practice with your own.

1. Sketch it out

Plant starts by creating variations of her initial drawing to show different states of motion, then saves each variation as a separate file. With her files prepped and ready to go, she opens the first sketch in Photoshop and drags the remaining files from her computer into the document, pressing return (or enter) to place each file onto its own layer. Next, she clicks on the Lock icon to unlock the original layer .

Add digital sketch variations to separate layers in Adobe Photoshop .

2. Bring it to life

Ready to animate her sketches, Plant opens the Timeline (Window > Timeline), selects Create Frame Animation from the dropdown menu, and chooses Make Frames From Layers from the flyout menu. If you have used the Timeline before, it may populate with empty frames by default. If this happens, click on the first frame and hold the shift key while clicking on the last one. Choose Delete Frames from the flyout menu. Then you can choose Make Frames From Layers.

Add sketch layers as frames to animation timeline in Adobe Photoshop.

3. Pace your animation

To give each frame the same timing, Plant clicks on the first and last frame in the Timeline while holding the shift key. You can click on the down arrow in one frame and set the interval to 0.1 seconds — this will update all the selected frames. Next, Plant chooses Forever from the dropdown menu below the Timeline to make the animation loop continuously. You can preview the timing of your animation by clicking on Play.

4. Export to GIF

Choose File > Export Save for Web (Legacy). Set GIF as the Export Format and Forever as the Looping Option.

Choose export save for web (legacy), set file type as GIF, and set Looping Options to Forever to export animated GIF.

5. Share your animated GIF.

Once you've made your own GIF, share it on your favorite social platform or with friends. And keep the creativity moving.

Note: Project files included with this tutorial are for practice purposes only.

Share GIF animation on social media.

Tips for creating the perfect GIF.

When you’re learning how to make an animated GIF, think of the Timeline in Photoshop as your own personal animated GIF maker. Keep these tips in mind to make the most out of every GIF.

Choose or create your images.

You can make a GIF out of any series of images, whether you draw them yourself or use stills from a video. Don’t be afraid to try drawing your own — Photoshop has tons of tools you can use to make simple or complex illustrations.

Resize as needed.

If you're using different-sized images but want a seamless look, you can easily resize them in Photoshop. Try cropping your images to a standard size or using the Transform tool to get the dimensions just right.

Experiment with filters and effects.

Depending on what look you’re going for, you might want to edit or retouch your GIF images by adding appealing filters and effects . Editing your photos can also create continuity or let you juxtapose different images to fit your story.

Pick the right animation speed.

Choose your GIF animation speed by making frame rate adjustments in the Timeline panel. Keep in mind that a GIF that moves too fast might be hard for onlookers to digest. But a GIF that moves too slow might not keep viewers engaged.

Add text to tell your story.

Add a clever saying or any message of your choice by layering text over your animation. You can find tons of options in Adobe Fonts, or choose the best TruType or OpenType SVG from your favorite font provider.

Work with any file type.

You can create GIF files from BMP, JPEG, PNG, and other image file types as well as video files such as AVI, FLV, and MP4.

Are GIFs videos or animations?

Even though some GIFs may look like videos, they’re actually considered to be animations. If you’ve ever made a flipbook where you drew a character moving frame by frame, you know that the flipping action brings the motion to life. It’s similar to how both animation and video work, but GIFs are ideal for shorter creations, usually around 15 seconds or less. And, because  GIFs only offer a limited color range , they they’re small enough to be easy to share online.

Get going with GIFs.

Once you learn how to make an animated GIF, the possibilities are endless. Try using your own drawings, photos, and video clips first to make a unique animation that nobody’s ever seen before. Or have fun with existing images and put a new spin on an old topic. GIFs are an amazing way to communicate ideas that might be hard to express with words or still images alone — start playing with ideas now so you’ll have just the right GIF for the moment, whenever you need it.

Share this article

You may also like

Language Navigation

shotkitlogo

The leading authority in photography and camera gear.

Become a better photographer.

12.9 Million

Annual Readers

Newsletter Subscribers

Featured Photographers

Photography Guides & Gear Reviews

The New York Times

How to Make a GIF in Photoshop (+ 8 FREE Methods)

Learning how to make a GIF in Photoshop is fun! This step by step tutorial shows you the easy way. (We also include 8 free methods if you don't own Photoshop.)

Photoshop | Software | By Usnea Lebendig

Animated GIFs became hugely popular several years ago, yet never really seem to go out of vogue.

Not just a photo, but not quite a video file either, animated GIFs can be used for everything from memes and humor to marketing.

If you’re a a photographer who like to teach, animated GIFs are especially good for demonstrating brief techniques (like putting up a tripod or assembling a lighting setup) and/or illustrating the before-and-after of some phenomenal post-processing.

If you’re into creating videos, animated GIFs can also be used for attention-grabbing video previews.

There’s also a sort of pleasure in using your own images to create a GIF that expresses feelings that just can’t be described in words or a static image.

Luckily making animated GIFs from a series of photos isn’t that difficult, particularly if you use Photoshop.

This tutorial will focus on how to make an animated GIF in Photoshop, but we’ll also touch on a few other options if you don’t use Adobe products.

Let’s get started.

Photoshop

Download the latest version of Adobe Photoshop to follow along with this simple tutorial.

Start a free 7-day trial today

Table of Contents

How to Make a GIF in Photoshop: Step by Step Tutorial

For this demo I chose a a series of images I took of one of my godsons playing on the beach. The images were taken using the burst mode feature of my camera.

Step 1: Load Your Images into Photoshop

Load files into a stack

If you have a series of images ready to go, import them into Photoshop via the “Load files into stack” script.

To make a GIF in Photoshop, you’ll need to first have a set of images you want to animate. For most photographers, it’s easiest to finish all the basic post-processing first and then export the photos to their own folder.

Once you have the images ready, open Photoshop and go to File > Scripts > Load Files into Stack .

From there, click  Browse , navigate to the folder where the images are, and hold down the Shift key while selecting all the images you want to use. Click  Open and then  OK .

This tells Photoshop to import all the selected photos into a single file with each image on its own layer. They’ll show up in your layers panel on the right.

You can also opt out of using the default Photoshop import script and create the layers by hand. This is helpful sometimes when creating GIFs with animated or blinking text, banners, etc.

Either way, if you intend on making further changes to any of the images, it’ll be be best to rename each of the layers so you can figure out which layer you’re looking for at a glance.

Also, if file size is an issue for you, the fewer the frames the smaller the overall GIF and vice versa. (I know this is obvious but you’d be surprised how many people space this out!)

Note: If your source material is a video file, you can still use this tutorial. Just import the video via File > Import > Video Frames to Layers. 

Step 2: Open the Timeline Window

opening the Timeline window

The timeline window will allow you to animate your frames.

Once you have all of your images imported into Photoshop, you’ll need to make sure Photoshop’s Timeline window is open. This is where the animation will take place.

Since it’s not open by default, you’ll need to go up to Window > Timeline to make it visible. The window will appear at the bottom of your screen.

  • Read more: How to edit a PDF file in Photoshop

Step 3: Create  Frame Animation

Frame Animation

Choosing the frame animation option tells the Timeline to use a frame-by-frame style.

The Timeline window has two animation options: Create Video Timeline and Create Frame Animation .

The quickest and easiest way to make an animated GIF in Photoshop is through Frame Animation, so make sure that’s selected.

(You’ll find both of these options by clicking on the arrow on the button in the middle of the panel.)

Step 4: Convert the Layers into Frames

timeline drop-down menu

Sometimes the timeline dropdown menu can be hard to see. It’s the little menu icon located at the far right of the timeline.

Now it’s time to convert the layers into frames. Navigate to the tiny menu icon in the upper right corner of the Timeline panel. In the middle of the menu, you’ll see Make Frames From Layers .

Convert layers to frames

Once you click on the timeline menu icon, a drop-down menu will pop-up. Select “Make Frames From Layers.”

Like magic, all your layers will be converted into individual frames ready for animation.

The magic of Photoshop is that you’ll still be able to edit each individual frame in your Timeline as needed. You can turn layers on and off, move elements around in each of the individual frames, apply filters, rotate text, etc.

Step 5: Preview your GIF

Reverse the frames if necessary

If your frames are playing in reverse, go to the Timeline menu and select  Reverse Frames .

Now it’s time to preview your soon-to-be animated GIF.

You can do this by either clicking on the Play icon  at the bottom of the Timeline panel or by pressing the spacebar .

Also, depending on the order your images were imported, they might be playing in reverse. If this is true, the fix is simple: just click on the Timeline menu icon and select Reverse Frames .

Step 6: Adjust the Timing and Looping

Setting the frame timing

  • Adjusting the Timing (the speed)

Changing the GIF speed in Photoshop is pretty simple.

Photoshop’s default timing is set with no pause between the frames. Leaving it at that setting isn’t often the best choice. For some reason, the “0” setting for frame timing tends to make things flow strangely or sometimes even not at all.

Changing the timing is pretty easy. Simply click on the frame you wish to adjust, click on the arrow, and then choose a time from the dropdown menu. I’d recommend starting out with either 0.2 or 0.5 seconds.

\You can always change this later. (The frames in the demo GIF above are set to .2 seconds.)

Most animated GIFs are set to continually loop as long as they’re open, and that’s what Photoshop’s default is set to. But if you’re wanting the image to just repeat once or three times, etc. Photoshop gives you a few options.

Below the timeline and to the left of the play button, you’ll see Forever and an arrow signifying a dropdown menu. There are a few different looping options as well as the option to customize your own timing.

Remember, of at any time you don’t like the results you can always go back and change the timing and loop options or even the order of the frames.

Step 7: Save as an Animated GIF

save as a

Use Photoshop’s “Save for Web (Legacy)” under the Export menu.

Once you’ve got your settings dialed in and your GIF is moving the way you’d like it to, it’s time to save it and view it on other platforms (to make sure it runs the same outside of Photoshop).

The saving process here is a bit different than with standard images. Instead of hitting  Save  or  Save As , you’ll need to use File > Export > Save for Web (Legacy) .

If want to limit the file size of the GIF, you can always change the Height and Width fields in the Image Size options, or change the save quality. (I like to change dimensions before reaching this point, but either way works.)

Once you’re done, hit the  Save button.

Once the file has been saved as a GIF, make sure to view it outside of Photoshop in a couple of different places to make sure it runs well. Also, don’t forget to save the parent file as a .psd file too, in case you want to make changes later.

Note that if you plan to host the animated GIF on your own website, you should consider the final file size to ensure it loads quickly for users on slower Internet connections.

This may involve having to experiment with the optimization settings, such as reducing the number of colors or the amount of dither.

As you’ll see in my example at the start of the tutorial, there’s some color banding most noticeable in the sky, due in part to the heavy optimization I chose, in an attempt to reduce the file size – this resulted in a final GIF of 1.5MB.

How to Make a GIF in Photoshop: Video Tutorial

You'll Also Like These:

a photo of a man with a camera and a photo of a man with a camera.

Usnea Lebendig is an experienced photographer and reviewer who loves to photograph professionally and in moments where the world’s beauty and/or strangeness leaps in front of the lens.

Has anyone here made cinemagraphs? I’d love to hear your experiences with them.

Leave a Comment Cancel Reply

WELCOME TO SHOTKIT

Enter your email to be sent today's Welcome Gift: 19 Photography Tools

Thanks for subscribing! Please check your email for further instructions.

A black and white advertisement with a couple of black and white objects.

🔥 Popular NOW:

ipa-cover

Unlock the EXACT blueprint to capture breathtaking iPhone photos!

Shotkit may earn a commission on affiliate links. Learn more.

Photoshop Training Channel

How To Make an Animated GIF in Photoshop (Fast & Easy!)

Subscribe on YouTube:

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, import a video, use the timeline panel to trim the video, loop video preview, export photoshop video layer as animated gif, my new video series on adobe.

To start the process of learning how to make an animated GIF in Photoshop, click on the Create new button.

photoshop tutorial gif

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.

photoshop tutorial gif

Under Advanced Options , set the Color Profile to sRGB IE61966-2.1 .

photoshop tutorial gif

Then, click on the Create button.

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.

Choose Window > Timeline . 

Click on the drop-down menu icon and select Create Video Timeline . 

photoshop tutorial gif

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. 

photoshop tutorial gif

Click-and-drag the video layer towards the 00 starting point.

photoshop tutorial gif

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.

Click on the Options icon > Loop Playback .

photoshop tutorial gif

Then, click on the Play button to set the video on an infinite loop. 

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. 

photoshop tutorial gif

Check the Image Size and make sure that it has the appropriate dimensions.

Under Animation , set the Looping Options to Forever . 

photoshop tutorial gif

 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!

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.

So click here to start learning!

' src=

Jesús Ramirez is a digital graphics expert, speaker, and educator specializing in Adobe Photoshop. Jesús is best known as the founder of the Photoshop Training Channel, one of the most popular Photoshop YouTube channels in the world. More.

Follow: Instagram / YouTube / Twitter

Similar Posts

Make a 3D CHROME TEXT Effect and Turn It Into a Rotating ANIMATED GIF – Photoshop Tutorial

Make a 3D CHROME TEXT Effect and Turn It Into a Rotating ANIMATED GIF – Photoshop Tutorial

In this tutorial, I’m going to show you how to create a 3D text chrome effect and use Photoshop’s Timeline to turn it into an animated GIF.

Timeline Overview: Creating An Animated GIF In Photoshop

Timeline Overview: Creating An Animated GIF In Photoshop

Learn Photoshop’s video editing and animation capabilities, to create animated GIFs!

How To Create and Animate A Knockout Layer In Photoshop

How To Create and Animate A Knockout Layer In Photoshop

In this video I’m going to show you how to create and animate a “Knockout” layer using the Advance Blending options in the Layer style window.

Create Beautiful Before and After Animations in Photoshop

Create Beautiful Before and After Animations in Photoshop

Learn to create beautiful before and after animated GIFs to show off your editing work.

How To Animate Photos In Photoshop! 2.5D Parallax Effect

How To Animate Photos In Photoshop! 2.5D Parallax Effect

Learn this fantastic technique to easily animate photos in Photoshop!

guest

Connect with

  • GTA 5 Cheats
  • What is Discord?
  • Find a Lost Phone
  • Upcoming Movies
  • Nintendo Switch 2
  • Best YouTube TV Alternatives
  • How to Recall an Email in Outlook

How to make a GIF in Photoshop (or a free alternative)

Gannon Burgett

GIFs are amazing. They're like the flipbooks of the internet -- great for conveying thoughts and emotions that words can't describe, as they showcase the antics of your adorable household pets or give you a good chuckle.

How to make an animated GIF from a video (Photoshop)

How to make an animated gif using still images (photoshop), how to make an animated gif using still images (for free), setting up your still images first, making an animated gif using a free tool, how to make an animated gif from a video (for free).

  • How to make a GIF from a YouTube video

Maybe you've used a GIF on your phone to send a funny animation to a friend, or you've seen them pop up in the comments on Facebook . But have you ever made your own GIF? You may have ideas for the grandest of GIFs, but maybe you don't know how to make that dream a reality. No need to worry: This simple tutorial should guide you through the process of making top-notch GIFs, even if we can't definitively tell you how to pronounce it.

What You Need

Photoshop or a free online tool like Giphy

Still images you want to use for your GIF

A video you want to make your GIF from

Before we jump right into the tutorial, we should address the elephant in the room. Adobe Photoshop is probably the best software available for making GIFs (or editing images in general). If you don't have Photoshop, other programs can give you some of the same functionality, such as GIMP , but if you want to get serious about making GIFs, Photoshop is the way to go.

Step 1: Find a good video sequence on the web that you want to turn into a GIF. This can be practically anything, but try to opt for a clip that is not too long, as brevity is key for a good GIF.

Step 2: Save the video to your computer. Check out our guide on how to download YouTube videos  if you need guidance on ripping footage from the web. Trim the footage down to only the length you want the GIF to play. Two or three seconds is great, five is pushing it, and 10 or more is possible with the right chopping, but the file will be large and hard to work with. The general rule of thumb is to convey your idea in as few frames as possible.

  • Here’s how to delete your YouTube account on any device
  • How to share an external hard drive between Mac and Windows
  • How to measure your PC’s power use, and why it matters

Step 3: Open the video with Photoshop. To do this, navigate to File > Import > Video frames to layers . Select the video file you want, and Photoshop will open it as a series of still frames. You can choose to import the entire video from beginning to end or use sliders to select a smaller portion of the clip. You can limit the import to every other (or every third, fourth, etc.) frame to make the file smaller, but this will also make the video choppier.

Step 4: Mess with the settings. You can adjust color balance and whatnot with Photoshop at this point if you’d like. When you have everything looking perfect, head to File > Save for web . You’ll then be met with a window that looks something like this:

Step 5: You can tweak these settings to make your GIF smaller. Ideally, you’ll want to make it no larger than 1MB so it won’t take ages to load on web pages. Play with all of these until you find a sweet spot.

  • Colors: This limits the number of colors used to create the image, so the higher, the better (GIFs are limited to a maximum of 256 colors). Only drop down to 128 or lower if you must or if your GIF doesn’t have much color in the first place.
  • Dither: Dithering scatters different colored pixels in an image to make it appear as though there are intermediate colors in images with a limited color palette. Higher settings will yield better-looking images, but this will also make the file larger.
  • Lossy: Use this setting to apply an intentional drop in quality. A lower setting is better, but some loss of quality might be necessary to make your file small enough.
  • Size: Changing the dimensions of your GIF can have a huge impact on the file’s size.

Step 6: Save and share! Select the Save button to finalize your creation. Once done, you can upload it to a free image hosting site like Imgur to share it with your friends and embed it into blogs and websites.

You can also create animated GIFs in Photoshop by stringing together still images. This process consists of layering each frame from the bottom up and then sequencing the layers using Photoshop’s animation/timeline tool.

Step 1: Collect the still images you want to sequence for your GIF and put them in a single folder. Then, in Photoshop, choose File > Scripts > Load files into stack . Then, select Browse and choose the images on your desktop that you want to string together into a GIF.

Step 2: Select OK , and a new composition should open with these stills now rendered as individual layers in a single image. Arrange them accordingly; your first frame should occupy the very bottom layer and so forth.

Step 3: You can also create each layer individually in Photoshop itself rather than batch uploading your stills as layers. Run Photoshop and create a new image by selecting File > New and then selecting OK . Then, unlock the background layer by selecting twice the Lock icon, create a new layer by opening Layer > New… > Layer , and design each frame accordingly.

Step 4: Again, string your animation from the bottom up. (This process works if you are using an older version of Photoshop that does not feature a “Load Files into Stack” option.) Load your stills into Photoshop, drag them into your new project, and resize the newly created layers accordingly using Photoshop’s transform tool ( Edit > Free transform or Ctrl + T ), then drag the corners to resize the object).

You want your result to look like this, with each frame of the animation separated as a layer and arranged chronologically from the bottom up:

Step 5: Now that you’ve arranged your layers accordingly, you can begin sequencing your layers. Again, this process will vary depending on what version of Photoshop you are using. If you’re still running CS5 or lower (hey, we won’t judge), access the animation window by opening Window + Animation . Likewise, select Window + Timeline in Photoshop CS6 and Photoshop CC to access the Timeline window. For Photoshop CC, select the Drop-down menu in the middle of the Timeline window and select Create frame animation .

Step 6: Once you’ve opened Photoshop’s sequencing tool, select the Small, right-facing arrow in the upper-right hand corner, and then choose Make frames from layers .

You can also select the Right-facing arrow to create a new frame manually (or you can use the hot-key command Ctrl > Shift > Alt > F ).

Step 7: From there, select the Eye icon next to each layer to hide the layers you don’t want to appear in the frame you’ve created.

Step 8: From here, use the menu underneath each frame to toggle its duration. The menu in the bottom-left corner dictates how many times your GIF will replay — set it to Forever if you want it to loop endlessly.

Step 9: Congratulations! You’ve created an animated GIF using still images, and now all you have to do is export it out of Photoshop using the process outlined above. For a quick recap:

Head to File > Save for web . Remember to keep your GIF no larger than 1MB. If necessary, tweak the color, dither, loss, and size settings until your GIF has been resized accordingly. Once you’re happy, save your newly-minted GIF.

If you don’t have access to Photoshop, there are free methods you can use to make a GIF, although the final product’s quality may not be as high. There are various free programs (such as GIMP or Pixlr) that offer the basic functions of Photoshop, thus allowing you to create still images and play them in sequence, and websites that allow you to cut GIFs from video. Neither of these processes will be as effective as Photoshop — however, they are cheaper and fairly straightforward.

Several in-browser apps allow you to make GIFs out of a series of still images. As an example, we’ll use Ezgif . This site allows you to upload a series of images, arrange them, and turn them into an animated GIF. Of course, to do so will require a set of images that work in sequence. To do this, we’ll need a free Photoshop substitute. We’ll use Pixlr in this example.

Step 1: The first thing to do is to upload a new image. Choose the canvas size, but keep in mind that the larger the file size of a GIF, the more slowly it will load, so try to cut down on the amount of stuff you fit on the canvas. Simpler and smaller is often better.

Step 2: Once you have a canvas, make the first frame of your GIF. For this example, we’ll use the shape tool to create a person out of a circle, rectangles, and lines, saving this image to create the first frame.

The animation process consists of playing a series of images with slight changes to give the illusion of movement. To make a GIF, you will need to make multiple images, each with a slight variation from the last one. For the sake of simplicity, this GIF will only have a few frames, so it will not be pretty, but it should illustrate the concept.

Step 3: For the next frame, we’ll make the figure raise his arms by erasing them and drawing new arms raised upward. Save the image to create the second frame.

Step 4: Next, we’ll use the Type tool to make text appear, and we’ll save this image as the third frame.

Step 5: Then, we’ll add some more text and save it as the fourth frame.

With our frames ready, we will upload them to Ezgif. Here's how to finish making your GIF using Ezgif:

Step 1: Select the tab labeled GIF maker and select the Browse button. Select all the image files associated with your GIF.

Step 2: Next, select the button labeled Upload and make a GIF! . When the image files are done loading, make sure they are in the correct order. You can also set the delay time, which is the time between frames, and choose how many times (if at all) you want the GIF to loop.

Step 3: Once done, select the button labeled Make a GIF!

Step 4: Your GIF should then appear, along with buttons to edit it or save it to your computer.

If you want to use a particular snippet of a video for a GIF, numerous sites can help you make them with very little input on your part. Ezgif , Giphy , ImgFlip , Gfycat , and many other online services allow you to make GIFs without the aid of a credit card, although the convenience comes with a sacrifice in the level of control you have.

Step 1: Using one of these online tools is incredibly straightforward. As an example, we will use Giphy. This site allows you to either paste the URL for a particular video or upload a video file from your computer. Enter the URL or upload your video and continue to step 2.

Step 2: Once you have done that, you can choose the point in the video where the GIF will begin and choose how long the GIF will run. You can also enter a caption if you wish.

Step 3: Once you have decided on those elements, select the Create GIF button, and allow the site to take care of the rest.

The process is more or less the same for other sites, including ImgFlip. However, if you want more control over the resulting quality of your GIF, you should probably stick with Photoshop. That said, for basic video-to-GIF functionality, sites like Giphy should work fine.

You can use the above sites and more to create a GIF from a YouTube video. We also have a step-by-step guide that can help you create awesome GIFs from any YouTube video .

And that’s it! You are now a GIF guru (or a GIF Jedi, if you prefer the soft “g” pronunciation), and your social media feeds are about to become infinitely more exciting.

Although, we should probably caution you: With great power comes great responsibility. Choose your moments wisely, and don’t flood your friends with an overwhelming onslaught of low-grade cat GIFs, no matter how cute they may be. There is a time and place, and quality always trumps quantity. The GIF may be modest, but it is also a legend; it deserves your respect. Study it, practice it, master it.

Editors' Recommendations

  • How to gift games on Steam to friends, family, and anyone else
  • How to change your Google background in Chrome
  • How to save a webpage as a PDF on desktop and mobile
  • The most common Chromebook problems and how to fix them
  • How-To Guides

Gannon Burgett

Though Chromebooks use a different operating system, that doesn't mean printing from them will be more complicated than other operating systems. You can usually start printing from a Chromebook in a few simple steps, regardless of how you choose to connect your printer to your Chromebook.

Generally speaking, the process is about the same as it is with any other computer. If you have any trouble, it's also possible to fall back on the Android subsystem built into modern Chromebooks. Android enjoys better support from printer manufacturers than ChromeOS.

Google Chrome supports a wide range of languages. While it'll default to English in most cases, there's nothing stopping you from changing its settings and displaying pages in Spanish, French, or dozens of other languages.

Changing your default language in Chrome takes only a few seconds, and the technique used is the same across Windows and Mac. Aside from changing your language, note that Chrome now gives you the option to automatically translate pages written in another language – making it easy to read content from around the globe.

Email signatures are a great way to automatically include your contact information to your email correspondence. If you'd like to add a signature to your emails in Gmail, it's easy enough to add one. You'll just need to go through your Gmail settings to do it.

In this guide, we'll show you how to add a signature in Gmail whether you're using the desktop website version of Gmail or its mobile app. How to add a signature on your desktop Step 1: Launch your favorite browser and log into your Gmail account as you normally would.

  • Accessories
  • Camera Reviews
  • Become a Photographer
  • Photo Editing
  • Photography 101
  • Photography Tips
  • Astrophotography
  • Travel Photography
  • Livestreaming & YouTube
  • Video Cameras
  • Video Lenses
  • Video Monitors
  • Video Lighting
  • Streaming Accessories
  • Videography
  • Audio for Video
  • Microphones
  • Desktop & Laptop
  • Console Gaming
  • iPads & Tablets
  • Televisions
  • Camera News
  • Adorama Business
  • Adorama Rentals
  • 800.223.2500

How to Make an Animated GIF in Photoshop

With Adobe Photoshop, you can easily create an original animated GIF file (graphics interchange format) from a series of photos. In this tutorial, we’ll break down the step-by-step process of how to make an animated GIF in Photoshop.

birds flapping wings sequence images

1. Select which photos you want to use for your GIF

For the best GIF possible, use a series of images taken in rapid succession. Time lapse images or images shot in burst mode work the best. That’s because they make your GIF feel like a short looping video. The more frames you use in your GIF, the smoother the animation effect will be.

A total of 15-24 still images usually work best. Make sure the image size for each of your frames is the same, so double check the pixel count. Put all of the frames you want to use in a folder on your desktop or a hard drive. That will make it easier to find them easily in Photoshop.

How to Make an Animated GIF in Photoshop select images

2. Import your photos into Adobe Photoshop

Open Adobe Photoshop. From the File menu, select Scripts > Load Files into Stack. This will open a new dialogue box. Click Browse to find the folder you created on your desktop or hard drive that contains the images you want to include in your GIF.

Press the Shift key to select multiple images. Once all the image files you want to use are highlighted, click OK. Next you’ll see all the files you selected, listed in the Load Layers dialog box.

Click OK, and Photoshop will then open the selected images as individual layers in a new document.

How to Make an Animated GIF in Photoshop timeline panel

3. Access the Timeline panel

From the Window menu, select Timeline to open the Timeline panel in your workspace. By default, the Timeline panel will open at the bottom of your screen.

In the center of the Timeline panel, you’ll see a button that says Create Video Timeline, with an arrow next to it. Click the arrow, and select Create Frame Animation from the drop-down menu.

Now the button will say Create Frame Animation. Click that button.

How to Make an Animated GIF in Photoshop animation frames

4. Convert your image layers into animation frames

In the top right corner of the Timeline panel, you’ll see a menu icon (four horizontal lines). Click that menu icon to bring up a drop-down menu with animation options.

Click Make Frames From Layers. This will convert the images in the Layers panel into individual frames in your GIF.

Now you should see a thumbnail of each of your image layers in the Timeline panel. Click the Play button to preview how your GIF animation will look.

How to Make an Animated GIF in Photoshop loop animation forever

5. Loop your animation

In the bottom left of the Timeline panel, you’ll see a few choices for looping options. Adobe Photoshop lets you decide if you want your GIF to play through once, three times, or forever. You can select other looping options manually by selecting Other.

Forever is often selected by default. If one of the other options is selected, click the arrow next to the listed duration. Then select Forever from the drop-down menu.

Click the Play icon one more time to make sure you like how the animated GIF looks.

How to Make an Animated GIF in Photoshop export animation gif

6. Export your animation as a GIF file

From the File menu, select Export > Save for Web (Legacy). This will bring up a new settings dialogue box. Here are the ideal settings to choose when saving your work in the GIF file format:

  • Under Preset, select GIF 128 Dithered.
  • In Colors, select 256.
  • Under Image Size, you can adjust the physical dimensions of your GIF. If your original image files were very large, you should reduce the dimensions of your GIF for better online viewing. As you adjust the dimensions, you’ll see the estimated file size change in the bottom left corner of the GIF preview.
  • Under Looping Options, make sure Forever is still selected.

Click Preview in the bottom left corner of the dialogue box to see how your GIF will look in a web browser window.

Click Save, which will open a new save options dialog box. Name your file, choose a destination, and click Save. That’s it! You’ve made your own quick and easy GIF in Adobe Photoshop. Now you can upload it to social media, add it to websites, or do anything else you want with it!

See the final GIF:

Want to learn more Adobe Photoshop tricks? Check out our other guides:

How to Remove the Background of an Image in Photoshop

6 Adobe Photoshop Tips and Tricks for Beginners

How to Select and Change Color in Photoshop

How to Lighten and Brighten Eyes in Adobe Photoshop CC

photoshop tutorial gif

You Might Also Like

photoshop tutorial gif

Do I Need to Register My Drone? Things to Know About Drone Registration

Fender Ultra Luxe Stratocasters & Telecaster

New Fender Ultra Luxe Stratocasters & Telecaster Take Ultra Series to the Next Level

Businessman working with digitizer

5 Easy Photoshop Editing Steps for Beginners

  • Skip to main content
  • Skip to header right navigation
  • Skip to site footer

method logo sxs 280x96 wht

tech news, reviews & how to's

This article may contain affiliate links.

photoshop gif

How To Easily Make An Animated GIF In Photoshop – Tutorial

From email newsletters to social media posts, GIFs can be a powerful way to enhance and bring emotion to your content. Here's how to create an animated GIF in Photoshop.

cropped methodshop icon 1024x1024

From email newsletters to social media posts, GIFs can be a powerful way to enhance and bring emotion to your content. Here’s how to create an animated GIF in Photoshop.

Build Your Layered Image In Photoshop

Open the timeline window, create frame animation, create a new frame for each frame in your gif animation, adjust frame delay durations, do you want a looping gif, press play and preview your animated gif, save your animated gif photoshop project, export your animated gif, adjust your gif file export options, save your gif animation, after you create your animated gif in photoshop, where should you use it, the history of the gif file format.

There’s a famous saying: An image is worth a thousand words. If that’s true, then depending on how many frames are in your animation, a GIF can be worth several thousand words. Somewhere between a still image and a video, the GIF hybrid file type allows you to create short image animations.

The survival of the GIF image file format is very admirable. Primarily used for ugly MySpace pages and annoying animated banner ads, animated GIFs were very popular in the 1990s and early 2000s. Back then, the GIF was not a respected file type. It was a symbol of bad design and many people predicted, and even hoped, that technologies like Adobe Flash and HTML5 would kill the GIF once and for all.

Not only has this older file format survived, but it’s thrived . Animated GIFs are an excellent way to capture an online audience’s attention and bring an extra element of excitement to your content.

Creating Animated GIFs Using Adobe Photoshop Or A Photoshop Alternative

There are plenty of websites and apps that can help you make animated GIFs. Some of my favorites include GIF Brewery (Mac) and GIPHY . Many of these services will even allow you to upload a video clip and convert it into a GIF. If you aren’t familiar with Adobe Photoshop , then you should try using one of those services.

Learning Photoshop isn’t easy, but if you know your way around Adobe Photoshop and need to make an animated GIF, then this tutorial is for you. This tutorial was made using the(Amazon link) Adobe Photoshop 2020 version of Creative Cloud . If you have a different version of Photoshop, don’t worry. The basic steps of how to create an animated GIF in Photoshop will be similar in other versions of the application.

With a rough storyboard in mind, build your image project in a layered Photoshop file. In this example, I am animating the MethodShop logo. You can create folders for each frame or just compose all of the raw layers, it’s up to you. Don’t forget to name your animated GIF Photoshop layers! It will make the animation process a lot easier.

Once your file is ready to animate, open the Timeline window. The Timeline feature in Photoshop enables you to turn layers on and off over a period of time transforming your static image into an animated GIF.

  • Window > Timeline

In the Timeline window, you should need a drop-down menu with two options: Create Video Timeline and Create Frame Animation. If you don’t see the drop-down, then expand your window size and it should appear. Once you see it, click on the option that says Create Frame Animation.

  • Window > Timeline > Create Frame Animation

Arrange your layers for your first frame and then click on the “Create Frame” icon. Arrange your scene and Create Frame, then repeat. Each time you do this, a snapshot will be taken of your layered file. Continue creating frames for your animated GIF until you are done.

  • Window > Timeline > Create Frame

If your Photoshop file is already set up with a sequence of layers for your animation, then try the Make Frames From Layers option. In the top right of the Timeline menu, there’s a three-line hamburger menu option. Click on that and then choose “Make Frames From Layers”. Your Photoshop will then get automatically sequenced into a series of frames.

  • Window > Timeline > Make Frames From Layers

How long of a pause or delay would you like between frames? There’s a drop-down menu under each frame that allows you to customize your delay durations. Adjust the duration individually for each frame.

Do you want your GIF to loop? The bottom of the Timeline toolbar has an option where you can select how many times you’d like your animated GIF to loop. Select Forever if you want your image to loop infinitely. If you are creating an animated GIF banner ad, then select 3 times for your loop. Most ad networks require GIF ads to loop 3x or less or last 30 seconds or less.

Test your animated GIF in Photoshop by pressing the Play icon. Go back and make changes by selecting the frame you’d like to modify. Then preview again until you are happy.

If you haven’t already, now would be a good time to save your animated GIF in Photoshop. You can save an editable file as either a PSD or layered TIF file. Both of these file types will save your frame animation data.

  • File > Save

Animated Gif Photoshop Tutorial: Export Your Animated Gif

Are you happy with your animation sequence? Let’s export it as a GIF animation file using the “Save for Web” option.

  • File > Export > Save for Web (Legacy)…

Not all GIF settings should be the same. You can make a variety of custom adjustments to your animated GIF in Photoshop before exporting it. Here are some of the most important settings that you can customize. Your goal should be to find a balance of settings that both make your file look great and keep your file size as small as possible.

  • File Type: You must select GIF, not JPG, WBMP, or PNG. If you don’t select GIF, then you will end up with a still image that doesn’t animate.
  • Color Palette: You will probably get the best results with either an Adaptive or Perceptual color pallette but you can try experimenting with other options.
  • Dither: If you have a lot of gradients in your animation, then choose Diffusion, Pattern, or Noise as one of your Dithering options. This will attempt to create a gradient effect using dots. But if your GIF is all solid colors, then select No Dither.
  • Colors: The most important option on this screen is your color count. Using more colors will increase your file size. Less is less. Try to get this number as low as possible. Using fewer colors will decrease your file size.
  • Web Snap: An easy way to decrease file size is to restrict your file colors to standard web colors. Try to get your Web Snap percentage as high as possible without making your image look like crap.
  • Animation: Don’t make all of your file adjustments based on a single frame in your animation. Toggle back and forth between frames while you experiment with your settings.

That’s it! You just made an animated GIF in Photoshop! The final step is to click the Save button in the bottom right of your screen. This will save your animated GIF file on to your computer. Open your GIF in a web browser and test it out. Then, if necessary, go back and make any adjustments.

Congrats! You just made an animated GIF in Photoshop. Here are some of the places that you can use your GIF:

  • Social Media: Social media sites including Facebook, Pinterest, and Twitter all accept GIFs. They didn’t initially, but all started accepting GIFs in 2015.
  • Presentations: You can also use your GIF in presentations using Microsoft PowerPoint or Google Slides.
  • Emails: You can’t include rich media content, like videos, in an email. But you can use a GIF. Adding GIFs to newsletters is becoming a very popular tactic.
  • Websites: You can use GIFs to help bring your blog posts to life. Here’s an example .
  • Advertising: Although not as popular as HTML5 ads, GIF banner ads are still very common online. Many ad networks have restrictions on GIF ads. In general, you should try to keep your GIF banner ads under 150 kb and your animations under 30 seconds with a max loop of 3x.

GIF is an acronym for Graphics Interchange Format . The GIF image file format was created by the dial-up Internet service company CompuServe in 1987. Although GIFs may not look as clean or be as small as JPG files, GIFs have two major advantages over other web-compatible image file types: transparencies and animation.

Click To Tweet

Related Articles:

  • Adobe Won’t Let You Photoshop Money Unless You Do This…
  • Missing Missy: The Lost Cat With A Photoshop Battle
  • Famous Works Of Art Photoshopped With Apple Airpods
  • BP Caught Photoshopping Deepwater Horizon Photos

J. Frank Wilson

Frank Wilson is a retired teacher with over 30 years of combined experience in the education, small business technology, and real estate business. He now blogs as a hobby and spends most days tinkering with old computers. Wilson is passionate about tech, enjoys fishing, and loves drinking beer.

You'll also enjoy these posts

MOST POPULAR posts

google naked

7 Pictures Of Naked People Captured By Google’s Cameras

lg tv disable home screen scaled

How To Change The Default LG TV Home Screen To Live TV

dmas top usa

Top 200 Nielsen DMA Rankings (2024) – Full List

MORE LIKE THIS

hatch restore sleep

Is Your Hatch Restore Already Registered? Here’s How To Fix It And Unregister A Hatch Restore.

rooftop woman

10 Naked Sunbathers Busted By Google Earth

ierase

How To Erase iPod Tutorial — The Super Fix for Most iPod Problems

check out these trending posts

couple kissing

Dating Acronyms: The Ultimate List Of Useful Dating Abbreviations

godfather feature

The 28 Most Memorable Quotes From The Godfather Trilogy

Caddyshack Quotes

35 Famous Caddyshack Quotes That’ll Make You Laugh

groundhog day poster

40 Of Bill Murray’s Best Groundhog Day Quotes

trillion what comes after scaled

What Comes After A Trillion? Do You Know?

smart home

5 Compelling Reasons To Turn Your House Into A Smart Home

casablanca quotes

12 Famous Casablanca Quotes That We’ll Never Forget

usb data blockers

The 6 Best USB Data Blockers To Prevent Hackers From Juice Jacking Your Phone

amazon seller vacation mode

Reader Interactions

Leave a reply.

Your email address will not be published. Required fields are marked *

How to Add Text to an Animated GIF Using Photoshop [Quick Tip]

Brittany Leaning

Updated: April 15, 2021

Published: September 03, 2014

What's the deal with animated GIFs these days?

Download Now: The Marketer's Guide to Photoshop

These cute animated videos can be used for fun, or also as marketing collateral to help promote your products, services, or events. Take the customized animated GIF above as an example. This animated GIF is a clip from the movie The Big Lebowski and was taken from GIPHY.com . With the text on top, it can be used to promote our INBOUND 2014 conference in a fun way.

Want to learn how you can add text to animated GIFs, too? Read on for the full tutorial.

How to Add Text to a GIF

  • Search GIPHY for the perfect animated GIF.
  • Right click and choose "Save Image As..."
  • Open your GIF with Photoshop.
  • Show your Timeline.
  • Make sure have the top layer selected in the right side panel.
  • Add text to your GIF.
  • Select "File" > "Save for Web..."
  • Double-check your settings, then click "Save..."
  • Name your file and save it.
  • Post your new animated GIF everywhere!

1. Search GIPHY for the perfect animated GIF.

Go to GIPHY.com and search for a keyword or phrase.  This could be a TV show, a movie character, or a general verb or noun. See an example of this below:

Screen_Shot_2014-08-28_at_4.20.48_PM

Each GIF is tagged with a few words or phrases that describe what the animation is from, and what feeling you get as a result of watching it. As you search for your keyword or phrase, you'll see a list of GIFs pop up in a tile format. Click on one of these GIFs to see a bigger version of it. 

Here's the GIF we chose: 

When using a GIF from GIPHY.com, make sure you properly cite the original source. For more information  on how to do this, check out GIPHY's FAQ page . You can also use a GIF that you've created on your own if you'd prefer not to use GIPHY.

2. Right click and choose "Save Image As..."

Once you've found the perfect GIF, right click on the image and select "Save Image As..." A screen will pop up where you can name your file and save it to your desktop, downloads, or some other folder.

Screen_Shot_2014-08-28_at_4.19.46_PM

3. Open your GIF with Photoshop.

Once you've saved your GIF on your computer, open that file with Photoshop. If you don't have Photoshop, you can also add text to your GIF using GIMP , a downloadable program for manipulating images.

4. Show your Timeline.

When you first open your GIF in Photoshop, you'll probably see a set of layers in the right side panel, but the image won't be animated. In order to access this animation, click "Window" > "Timeline" to show the sequence of images in a linear animation. You can view the animation by clicking on any frame in the timeline and hitting the space bar.

Screen_Shot_2014-08-28_at_4.26.43_PM

5. Make sure have the top layer selected in the right side panel.

This step is important if you want the text to be applied throughout the entire animation. In this case, the top layer is "Layer 8." If you have a different layer selected, your text will only show on the layer you've selected, and on the layers below it. For example, if I selected "Layer 6" here instead of "Layer 8," my text would only show on layers 1 through 6.

Screen_Shot_2014-08-28_at_4.24.01_PM

6. Add text to your GIF.

Here's the part you've been waiting for! To add text to your GIF, select the Text tool in the left side toolbar and drag a box over the image. Start typing your message out -- in this case we wrote "Goin' to INBOUND 2014!" to complement the excited emotion shown in the GIF. To change the font, weight, size, color, and alignment, l ook to the top text bar.

Screen_Shot_2014-08-28_at_4.27.17_PM

If you did this step correctly, you'll see your text appear at the top of your layer panel. If your text is not the top layer, that means you didn't have the top layer selected in step five. (If that's the case, go on and drag the text layer to appear at the top.)

Screen_Shot_2014-08-28_at_4.28.24_PM

If you'd like to test your GIF to see how it's working, simply navigate down to your timeline, click on a frame, and hit the space bar to watch it in action.

7. Select "File" > "Save for Web..."

Once you've finished adding text to your GIF and you're satisfied with your final product, you'll need to save it in a .gif format. To do this, click "File" > "Save for Web..." 

Screen_Shot_2014-08-28_at_4.32.53_PM

If you select the typical "File" > "Save As..." setting, your GIF will be saved as an immovable image and will not animate properly.

8. Double-check your settings, then click "Save..."

Once you've clicked "File > "Save for Web..." you'll be brought to the screen below. If you'd like to change any color or sizing settings, you can do that here. Otherwise, simply click "Save..."

Screen_Shot_2014-08-28_at_4.33.33_PM

9. Name your file and save it.

Once you've clicked "Save..." you'll be brought to a screen where you'll need to name your file and select the folder where you want this file to live. After you've named your file and put it in the appropriate location, click "Save."

10. Post your new animated GIF everywhere!

Voila! See this final Big Lebowski GIF with an INBOUND 2014 twist: 

Now that you know how to take a clever animated  GIF  and add customized text to it, you'll be able to use these in blog posts, on your website, or in social media posts.

How do you use animated GIFs in your marketing? Tell us in the comments below!

Marketer's Guide to Photoshop

Don't forget to share this post!

Related articles.

71 Photoshop Shortcuts to Help You Edit Photos Like a Pro [+ PDF Cheatsheet]

71 Photoshop Shortcuts to Help You Edit Photos Like a Pro [+ PDF Cheatsheet]

How to Use Photoshop: The Bookmarkable Photoshop Tutorial for Beginners

How to Use Photoshop: The Bookmarkable Photoshop Tutorial for Beginners

The 17 Best Photoshop Filters & Plugins of 2020

The 17 Best Photoshop Filters & Plugins of 2020

How to Photoshop Your Coworkers Into Any Situation: A Step-by-Step Guide

How to Photoshop Your Coworkers Into Any Situation: A Step-by-Step Guide

Photoshop, InDesign, Illustrator & More: Your Cheat Sheet for Adobe Keyboard Shortcuts [Infographic]

Photoshop, InDesign, Illustrator & More: Your Cheat Sheet for Adobe Keyboard Shortcuts [Infographic]

How to Crop Images in Photoshop to Specific Sizes [Quick Tip]

How to Crop Images in Photoshop to Specific Sizes [Quick Tip]

3 Tips to Get You Started With Photoshop [+Tutorial Videos]

3 Tips to Get You Started With Photoshop [+Tutorial Videos]

Explore Adobe Photoshop CC basics through quick tips, video explainers, and custom photo filters.

Marketing software that helps you drive revenue, save time and resources, and measure and optimize your investments — all on one easy-to-use platform

How to Edit Animated GIFs in Photoshop

' src=

Few internet phenomena have survived quite as long as the GIF. While it can technically be used as a still image format, the feature that enshrined the GIF in the hall of internet fame is its ability to display multiple frames within a single file, allowing it to become a quick way to share short video clips.

Photoshop is one of the most powerful image editing tools ever created, and for a long, strange time in its development, Adobe was adding every single feature they could think of, from 3D model painting to video editing. 

After a while, Photoshop became a bloated mess, and Adobe finally began to remove some of these additional features and split them off into their own dedicated editing apps. 

While GIFs are often used to display videos, they’re still technically an image format, not a video format, which means that Photoshop still has the ability to edit GIFs . 

If you’ve got a favorite GIF that you want to edit, Photoshop is a great tool for creating seamless edits (or utterly ridiculous ones, if that’s more your style). 

Note: for this tutorial, I’m going to assume that you want to edit an animated GIF. Editing a GIF that’s just a still image works exactly the same way as editing any other image, and doesn’t require any special instructions.

The GIF used in this tutorial is from Giphy.com by Luis Ricardo.

Table of Contents

Step 1: Opening A GIF For Editing

Step 2: set up your workspace, adding adjustment layers, other edits, step 4: exporting your gif, a final word.

This is definitely the easy part! To open an existing GIF for editing, just use the standard process for opening any image in Photoshop: Open the File menu, click Open , and then browse to find the GIF file that you want to open. 

Click the Open button, and Photoshop will load your GIF file. 

photoshop tutorial gif

You’ll notice that Photoshop splits each frame of the animated GIF into a separate layer in the Layers panel. 

photoshop tutorial gif

You can use the Layers panel to select and edit individual frames, but you’ll find yourself constantly toggling layer visibility on and off in order to see one frame at a time, and there’s a better and faster way to do it: the Timeline panel.

Unless you skimmed past the intro, you’ll remember that Photoshop has some video editing capabilities, and that’s what you’ll need to use to complete the editing process. 

photoshop tutorial gif

Open the Window menu and select Timeline . Photoshop will open a new panel along the bottom of the main document window. 

photoshop tutorial gif

If you’ve ever used a video editing app, the concept is probably quite familiar to you, but for those of you who aren’t veteran video editors, it’s still an easy idea to pick up. In essence, the Timeline is a horizontal, time-based layer stack that runs from left to right.

Just think of it like the progress bar that you see when watching a streaming video, except that instead of a simple colored line indicating your position in the video, you see a row of thumbnails displaying each frame instead. 

Selecting a frame to edit within the Timeline panel allows you to automatically display it in the main document window without having to mess around with the layer visibility in the Layers panel. 

The Timeline panel also allows you to do some other important jobs, such as controlling the length of time each frame is displayed, quickly changing the order of your frames, and getting an animated preview of your file.

Step 3: Applying Your Edits

Applying Photoshop concepts to an animated video can be a bit difficult to grasp at first, but you’ll get the hang of it. Here’s a quick explanation of some of the more common Photoshop edits that you can apply to an animated GIF. 

Unfortunately, because of the nature of how each frame is constructed, it’s not always possible to apply these edits non-destructively, but it is sometimes. 

If you want to adjust the entire GIF using an adjustment layer, you can simply create a new adjustment layer at the very top of the layer stack in the Layers panel . 

Scroll up to the top of the Layers panel, select your last frame (which is shown at the top of the layer stack), and then add your adjustment layer. This will apply the effect to every frame/layer listed below it.

You can also apply adjustment layers to individual frames. Select the frame you want to edit using the Timeline panel, and then scroll to find the corresponding frame in the Layers panel and click to select it there too. 

Open the Layer menu, select the New Adjustment Layer submenu, then select your chosen adjustment type. In the New Adjustment Layer dialog box, make sure you check the box labeled Use Previous Layer to Create Clipping Mask.

photoshop tutorial gif

You can also create an adjustment layer using the Adjustments panel, but it doesn’t offer you the same checkbox option. 

Instead, once you’ve got your adjustment layer added in the right place, hold down the Option key and place your mouse cursor over the line between the adjustment layer and your target layer in the Layers panel. 

photoshop tutorial gif

You’ll see the cursor change, indicating that you can convert the layer mask into a clipping mask , which effectively restricts the adjustment layer to the single layer below it. As you can see in the screenshot above, only layer/frame 45 has its color modified. 

When I said that you can do any Photoshop edit you want to your image frames, I meant it! You can use the clone tool, artistic filters, or just about anything else that you can imagine to spice up your GIFs. Just remember – because layers are treated as frames, you won’t be able to use the non-destructive image editing techniques that are standard practice for editing still images. 

This is probably the trickiest part of the GIF editing process in Photoshop, but it’s easy enough to do once you know what to look for. The only real trick is to use the Save For Web (Legacy) exporting method instead of the newer and more streamlined Export As method. 

First, make sure that you’ve got all the frames of your animation selected in the Timeline panel, or Photoshop will only export your currently selected single frame and your animation will turn into a static image. 

photoshop tutorial gif

You could select each frame manually, but there’s a helpful popup menu hidden in the upper right corner of the Timeline panel (shown above). Open the menu and click Select All Frames .

photoshop tutorial gif

Next, open the File menu, select the Export submenu, and click Save For Web (Legacy) . You can also use the difficult keyboard shortcut Command + Option + Shift + S (use Ctrl + Alt + Shift + S if you’re working on a PC).

photoshop tutorial gif

The Save For Web dialog can be a bit overwhelming at first glance, but there are only a few things you’ll need to confirm before you export your newly-edited GIF. 

photoshop tutorial gif

First of all, make sure that the Save For Web dialog is set to use the GIF file type. It may be set there by default because it knows you’re editing a GIF file, but sometimes presets or past usage can interfere with that. 

The top section of the dialog allows you to customize all the color export options for your GIF animation. GIFs can support a maximum of 256 colors, so you’re probably going to want to keep it that high or you’ll lose some image quality. 

However, because animated GIFs contain multiple frames, your file size can easily grow very large, and nobody is expecting a GIF animation to be cinematic quality. The current size of your GIF file can be previewed in the bottom left corner of the preview window. 

You’ll have to experiment with the settings a bit to find the right balance of image quality and file size.

photoshop tutorial gif

Last but not least, make sure to customize the Animation section to control the looping aspect of your animation. Most GIFs that are spread around the web loop continually, but you can disable it or set it to loop a specific number of times only. 

Oddly, I find that the animation preview controls don’t work properly on my PC: the Play button doesn’t do anything, but the frameskip buttons all work, so you can still get a stop-motion preview of your final animation. 

It all works perfectly when using Photoshop on my Mac, but perhaps your experience will vary a bit (even though it shouldn’t).

Once you’re happy with the final settings, click the Save button. Enter a filename in the Save dialog box, click Save one last time, and Photoshop will export your GIF to the location you specified. 

Congratulations, you’ve just edited a GIF in Photoshop! If you’re serious about editing GIFs regularly, you might want to find a program that’s dedicated to editing animated GIFs and other types of video, but for the occasional fun editing project, Photoshop is a great choice – especially if you’ve already got it installed.

Happy animating!

' src=

Leave a Reply Cancel Reply

Your email address will not be published. Required fields are marked *

Sign up to our newsletter!

' src=

George Sino

Thanks for this

Photoshop is a design software made by Adobe Inc. This site is not supported or associated with Adobe in any way.

  • Photoshop Tutorials
  • Photoshop Freebies
  • Privacy Policy

Photoshop GPU FAQ

Find answers to commonly asked questions about Photoshop and graphics processor (GPU) card usage.

Topics in this article:

How does Photoshop use the graphics processor?

What are the minimum graphics processor requirements, how can i check the gpu compatibility report, how can i check the gpu status while working on a document in photoshop, what are the various gpu modes in photoshop, which features in photoshop use the graphics processor, how do i enable photoshop to use the graphics processor, does photoshop take advantage of more than one graphics processor or graphics card, can i use photoshop's graphics processor features on a virtual machine.

Photoshop leverages the graphics processor in your system to provide a seamlessly smooth Photoshop experience and increased performance with many features. 

For full Photoshop system requirements, see Photoshop system requirements .

Generally, consider using GPUs with an Average Ops/Sec of 2000 or higher on PassMark's GPU Computer Benchmark Chart .

If you are using an older graphics card or driver, GPU functionality in Photoshop may be limited or not supported.

With the Photoshop 23.0 release, you can run the graphics processor compatibility check to ensure your GPU is compatible:

Go to Help > GPU Compatibility and see the report dialog that opens.

GPU compatibility check

The information on this screen reflects the GPU state when Photoshop is launched. If the state of the GPU changed during the session, it would not be reflected here. For real-time feedback about using the GPU during an active session, see  How can I check the GPU status while working on a document .

If the GPU stops working in Photoshop, several features could be impacted . To confirm the GPU status in Photoshop, do either of the following:

  • From the Document Status bar on the bottom left of the workspace, open the  Document Status  menu and select  GPU Mode  to display the GPU operating mode for your open document. 
  • Open the  Info  panel and select  GPU Mode .

Use the GPU Mode indicator for your active document when trying to diagnose rendering issues

Here's the list of available GPU modes in Photoshop:

  • CPU:  CPU mode means that the GPU isn't available to Photoshop for the current document, and all features that have CPU pipelines will continue to work, but the performance from GPU optimizations will not exist so these features could be noticeably slower, such as - Neural Filters, Object Selection, Zoom/Magnify, etc. The visual interface for many features like crop, selections, and transform will drop color borders or become harder to view (thinner).
  • D3D12 : This is the preferred mode for Windows and means you can take full advantage of the most modern GPU APIS on that platform.
  • Software : Software rendering is a Windows-only mode that returns to the Direct X 11 renderer. This happens if you explicitly set the Technology Preference, " Older GPU Mode (Pre 2016) ", or if Photoshop determines that the software renderer is required for better stability.
  • Metal : This is the preferred mode for macOS and means the user is taking full advantage of the most modern GPU APIs on that platform.
  • Legacy OpenGL : Legacy OpenGL means that Photoshop uses the previous generation of GPU technology. Ideally, users on macOS would see Metal,  and Windows users would see D3D12 .

Features that require a GPU for acceleration

  • Artboards ( more info )
  • Blur Gallery - OpenCL accelerated
  • Camera Raw ( more info )
  • Image Size – Preserve Details ( more info )
  • Lens Blur ( more info )
  • Neural Filters ( more info )
  • Select Focus ( more info )
  • Select and Mask - OpenCL accelerated ( more info )
  • Smart Sharpen - OpenCL accelerated ( more info )

Features that won't work without a GPU:  If your graphics processor is unsupported or its driver is defective, the following Photoshop features won't work —

  • Birds Eye View ( more info )
  • Flick Panning ( more info )
  • Oil Paint ( more info )
  • Perspective Warp ( more info )
  • Render – Flame, Picture Frame, and Tree
  • Scrubby Zoom
  • Smooth Brush Resizing ( more info )

If you encounter any issues working with the above features, see  Graphics processor (GPU) troubleshooting .

   Discontinuation of 3D features in Photoshop

Photoshop’s 3D features will be removed in future updates. Users working with 3D are encouraged to explore Adobe’s new Substance 3D collection, which represents the next generation of 3D tools from Adobe. Additional details on the discontinuation of Photoshop’s 3D features can be found here:  Photoshop 3D | Common questions on discontinued 3D features .

  • On Windows, a GPU with DirectX 12 support and 1.5 GB of GPU memory
  • On macOS, a GPU with Metal Support and 1.5 GB of GPU memory

Choose Edit > Preferences > Performance (Windows) or Photoshop > Preferences > Performance (macOS).

In the Performance panel, make sure that Use Graphics Processor is selected in the Graphics Processor Settings section.

Click Advanced Settings and specify the following option:

Use OpenCL :  Enable to accelerate the new Blur Gallery filters, Smart Sharpen , Select Focus Area , or Image Size with Preserve Details  selected (Note: OpenCL is available only on newer graphics cards that support OpenCL v1.1 or later.)

Photoshop does not take advantage of multiple graphics cards. Conflicting drivers may also cause crashes or other problems.

  • If you have a system with multiple graphics cards, see  Configuring computers with multiple graphics cards .
  • If you have multiple monitors, a best practice is to connect them to the same graphics card prior to starting Photoshop.

Running Photoshop under  virtual machines, or VMs, is not tested extensively nor officially supported . Running Photoshop with Use Graphics Processor enabled under virtual machines and remote desktop is not supported at all.

Get help faster and easier

 alt=

Quick links

Legal Notices    |    Online Privacy Policy

More articles like this

Learn photoshop.

icon

Share this page

Language Navigation

Adobe Community

  • Global community
  • 日本語コミュニティ Dedicated community for Japanese speakers
  • 한국 커뮤니티 Dedicated community for Korean speakers
  • Photoshop ecosystem
  • Discussions

rotating a flower

Terri34733012zs9n

Copy link to clipboard

Explore related tutorials & articles

Leslie Moak Murray

never-displayed

IMAGES

  1. Can You Make a Full Animation in Photoshop

    photoshop tutorial gif

  2. How to make an animated GIF in Photoshop

    photoshop tutorial gif

  3. How To Render A Gif In Photoshop

    photoshop tutorial gif

  4. Awasome Make Animated Gif Photoshop Elements Ideas

    photoshop tutorial gif

  5. noredproduct

    photoshop tutorial gif

  6. How To Create Animated Image In Photoshop ~ List Of Gifs Examples 2022

    photoshop tutorial gif

VIDEO

  1. Photoshop Tutorial: Gif Sharpening Action + Download;

  2. How to create a GIF in Photoshop CC

  3. Using Photoshop for Creating Animations

  4. gif image in Adobe photoshop creating

  5. como inserir gifs prontos em imagens

  6. how to create motion in adobe photoshop using GIF?

COMMENTS

  1. How to make a GIF in Photoshop

    What are GIFs good for How to create a GIF in Photoshop Make an amazing animated GIF. Learn what GIFs are and how they're different from other file types. Then just load any stack of images — a funny picture, a short video clip, even a set of stills — into Adobe Photoshop. The Timeline tools will do the rest.

  2. How do I Create a GIF in Photoshop

    How to Create GIFs in 3 Easy Ways

  3. How to Make an Animated GIF in Photoshop [Tutorial]

    How to make a GIF Upload your images to Photoshop. Open up the Timeline window. In the Timeline window, click "Create Frame Animation." Create a new layer for each new frame. Open the same menu icon on the right, and choose "Make Frames From Layers." Under each frame, select how long it should appear for before switching to the next frame.

  4. How to Create a GIF in Photoshop

    Learn how to create animated GIFs using the Photoshop timeline. Host VooDoo Val explains how to animate the buttons, joysticks and screen of an arcade machin...

  5. Animated GIF maker

    How to make an animated GIF in Photoshop. Follow along with Plant step-by-step to make your very own GIF. Before you start. Use these sample sketches or practice with your own. 1. Sketch it out Plant starts by creating variations of her initial drawing to show different states of motion, then saves each variation as a separate file.

  6. How To Make an Animated GIF in Photoshop (Fast & Easy!)

    How To Make an Animated GIF in Photoshop (Fast & Easy!) Photoshop Training Channel 2.08M subscribers Subscribe Subscribed 2.2K Share 146K views 3 years ago ⚡ Cool Photoshop 2020 Effects...

  7. How to Make a GIF in Photoshop (+ 8 FREE Methods)

    How to Make a GIF in Photoshop: Step by Step Tutorial Step 1: Load Your Images into Photoshop Step 2: Open the Timeline Window Step 3: Create Frame Animation Step 4: Convert the Layers into Frames Step 5: Preview your GIF Step 6: Adjust the Timing and Looping Step 7: Save as an Animated GIF How to Make a GIF in Photoshop: Video Tutorial

  8. How to Make a GIF in Photoshop

    1. How to Import a Video to Photoshop Step 1 To learn how to make a GIF in Photoshop from video, we first need to import a video file. To do this in Photoshop, go to File > Import > Video Frames to Layers. Advertisement Step 2 Locate and select the video file that you want to use, and click on the Open button. Step 3

  9. How to make an animated GIF in Photoshop

    BEGINNER · 4 MIN Create an animated GIF from a series of photos Learn how to use a series of photos and frame animation to create an animated GIF. What you'll need Get files Sample file to practice with (ZIP, 25.7 MB) In this tutorial, you'll learn how to turn a series of photos into a looping animated GIF using Photoshop.

  10. How to Make an Animated GIF in Photoshop

    Design tutorials Video & animation A GIF, or "Graphics Interchange Format", is a compressed image file format that allows for animation. There are many ways to create a GIF, but Photoshop is fast and easy, with built-in tools for image manipulation and animating.

  11. How To Make an Animated GIF in Photoshop (Fast & Easy!)

    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.

  12. How To Create a GIF in Photoshop

    Alt + Shift + Ctrl + S What is the ideal format for images used in creating a GIF in Photoshop? How can I make my GIF loop continuously in Photoshop? Can I adjust the frame display time when creating a GIF in Photoshop? What is the significance of the 'Save for Web (Legacy)' option in Photoshop?

  13. How to make a GIF in Photoshop (or a free alternative)

    Step 1: Select the tab labeled GIF maker and select the Browse button. Select all the image files associated with your GIF. Step 2: Next, select the button labeled Upload and make a GIF!. When the ...

  14. Simple GIF Animation

    This is a tutorial teaching the basics of animating and making gifs in adobe photoshop cc. There are two ways to animate in photoshop. The first way is to animate everything frame by frame,...

  15. How to Make an Animated GIF in Photoshop

    Then select Forever from the drop-down menu. Click the Play icon one more time to make sure you like how the animated GIF looks. 6. Export your animation as a GIF file. From the File menu, select Export > Save for Web (Legacy). This will bring up a new settings dialogue box.

  16. How To Easily Make An Animated GIF In Photoshop

    Create A New Frame For Each Frame In Your GIF Animation. Add new frame. Arrange your layers for your first frame and then click on the "Create Frame" icon. Arrange your scene and Create Frame, then repeat. Each time you do this, a snapshot will be taken of your layered file.

  17. How to Add Text to an Animated GIF Using Photoshop [Quick Tip]

    Once you've saved your GIF on your computer, open that file with Photoshop. If you don't have Photoshop, you can also add text to your GIF using GIMP, a downloadable program for manipulating images. 4. Show your Timeline. When you first open your GIF in Photoshop, you'll probably see a set of layers in the right side panel, but the image won't ...

  18. Photoshop Tutorial: Create an animated GIF from a series of photos

    To create an animated GIF from a series of photos in Photoshop, follow these steps: Open all of the photos that you want to use in your GIF in Photoshop. Select the first photo in the...

  19. How to Edit Animated GIFs in Photoshop (4 Quick Steps)

    Step 1: Opening A GIF For Editing This is definitely the easy part! To open an existing GIF for editing, just use the standard process for opening any image in Photoshop: Open the File menu, click Open, and then browse to find the GIF file that you want to open. Click the Open button, and Photoshop will load your GIF file.

  20. Work with Smart Objects in Photoshop

    You can package the Linked Smart Objects in a Photoshop document, such that their source files are saved to a folder on your computer. A copy of the Photoshop document is saved along with the source files in the folder. Choose File > Package. Select a location where you want to place the source files and a copy of the Photoshop document.

  21. How to make an Animated GIF

    Hello Everyone, Welcome to Elmin Graphics channel.In this tutorial I will show you how to create an easy animated GIF in Adobe Photoshop.Thank you for the su...

  22. Export documents, layers, and artboards in Photoshop

    Use the Export As option to fine-tune your export settings every time you export layers, layer groups, artboards, or Photoshop documents as images. Each selected layer, layer group, or artboard is exported as a separate image asset. To launch the Export As dialog, do either of the following: Navigate to File > Export > Export As to export the current Photoshop document.

  23. How To Create an ANIMATED GIF in Photoshop

    How To Create an ANIMATED GIF in Photoshop - YouTube 0:00 / 7:00 YOU can help me help others learn photography. You can quickly offer your support here where I receive 100% of your kind...

  24. Photoshop graphics processor (GPU) card FAQ

    Photoshop does not take advantage of multiple graphics cards. Conflicting drivers may also cause crashes or other problems. If you have a system with multiple graphics cards, see Configuring computers with multiple graphics cards. If you have multiple monitors, a best practice is to connect them to the same graphics card prior to starting ...

  25. rotating a flower

    MY computer isnt compatible with photoshop. I am trying to rotate a leaf in my pattern and when I can by - 14452342. Adobe Community. cancel. Turn on suggestions. Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type. ... Explore related tutorials & articles. 1 Reply 1. Jump to latest reply ...

  26. Photoshop Tutorial

    This in-depth, to the point tutorial show you how to create a simple animated GIF.To download the source files or an HD copy of the tutorial head over tohttp...