How to Build an Animated GIF in Photoshop[ Tutorial]

how-to-make-animated-gif-photoshop-1.jpg

If you’ve spent any time on the internet at all, you’ve likely come in contact with an animated GIF. It’s an image file that enables you feature animated images, which constructs it seem like the image is moving. Think of them as a hybrid between a still image and a video.

Why are GIFs great additions to your marketing? They’re easy to eat, offer a new route to capture your viewers’ attention, and can have a serious emotional impact. And since content that makes us feel something encourages us to share, these tiny animations are worth experimenting with.

The best part about GIFs is that they aren’t too hard to induce. If you have access to Photoshop and a few minutes to spare, you can create an animated GIF in no time.

In the following tutorial on making animated GIFs, I’m utilizing the Creative Cloud 2015 version of Photoshop, but the steps should be similar in other versions.

P.S. – Download these free visual content templates to help you generate more engaging social media images .

How to Generate an Animated GIF in Photoshop

Here’s an example of an animated GIF you might stimulate utilizing this tutorial 😛 TAGEND

Alright, let’s get started.

Step 1: Upload your images to Photoshop.

If you already have images generated …

Gather the images you want in a separate folder. To upload them into Photoshop, click File > Scripts > Load Files Into Stack .

Then, select Browse , and opt which files you’d like to use in your GIF. Then, click OK .

Photoshop will then create a separate layer for each image you’ve selected. Once you’ve said and done, skip to step two.

If you don’t already have the series of images created …

Create each frame of the animated GIF as a different Photoshop layer. To add a new layer, preferred Layer > New > Layer .

Be sure to name your layers so you can keep track of them easily when you make your GIF. To name a layer, go to the Layer panel on the bottom right of your screen, double-click on the default layer name, and type in the name you want to change it to. Press Enter when you’re finished.

Once you have your layers in there and you’ve named them all, you’re ready for step two.

Pro Tip : If you want to combine layers so they appear in a single frame in your GIF, turn visibility on for the layers you want to merge( by clicking on the “eye” to the left of each layer name so merely the eyes for the layers you want to merge are open ). Next, press Shift+ Command+ Option+ E( Mac ) or Shift+ Ctrl+ Alt+ E( Windows ). Photoshop will create a new layer containing the merged content, which you should also rename.

Step 2: Open up the Timeline window.

To open Timeline, go to the top navigation, prefer Window> Timeline . The Timeline will let you turn different layers on and off for different periods of time, thereby turning your static image into a GIF.

The Timeline window will appear at the bottom of your screen. Here’s what it looks like 😛 TAGEND

Step 3: In the Timeline window, click “Create Frame Animation.”

If it’s not automatically selected, choose it from the dropdown menu — but then be sure to actually click it, otherwise the frame animation alternatives won’t show up.

Now, your Timeline should look something like this 😛 TAGEND

Step 4: Create a new layer for each new frame.

To do this, first select all your layers by going to the top navigation menu and choosing Select > All Layers .

Then, click the menu icon on the right of the Timeline screen.

From the dropdown menu that appears, choose Create new layer for each new frame .

Step 5: Open the same menu icon on the right, and opt “Make Frames From Layers.”

This will induce each layer a frame of your GIF.

Step 6: Under each frame, select how long it should appear for before switching to the next frame.

To do this, click the time below each frame and select how long you’d like it to appear. In our lawsuit, we chose 0.5 seconds per frame.

Step 7: At the bottom of the toolbar, select how many times you’d like it to loop.

The default will say Once , but you are able to loop-the-loop it as many times as you want, including Forever . Click Other if you’d like to specify a custom number of repeatings.

Step 8: Preview your GIF by pressing the play icon.

Step 9: Save and Export Your GIF

Satisfied with your GIF? Save it to use online by going to the top navigation bar and clicking File > Export > Save for Web( Legacy )…

Next, prefer the type of GIF file you’d like to save it as under the Preset dropdown. If you have a GIF with gradients, opt Dithered GIFs to avoid color banding. If your image utilizes a lot of solid colourings, you are able opt for no dither.

The number next to the GIF file determines how big( and how precise) the GIF colors will be compared to the original JPEGs or PNGs. According to Adobe, a higher dithering percentage translates to the appearance of more colorings and detail — but it increases the file size.

Click Save at the bottom to save the file to your computer. Now you’re ready to upload this GIF to use in your marketing!

Upload the GIF file into any place online that you’d set an image, and it is appropriate to play seamlessly. Here’s what the final product might look like 😛 TAGEND


How to Use GIFs in Your Marketing

1) On social media.

Pinterest was the first to enable animated GIFs, followed by Twitter. And by the summer of 2015, Facebook had also jumped on the GIF bandwagon. Then, Instagram changed the game with Boomerang, which lets users film and share their own GIFs. On any of these social feeds, animated GIFs can be a great way to stand out in a crowded feed.

For example, check out how Product Hunt employed a GIF to promote a forum on its website 😛 TAGEND

2) In your emails.

Animated GIFs display in email the same way a regular image does. So why not spruce up your emails by replacing still images with animated ones?

Not merely could this help capture recipients’ attention with novelty alone, but it could also have a direct impact on your bottom line. For some brands, including an animated GIF in emails correlated with as much as a 109% increased number of revenue.

Make use of GIFs by showcasing products, inducing event announcements, or otherwise seducing readers. Check out the GIF below from womenas clothing store Ann Taylor LOFT: They made a present look like it’s shaking to create intrigue and get recipients to click through to “unwrap” their gift.

Source: Litmus

3) In blog posts.

Your blog post doesn’t have to be about animated GIFs or structured like a BuzzFeed-style listicle to include GIFs — although, we do love a good dose of silly listicle GIFs every once in a while.

For example, here’s a simple, animated GIF created by fellow marketer Ginny Mineo to explain the definition of a call-to-action for a blog post 😛 TAGEND

And ultimately, one of our oldie-but-goodie favourites: an animated GIF from a post on office kitchen recipes.

How will you use GIFs in your marketing? Share with us in specific comments .

Editor’s Note: This post was originally published in September 2013 and has been updated for freshness, accuracy, and comprehensiveness .

Read more: blog.hubspot.com

Leave a Reply

Your email address will not be published. Required fields are marked *