December 11, 2014

How to: Make Animated Blog Photos in Photoshop

This week has been creeping by so slowly for me -- are any of you having slow weeks, too? Gah. Please, weekend, come to me soon!

Anyway, happy Thursday. I meant to have a cooking post up, but I wasn't able to shoot this past weekend so I'm putting that on pause. Instead, I was inspired to make this post based off of a question I receive in my comments (and from friends who've asked me how to do this as well). I don't know if this is the way that everyone makes GIFs or if it's the easiest way, but it's the way I do it!

So let's get cracking, shall we?

- - - - -

01. Select the images for your GIF.

In order to make an animated GIF for your blog, grab the photos you want to use. When shooting, hold the shutter button down so that you get a burst of consecutive photos while you (or the object) is moving. 

Tip: Working with a tripod is best as it minimizes the amount that the frame of the image moves, but I almost never do this. Living life on the edge.

02. Add all images to one file as different layers.

Create a new file, and copy and paste all of your images in order into that document. Make sure you don't flatten the image, as you want to keep all of the frames.

03. Edit the images as you'd like.

For this, I did my usual actions. I played with curves, selective color, etc. You can get as creative as you want and do whatever you'd like. Alternatively, you can edit the photos before you add them into one file. If you're using actions, I find it a lot easier to edit once they're all together.

04. Open up the animation window.

05. Hide all of the layers except for the first one.

Click the little eye next to each image layer until you have the first layer, or the first frame of your GIF.

06. Animate!

You're going to make sure that you're looking at the Animation (Frames) tab. Select a time that you want each frame to run for. Depending on what kind of images I have to work with, I'll select something between 0.1-0.5 seconds. You can always change this later, but every new frame you make will be based off of this first frame, so try to make an educated guess on what'll work! I started out with 0.5 seconds, but changed this to 0.2 after I viewed the animation as it was too slow.

Tip: If you make changes to that first frame, it'll affect the entire animation and all subsequent frames, so be careful. On the flip side, if you make changes to any other frame, it'll only affect that one frame.

07. Repeat until you've animated every layer.

Each time you make a new layer, unhide the next layer.  Keep going until you're completely done.

08. Save as Web & Devices.

When you're all set and ready to save, make sure to choose File > Save for Web & Devices.

09. Choose your settings, then click save!

In the Web & Devices window, you'll have the opportunity to choose between settings. For each GIF, try different settings. For this one in particular, I decided on Perceptual and Pattern. The second box refers to the kind of noise/effect that your GIF will have. You're only allowed 256 colors, so anything beyond that requires a little taking care of!

- - - - -

I hope this made sense. I'm not the best at explaining things, but I added visuals in the hopes that it made things a bit easier. Feel free to ask questions, and let me know if this was helpful. If you're interested, I'll do a quick post on converting a video into an animated GIF next time.

Also, if you haven't seen it, my friend Christy did a sweet post on her blog about holiday traditions. I was humbled that she asked me to participate, so please go check it out and leave her a comment! And let us know, what are your holiday traditions?

bloglovin | instagram | tumblr | twitter | youtube


  1. I haven't tried this yet but I'll definitely save this tutorial for later! I had already forgotten how to make gifs! Thanks for sharing! :)


    Miss Blue Eyes

  2. Please do! If only because I love adding gifs to break up a big post of photos (and let's be real, all I really do is post photos sooo). Haha, maybe a OUAT gif post is in order ;)

  3. Yay, I hope it comes in handy! I'm horrible at explaining things, but please do let me know if you have any questions! :)


Thanks so much for leaving a comment!