How to make a GIF in Photoshop

 
 

Have you ever seen those fun, animated GIFs and wondered how they were created? Photoshop, of course- and I'm going to show you step by step how to make one for yourself! Here's an example of the GIF I made using this tutorial.

 
donut gif.gif
 

 

Step 1: Upload images to Photoshop.

Gather the images you want for your GIF in a separate folder. To upload them into Photoshop, click File > Scripts > Load Files Into Stack.

 
Screenshot gif.jpg
 

Then, choose browse and select which files you would like to use in your GIF. Then, click OK

 
Screen Shot GIF 2.png
 

Photoshop will then create a separate layer for each file you have selected.

Step 2: Open up the Timeline window.

To open the Timeline window, go to the top navigation, select Window > Timeline. This will let you turn different layers on and off for different periods of time, thereby turning your static images into an animated GIF.

 
how-to-make-a-gif-in-photoshop.jpg
 

The Timeline window will appear at the bottom of your screen.

Step 3: Click "Create Frame Animation"

In the Timeline window, choose, "Create Frame Animation".

 
Screen Shot5.png
 

Now, your Timeline should look similar to this:

 
Screen Shot 6.png
 

Step 4: Create a new layer for each new frame.

First, you need to select all of your layers by going to the top navigation menu and choosing Select > All Layers.

Then, select the menu icon located on the right of the Timeline screen.

 
Screen-Shot 7.jpg
 

From the dropdown menu, select Create new layer for each new frame.

 
Screen-Shot 8.jpg
 

Step 5: "Make Frames From Layers."

Open the same menu icon on the right, and select "Make Frames From Layers." This will make each layer a frame of your GIF.

 
2.jpg
 

Step 6: Under each frame, select how long it should appear before switching to the next frame.

To do this, click below each frame and select how long you would like it to appear. If you want to choose multiple frames, shift + click each frame you'd like, and select how long you would like them to appear.

 
Screen Shot 2018-05-16 at 12.46.02 PM.png
 

Step 7: Select how many times you'd like your GIF to loop.

You can find this option at the bottom of your timeline panel. The default will say Once, but you can loop it as man times as you'd like. Typically, I choose the Forever option. Click Other if you would like to specify the number of loops.

Screen Shot 2018-05-16 at 12.46.44 PM.png

Step 8: Preview your GIF by pressing the play icon.

 
3.jpg
 

Step 9: Save and Export Your GIF.

If you're satisfied with the result of your GIF, save it to use on the web by going to the top navigation bar and choosing File > Export > Save for Web (Legacy)... 

 
6.jpg
 

Next, choose the type of GIF file you would like to save it as under the Preset dropdown. If you have a GIF with gradients, select Dithered GIFs to prevent color banding. If your image files contain mostly solid colors, you may opt for no dither.

 
Screen Shot 2018-05-16 at 12.58.41 PM.png
 

Click Save at the bottom to save the file to your computer. Now you're ready to upload this GIF to use for marketing, branding- let your imagination run wild!

Upload the GIF file anywhere on the web that you would like to put an image, and it should play seamlessly. Please note that Instagram does not allow for GIFs, only MP4 video content. However, GIFs will work on most platforms. Some examples of common marketing strategies for GIFs are Pinterest, e-mail newsletters and campaigns, blog posts, and websites.

Congrats! You've just made your first GIF.

 
donuts4.gif
 

Leave a comment below and let me know how your GIF turned out, or if you have any questions about the process. Happy Photoshopping!

Previous
Previous

Best Mockups For Designers

Next
Next

Photoshop VS. Lightroom: What should I be using?