One of the things we love most about blogging is the connections we make with insanely talented boss babes all over the world. So many of you gals are just doing truly amazing things, and you have such kind hearts and spirits to boot!
One of our main internet gal pals is a super cute, red-headed Content Creator & Graphic Designer from Florida, and we'd kind of be surprised if you haven't heard of her--Lizzie Darden (@lizzie_darden). You can check out what she does (she does so much!) here! And while we're all in this crazy internet blogosphere together, each person/blogger/designer/artist has different strengths. One of Lizzie's is making KILL-URR GIF'S....something we're super intrigued by and have absolutely no idea how to do. So, she agreed to share a tutorial with us, so we can maybe actually make one instead of just googling "Chandler Bing Dancing GIF."
Sooooo, we'll let Lizzie take it away! ----->
Looping gifs are such a fun way to bring a little extra life to your Instagram feed or blog, and make people say “Whaaat! How did you do that?!” (Plus they’ve always reminded me of those moving posters and newspapers from Harry Potter, which just adds like a million cool points) They may seem a little intimidating at first, but the good news is they’re actually super easy to make! With some basic photography and Photoshop knowledge, plus a bit of planning, you can create an impressive gif in way less than an hour! Let’s get to it!
A tripod (it doesn’t have to be anything fancy! I bought mine off Amazon Basics for under $20 and it does the job just fine)
Some kind of object you want to make move (it helps if it’s something solid; something lightweight can be accidentally nudged easily and can mess up the illusion. Same goes for liquids, any change in the actual object will show up and potentially ruin the gif)
To begin, make sure you’re in an area with a controlled light source. The idea behind the gif is to have the background remain entirely unvarying the whole time, and shadows from shooting outside or near sunlight can make this difficult.
Also, take the time to plan out what sort of movement you’d like in your gif. Storyboard or sketch it out if it helps! For this example, I’ll be using an ice cream cone and adding pom poms one-by-one to the shot to create a gif of them building up and appearing out of thin air. I ended up using a lot of pom poms to have a gif with a lot of frames, but you can use fewer objects and make a shorter gif just the same!
Set up your tripod and arrange your first shot. I like to use square scrapbook paper because it helps me align the shot in the perfect square format for Instagram.
4. Next I added a pom pom one at a time, being extra careful not to bump or nudge the previous ones, taking a shot (the photo kind! Not vodka, silly!) as I went along. Keep the camera and tripod in the same spot for the entirety of the shoot. Also make sure you’re shooting in the same setting throughout (ex. If you’re using flash, shoot in flash for every photo)
5. Import your photos and bring them all into a single Photoshop file as separate layers. It may be second nature to edit and color correct before you bring them into Photoshop, but we’ll be saving that till later so we can edit them all at once and ensure the coloring is all the same from frame to frame.
6. Make sure your layers are in sequential order, with the first frame of the gif as the bottom layer.
7. Now we can edit the white balance and color correct. I like to use the Curves tool and sample an object that’s supposed to be true white with the white eyedropper. This instantly adjusts the white balance and usually gets it spot on! Make sure your Curves or any adjustment layers are at the very top of your layer list so they apply to all layers.
8. Using the eye icon to the left of your layer name, set all photo layers to “hidden” except for the very bottom one (the start of your gif). Leave adjustment layers visible if you have any. Save out the single layer as a jpeg with “Save As” and name it something like “ice-cream-01.jpg”. Numbering helps when you’re compiling the gif in a second!
9. Continue up the list of layers, turning the next layer on “visible” and saving out each time. So your next file will have the bottom layer and the second-to-last layer turned on, and will be called “ice-cream-02.jpg”.
10. Once you’ve saved all the separate jpeg files, bring them all into a NEW Photoshop file. You can create a new file that’s about 1500 x 1500 pixels, something small enough that Instagram can handle as a video file (Anything bigger than that usually causes crashing upon uploading). Make sure your layers are in the right order, with the first frame of the gif on the bottom just like last time.
11. Open the Timeline toolbar by going to Window > Timeline. The Timeline will pop up at the bottom of your Photoshop app.
12. If you have a blank Background layer at this point (which sometimes happens when you create a new Photoshop file) go ahead and delete it.
13. Click the button in the middle of the Timeline toolbar, “Create Frame Animation”. The first layer of your file will appear in the Timeline.
14. Select all your layers by holding down Shift and selecting the top and bottom ones. With them all selected, go to the dropdown in the Timeline toolbar and hit “Make Frames from Layers”. Now all your layers have been converted to frames in a gif.
15. Here you can play with the delay between each frame (I like to do .1 or .2 seconds so the gif plays pretty quickly. I think it’s more engaging that way!) You can also choose whether you want the gif to loop once, 3 times, or forever, and preview how it will look with the Play button.
16. Once you’re happy with your gif, you can export it and show it off to everyone! Instagram doesn’t support an actual “gif” format, so you’ll export it as a video (mp4 format) and Instagram takes care of the looping for you, so it will end up resembling a gif. For this format, go to File > Export > Render Video. In this window you can name it, resize it if you wish, and save it out. Make sure your frame rate is at the standard 30 FPS (frames per second). If you’re wanting to save as a .GIF for a blog or website, go to File > Export > Save for Web and save as a GIF in the right hand side of the window.
17. Tada! You made a gif! It may seem like a lot of steps at first, but once you get the hang of it it’s really not too bad! Happy GIF-ing loves!
Cort, Jen, & Lizzie