cat-tutorials

How to Make an Animated Image

How to make an animated image. I had no idea how EASY this was!!

Press ESC to pause animation.

You guys know I love my animated images, like this How to Frost a Cupcake Animated Gif, and who could forget this one of Gaby eating a cricket??! Animated images (à la the Vine app) are all the rage right now! :) But I bet you didn’t know how so incredibly easy it is to make your own animated images with your own photos in Photoshop. It seriously could not be easier! I don’t even need words for this tutorial, you could just look at the pictures below and figure it out. But of course, I will give you some directions too. ;) Read below for more. :)

How to make an animated image. I had no idea how EASY this was!!

MY OTHER RECIPES

I am using Photoshop CS5 for this tutorial.  Open the images you want to make into an animated gif by going to File > Scripts > Load Files into Stack. Select the images you want to use for your animated image.

Note: On this screen you can also click  “Attempt to Automatically Align Source Stacks” and it will attempt to align the background of all the images so they are all in the same spot (in case you didn’t use a tripod). Then you can crop the image so all the edges match.

How to make an animated image. I had no idea how EASY this was!!

This will load all your pictures into one file as different layers. Drag and drop them into the correct order. The first picture in your animation will be on the bottom.

How to make an animated image. I had no idea how EASY this was!!

Now click on Window > Animation. (In Photoshop CS6, this is called Timeline)

How to make an animated image. I had no idea how EASY this was!!

That will bring up this timeline. Click on the menu button in the top right corner.

How to make an animated image. I had no idea how EASY this was!!

Click Convert to Frame Animation.

How to make an animated image. I had no idea how EASY this was!!

Now you’ll see your photos in a timeline. Click the play button to try it out, it already works! :) If your images are not in the right order, you can also change them from this screen as well.

Note: If you only see one thumbnail, click the menu button in the top right corner again. Choose Make Frames From Layers. If your photos are in the wrong order, you can also choose Reverse Frames to quickly reverse them all into the correct order. Thank you to Amanda (another Amanda! :)) for this tip!

From here, you can change how long you want each image to display. You can select them all to change them all at the same time so you don’t have to change them one by one. To select all, click on the first image, hold down the SHIFT button, then click on the last image. Then click the down arrow underneath the first image to change the time for all the images.


How to make an animated image. I had no idea how EASY this was!!

You can have the image display for a half second, one second, etc, or you can put in your own custom time. I’m using 0.77 seconds here because I felt like 0.5 second was too short, but 1 second was too long.

How to make an animated image. I had no idea how EASY this was!!

Click Play again to make sure you love it, and when you’re happy, go to File > Save for Web & Devices.

How to make an animated image. I had no idea how EASY this was!!

Save as a GIF and make sure down at the bottom under Looping Options, you choose Forever if you want it to keep playing over and over.

How to make an animated image. I had no idea how EASY this was!!

THAT’S IT!!! Seriously so simple and fun right?? :)

Have fun making animations!! Can’t wait to see what you come up with!! :)

Maybe I should do a Miley or Howie catching a frisbee animation next… :)

 

P.S. Want the recipe?

It’s the Kevin and Amanda Ultimate Brownie!

Email this to someoneTweet about this on TwitterShare on FacebookPin on PinterestShare on StumbleUponShare on Yummly