Ready to kick off your UX design career? Announcing the new and improved UX Academy. Learn more here — next cohort starts May 15th!

View all articles

There’s an app for everything GIF related.  GIF keyboards, searches and extensions to easily add GIFs to your e-mails.  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.

Want to learn more tricks with design software?  Sign-up for a foundational course from Designlab!

About Designlab

Designlab teaches you UI/UX design skills through online courses with 1-on-1 mentorship from expert designers.

Get Updates

Be the first to read our new articles on UI/UX design education, career development, and more!

Got it! We'll keep you in the loop.

Get the syllabus & take a tour