How to Make an Animated GIF in Photoshop [Step by Step]

How to Make an Animated GIF in Photoshop [Step by Step]

How to make a GIF

1- Upload your images to Photoshop.
2- Open up the Timeline window.
3- In the Timeline window, Click "Create Frame Animation.
4- "Create a replacement layer for every new frame.
5- Open an equivalent menu icon on the proper , and choose "Make Frames From Layers.
6- "Under each frame, select how long it should appear for before switching to subsequent frame.
7- At rock bottom of the toolbar, select what percentage times you want it to loop.
8- Preview your GIF by pressing the play icon.
9- Save and Export Your GIF.

If you've spent any time on the web in the least , you've probably are available contact with an animated GIF. It's a picture file that permits you to feature animated images, which makes it appear to be the image is moving. consider them as a hybrid between a still image and a video.

Why are GIFs great additions to your marketing? They're easy to consume, provide a replacement thanks to capture your viewers' attention, and may have a significant emotional impact.

And since content that creates us feel something encourages us to share, these tiny animations are worth experimenting with.

The best part about GIFs is that they are not too hard to form . If you've got access to Photoshop and a couple of minutes to spare, you'll create an animated GIF in no time.

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

How to Create an Animated GIF in Photoshop

Here's an example of an animated GIF you would possibly make using this tutorial:

Alright, let's start .

Step 1: Upload your images to Photoshop.

If you have already got images created ...

Gather the pictures you would like during a separate folder. To upload them into Photoshop, click File > Scripts > Load Files Into Stack.

Then, select Browse, and choose which files you want to use in your GIF. Then, click OK.

Photoshop will then create a separate layer for every image you've selected. Once you've done that, skip to step two.

If you do not have already got the series of images created ...

Create each frame of the animated GIF as a special Photoshop layer. to feature a replacement layer, chose Layer > New > Layer.

Be sure to call your layers so you'll keep track of them easily once you make your GIF. to call a layer, attend the Layer panel on rock bottom right of your screen, double-click on the default layer name, and sort within the name you would like to vary it to. Press Enter when you're finished.

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

Pro Tip: If you would like to mix layers in order that they appear during a single frame your GIF, turn visibility on for the layers you would like to merge (by clicking on the "eye" to the left of every layer name so only the eyes for the layers you would like to merge are open).

Next, press Shift + Command + Option + E (Mac) or Shift + Ctrl + Alt + E (Windows). Photoshop will create a replacement layer containing the merged content, which you ought to also rename.

Step 2: Open up the Timeline window.

To open Timeline, attend the highest navigation, choose Window > Timeline. The Timeline will allow you to turn different layers on and off for various periods of your time , thereby turning your static image into a GIF.

The Timeline window will appear at rock bottom of your screen. Here's what it's like:

Step 3: within the Timeline window, click "Create Frame Animation."

If it isn't automatically selected, choose it from the dropdown menu -- on the other hand make certain to truly click it, otherwise the frame animation options won't show up.

Now, your Timeline should look something like this:

Step 4: Create a replacement layer for every new frame.

To do this, first select all of your layers by getting to the highest navigation menu and selecting Select > All Layers.

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

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

Step 5: Open an equivalent menu icon on the proper , and choose "Make Frames From Layers."

This will make each layer a frame of your GIF.

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

To do this, click the time below each frame and choose how long you want it to seem . In our case, we chose 0.5 seconds per frame.

Step 7: At rock bottom of the toolbar, select what percentage times you want it to loop.

The default will say Once, but you'll loop it as repeatedly as you would like , including Forever. Click Other if you want to specify a custom number of repetitions. 

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

Step 9: Save and Export Your GIF

Satisfied together with your GIF? reserve it to use online by getting to the highest navigation bar and clicking File > Export > but Web (Legacy)...

Next, choose the sort of GIF file you want to save lots of it as under the Preset dropdown. If you've got a GIF with gradients, choose Dithered GIFs to stop color banding. If your image employs tons of solid colors, you'll choose no dither. 

The number next to the GIF file determines how large (and how precise) the GIF colors are going to be compared to the first JPEGs or PNGs.

Consistent with Adobe, a better dithering percentage translates to the looks of more colors and detail -- but it increases the file size. 

Click Save at rock bottom to save lots of the file to your computer. Now you're able to upload this GIF to use in your marketing! 

Upload the GIF file into anywhere online that you'd put a picture , and it should play seamlessly. Here's what the ultimate product might look like:

How to Use GIFs in Your Marketing

1# On social media.

Pinterest was the primary 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 sport with Boomerang, which lets users film and share their own GIFs. On any of those social feeds, animated GIFs are often an excellent thanks to stand call at a crowded feed.

For example, inspect how Product Hunt used a GIF to market a forum on its website:

2# In your emails.

Animated GIFs display in email an equivalent way a daily image does. So why not spruce up your email marketing by replacing still images with animated ones?

Not only could this help capture recipients' attention with novelty alone, but it could even have an immediate impact on your bottom line.

For a few brands, including an animated GIF in emails correlated with the maximum amount as a 109% increase in revenue.

 Using HubSpot’s free email marketing software is a simple thanks to accomplish this sort of increase on your own site.

Make use of GIFs by showcasing products, making event announcements, or otherwise enticing readers. inspect the GIF below from women’s clothing shop Ann Taylor LOFT: They made a gift appear as if it's shaking to make intrigue and obtain recipients to click through to "unwrap" their gift.

Source: Litmus

3) In blog posts.

Your blog post doesn't need to be about animated GIFs or structured sort of a BuzzFeed-style listicle to incorporate GIFs -- although, we do love an honest dose of silly listicle GIFs every once during a while.

For example, here's an easy , animated GIF created by fellow marketer Ginny Mineo to elucidate the definition of a call-to-action for a blog post:

And finally, one among our oldie-but-goodie favorites: an animated GIF from a post on office kitchen recipes.

Source: Websites
D. Med

Don't forget to share this post!