How to Make Your First GIF with Photoshop

There’s an app for everything GIF related like GIF keyboards, searches, and extensions to easily add GIFs to your emails. So why would you want to make a GIF yourself? Because while you make you’re first GIF, you’ll be on your way to learning just how versatile Photoshop CC really is.

1. Upload Your Images

All gifts are made of static images. Gather 3 to 5 images to use for your GIF. This is the fun part! Once you’ve decided on the images, you’ll need to upload them to Photoshop. Go to File > Scripts > Load Images into Stack.

Next, select Browse and choose which files you'd like to use in your GIF, then click OK. If you’ve completed this step successfully, you’ll see that Photoshop has created a layer for each image uploaded.

2. Create a Timeline and Add Animation

Now, it’s time to create a timeline. Go to the Window menu and select Timeline.

If you’ve done this step correctly, an animation box will appear at the bottom of Photoshop.

Select the dropdown menu and choose Create Frame Animation. Make sure to click the option. You’ll know you’ve done this correctly because one of your images will appear in the timeline frame.

3. Make Layers

Now, it’s time to select all of your layers. Choose the menu Select > All Layers. Next, click on the menu in the right of the timeline frame, and select Create New Layer for Each New Frame.  

4. Think About Time and Transitions

Again, click on the menu in the right of the timeline frame, and select Make Frames From Layers.

Now, under each frame you’ll see a dropdown under each image.  Use the menu to choose how long each image will appear in your GIF.

Finally, choose how many times you want your GIF to repeat by clicking the dropdown menu in the bottom of the timeline box that defaults to Once. We recommend choosing forever!

 

5. Preview and Play

Now, enjoy your hard work! Press the play button at the bottom of the timeline box. See your GIF in action!

6. Save Your GIF

To save your GIF for the web, go to File > Export > Save for Web (Legacy). You’ll see many options for saving. The first dropdown box that says Preset is important. Chose one of the GIF dithering options. The larger the number in the dithering option, the larger your file size will be. Click Save.

Now, get your GIF off your desktop! Post it anywhere you want.

If you’re interested in building your UX or UI skills—start now! Explore our short courses to expand your skills, or check out our rigorous UX Academy program.