TIP | How to Create a GIF Using Layers in Photoshop

TIP: How to Create a GIF Using Layers in Photoshop

TIP | How to Create a GIF Using Layers in Photoshop

After you’ve created your frames

Export out each artboard/frame as transparent PNGs and then import them as layers into Photoshop.

Once all your layers are in Photoshop

Select all your layers, in the Timeline window select the “Create Frame Animation” button. Then in the hamburger menu select “Make Frames From Layers”. This will create a frame for each of the layers that you brought in. Depending on your animation you may need to duplicate and rearrange the frames. You can set the length for each individual frame or select them all to have the same length. 

Now you are ready to export your GIF

Save for Web (Legacy) or keyboard shortcut (Option+Shift+Command+S). Save as a Transparent GIF with Matte set to “None” and Loop “Forever”.

Now your GIF is ready to go!


Prompt #004


Prompt #004 – IG Story Stickers or GIF Set

Objective: You’ll be creating your own set of IG Story Stickers, which are transparent background GIFs that can be applied to your IG Stories, but if you’re not on the Gram you can also use them as regular GIFs that can be used on social, in emails or on your website.

We will be sharing tips throughout the month on how you can get your own branded GIPHY account so you and others can use your stickers.

Suggested Size: Any size or proportion will work*

Suggested Program: Illustrator and Photoshop

Goal Date: April 30th

* If uploading to GIPHY for use in your IG Stories the final GIF is limited to 100MB, but they recommend 8MB or less.

Design these with an imaginary or existing brand in mind. If you need more help getting your design started, check out our client type database!

PD Preferred GIF Creation Method: Create your designs in Illustrator, once you have the final design create multiple artboards for each frame of your animation. Export out each frame into a folder, then open Photoshop and import each frame as its own layer. Open the Timeline dialogue box and select “Create Frame Animation”. Then create a new frame for each layer of your import. Ensure the Loop setting is set to “Forever”. When ready to export you’ll need to open the “Save for Web (Legacy)” (Command+Option+Shift+S), with the GIF setting and Transparency checked. Once exported you can then upload to GIPHY or wherever you choose to use the GIFs.

NOTE: Be sure to keep in mind that these will be a loop animation, so you might have to play around with adding a few extra frames at the end to create a smooth animation.

If you are making IG Story Stickers, please note that GIPHY has some Requirements and Tips for Improving Sticker Quality. One of the biggest requirements to note is that “At least 20% of the first frame must be transparent”.

Remember to play and have fun while creating these!!!! Our hope is that you will develop new skills and passions while working on these prompts.

We encourage you to post your work-in-progress as well as your final pieces to get helpful feedback from the PD community (#PDcrit). Also, be sure to tag us @prompteddesign and use #Prompt004 to give you a chance to be featured on our page.


👩‍💻 MI + 🖐️🌴 SC 👩🏻‍💻


Expand your design thinking alongside us with our monthly prompts, tips and inspiration! 

Copyright © 2020 Prompted Design. All rights reserved.

Add to cart