top of page
Search
  • mugglehugstudio

how to create an animated gif for instagram

One of my favorite ways to display multiple images on Instagram is not necessarily with a carousel, but with a moving gif that filters through images automatically. Here's how to achieve that using Photoshop!



This process is so simple and easy to execute however you would like. To start, be sure that you have multiple works of art or design that you plan to filter through. I have six artboards here in Illustrator that I have exported for screens as PNGs, at the Instagram standard size of 1080x1350px.



Once you have your artwork ready, open Photoshop with a board that is whatever size you want your final gif to be. (Again, mine is 1080x1350px.) Add each art piece to a new layer by selecting File > Place Embedded. Photoshop should automatically create a new layer for each artwork, but make sure each piece has its own layer and nothing is covered up.



After you have made new layers for each artwork, you will open the animation panel: Window > Timeline. That will open a control panel at the bottom of the page, where you will build the frames of your gif.



Next, select the menu button at the top right of the Timeline panel and choose Make Frames from Layers. This will automatically create a new frame of the gif for each of the artworks you imported before. You can also do this manually by changing the visibility of each layer, but this option is nicer, especially if you have a lot of artwork or frames to filter through.



Next, you will need to select how much time you want each frame to last. The example I've created uses 0.5 seconds, but if you are more focused on readability rather than flashing, you might want to increase that to 1 or even 2 seconds. You can also choose whether you want your gif to repeat once, twice, or forever (which is what I use for Instagram art).


Tip: don't make a gif frame too long, or viewers might not know that it actually moves on to something else. It is better to have someone filter through twice because they didn't read it all than it is to have someone only read part of something because they did not know there was more.



To preview your gif, press the Play symbol at the bottom of the control panel. Once you are happy with the way your gif looks, it is time to export.


This is where you have a choice on how to save your file. Unfortunately, Instagram does not support gif files to be posted on the grid. If this is your intention, jump down to where it says 'For Instagram.' If you want a looping file to embed in something like a website, continue on here.


For embedding: this will be a traditional gif file that will cycle through on a loop forever. Go to File > Export > Save for Web (Legacy). This will open up a very complex panel, where you will edit the parameters of your file. Start by Choosing the Preset Gif 128 Dithered. This will reduce the number of colors in your image to 128, but only so that the final file does not end up color banding or distorting.


If you are really concerned with high quality color integrity, try changing the color number to something like 256. This will eliminate the dithering from the preset, so be sure to add it back in (the preset uses 88% dither). You can preview the file by pressing the play button in the bottom right corner. Once you are happy with the settings, hit Save and export your file.



For Instagram: this will be a video file that Instagram will loop forever. To export it this way, select File > Export > Render Video. Select the location you'd like to save it, and change the frame rate if you wanted. Then click Render. Your mp4 file will export wherever you chose, and will be ready to post to your Instagram grid.



And that finishes your animated gif! You can embed these to websites, share them on Instagram and Facebook, and even pin them to Pinterest. This is a great, versatile skill to have in your design arsenal, and really is not very difficult. You can use the Timeline tool to create custom moving gifs, animate a series of photos, or even make a short video clip repeat on a loop. Plus, the overall effect is really fun!


Be sure to tag me in your creations @mugglehugstudio on Instagram!



bottom of page