How To Make An Animated GIF In Photoshop - 2014 Style

By on May 26, 2016 in Tutorials
How To Make An Animated GIF In Photoshop - 2014 Style

Hello There! Angie here from Angie Makes. With the New Year right around the corner I thought it would be fun to go over how to make some festive Happy New Years- 2014 animated GIF images. Here's the end product we'll be making.

Untitled-1SaveThese GIFs are fun, can liven up your blog posts, and are pretty easy to make with Photoshop's animation panel and a few handy Creative Market resources.

Let's dive in.

1. You'll need Photoshop for the task. Fire it up and create a new document. For this project, I am sizing the document to my blog post width since... this is important... GIFs lose their animation capabilities when they are resized when uploaded for web. Thus, if you upload your image to Wordpress, it's imperative to make sure the full-width size is selected and used to retain the happy animations we create. Thus, it is important to get the sizing right from the start.

Untitled-1Save

2. Scour Creative Market for your favorite fonts and design resources for the project. I had an idea of what I wanted to make from the get-go so I searched for "Confetti" and came across these beauties. Girly. Fun. Only $5. SOLD!

1387603163315Save

And then I needed the perfect girly font to match (also just $5. Winning!) I chose this one from On the Spot Studio. Have you seen Tiffany's stuff. Cute overload over there. Check it.

1387604388539Save

And because who doesn't love a paintely texture? I'll use these for a little watercolory goodness.

1387606789319Save

3. And now is where the fun begins. I start building out the image as I want it to look in its final stage all the while envisioning what parts of the image that I want to make animated. Here's what I came up with in all its girly glory. Boys, don't hate. I was even holding back on adding more pink, hearts, and unicorns. It was hard.
Untitled-1Save

5. Now the magic. Go to Window > Animation. It should look like this. If your panel is not in frame view, click where you see the yellow arrow. I find frame view easier to work with.

Untitled-1Save

Now here's the thing about the animation panel. You can toggle your layers Photoshop layers on and off to animate things. So what I want to do is make some of my star layers hidden (First yellow arrow below. Visibility is turned off.) I have placed these stars on different layers for this purpose. I will then go to the animation panel and click the little paper pad icon to duplicate selected frames. This will create our first frame that we will use to toggle the visibility of some of our stars on.

Untitled-1Save

Now. Choose what stars you want to appear and turn their visibility on. I've chosen the a star or two at the top of the page.

6. I repeat this process toggling the visibilty of more stars on with each new animation frame that I create, adjusting their position until I get the effect I want. As I am doing this, I am playing the animation from the beginning to see a preview of what it will look like by hitting the play button. You have the option to adjust the speed of the transition as well. I wanted mine to be relatively fast so I set it to .02 seconds. You can also set your image to play once or loop forever. I chose to loop mine forever.

Untitled-1Save

Untitled-1Save

Untitled-2Save

7. After you get your frames animated and looking the way you like, go to File > Save For Web And Devices. Choose Gif. Then, upload to your blog, inserting the full width image to retain animation qualities and viola. Your mom and friends will be VERY impressed.

Untitled-2Save

Untitled-2Save

Here's to wishing everyone a very happy 2014!

Untitled-1Save

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

6 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →