Find out how to Make an Animated GIF in Photoshop [Tutorial]

Animated GIFs are nice additions to your advertising and marketing. They’re simple to eat, present a brand new method to seize your viewers’ consideration, and might have a severe emotional impression.

One of the best half about GIFs is that they aren’t too hard to make. When you’ve got entry to Photoshop and some minutes to spare, you possibly can create an animated GIF very quickly.

Within the following tutorial on making animated GIFs, I am utilizing the Artistic Cloud 2015 model of Photoshop, however the steps must be comparable in different variations.

Find out how to Create an Animated GIF in Photoshop

Should you already know the way to create a GIF, skip to the part on how to use GIFs in your marketing materials. 

This is an instance of an animated GIF you may make utilizing this tutorial:

Alright, let’s get began.

Step 1: Add your photographs to Photoshop.

If you have already got photographs created …

Collect the photographs you need in a separate folder. To add them into Photoshop, click on File > Scripts > Load Recordsdata Into Stack.

Then, choose Browse, and select which recordsdata you would like to make use of in your GIF. Then, click on OK.

Photoshop will then create a separate layer for every picture you’ve got chosen. As soon as you’ve got carried out that, skip to step two.

Should you do not have already got the sequence of photographs created …

Create every body of the animated GIF as a unique Photoshop layer. So as to add a brand new layer, selected Layer > New > Layer.

Be sure you title your layers so you possibly can preserve monitor of them simply once you make your GIF. To call a layer, go to the Layer panel on the underside proper of your display, double-click on the default layer title, and kind within the title you wish to change it to. Press Enter once you’re completed.

After getting your layers in there and you’ve got named all of them, you are prepared for step two.

Professional Tip: If you wish to mix layers so they seem in a single body in your GIF, flip visibility on for the layers you wish to merge (by clicking on the “eye” to the left of every layer title so solely the eyes for the layers you wish to merge are open). Subsequent, press Shift + Command + Possibility + E (Mac) or Shift + Ctrl + Alt + E (Home windows). Photoshop will create a brand new layer containing the merged content material, which you also needs to rename.

Step 2: Open up the Timeline window.

To open Timeline, go to the highest navigation, select Window > Timeline. The Timeline will allow you to flip totally different layers on and off for various durations of time, thereby turning your static picture right into a GIF.

The Timeline window will seem on the backside of your display. This is what it appears to be like like:

Step 3: Within the Timeline window, click on “Create Body Animation.”

If it is not routinely chosen, select it from the dropdown menu — however then make sure to really click on it, in any other case the body animation choices will not present up.

Now, your Timeline ought to look one thing like this:

Step 4: Create a brand new layer for every new body.

To do that, first choose all of your layers by going to the highest navigation menu and selecting Choose > All Layers.

Then, click on the menu icon on the suitable of the Timeline display.

From the dropdown menu that seems, select Create new layer for every new body.

Step 5: Open the identical menu icon on the suitable, and select “Make Frames From Layers.”

This can make every layer a body of your GIF.

Step 6: Beneath every body, choose how lengthy it ought to seem for earlier than switching to the subsequent body.

To do that, click on the time under every body and select how lengthy you’d prefer it to seem. In our case, we selected 0.5 seconds per body.

Step 7: On the backside of the toolbar, choose what number of instances you’d prefer it to loop.

The default will say As soon as, however you possibly can loop it as many instances as you need, together with Endlessly. Click on Different if you would like to specify a customized variety of repetitions. 

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

Step 9: Save and Export Your GIF

Glad along with your GIF? Put it aside to make use of on-line by going to the highest navigation bar and clicking File > Export > Save for Internet (Legacy)…

Subsequent, select the kind of GIF file you would like to reserve it as underneath the Preset dropdown. When you’ve got a GIF with gradients, select Dithered GIFs to stop shade banding. In case your picture employs a variety of strong colours, you could go for no dither. 

The quantity subsequent to the GIF file determines how massive (and the way exact) the GIF colours might be in comparison with the unique JPEGs or PNGs. According to Adobe, a better dithering share interprets to the look of extra colours and element — however it will increase the file dimension. 

Click on Save on the backside to avoid wasting the file to your laptop. Now you are able to add this GIF to make use of in your advertising and marketing!

Add the GIF file into anyplace on-line that you simply’d put a picture, and it ought to play seamlessly. This is what the ultimate product may seem like:

Find out how to Use GIFs in Your Marketing

1. On social media.

Pinterest was the primary to allow animated GIFs, adopted by Twitter. And by the summer time of 2015, Fb had additionally jumped on the GIF bandwagon. Then, Instagram modified the sport with Boomerang, which lets customers movie and share their very own GIFs. On any of those social feeds, animated GIFs will be an effective way to face out in a crowded feed.

For instance, try how Calm used a GIF of a coronary heart drawing on this quote from Samuel Beckett so as to add animation to an in any other case text-heavy Instagram put up: 

2. In your emails.

Animated GIFs show in e-mail the identical method an everyday picture does. So why not spruce up your email marketing by changing nonetheless photographs with animated ones?

Not solely may this assist seize recipients’ consideration with novelty alone, but it surely may even have a direct impression in your backside line.

For some manufacturers, including an animated GIF in emails correlated with as a lot as a 109% improve in income. Utilizing HubSpot’s free email marketing software is a simple method to accomplish such a improve by yourself web site.

Make use of GIFs by showcasing merchandise, making occasion bulletins, or in any other case engaging readers. Try the GIF under from The Hustle, which showcases varied prizes e-mail subscribers can win by referring the Hustle to mates: 

3. On web sites and weblog posts.

Lastly, take into account the facility of utilizing GIFs on webpages to attract a viewer’s consideration to a selected space, or have interaction a viewer in an in any other case text-heavy put up.

Check out how Bloomberg makes use of stick determine animated GIFs in this article on the Beijing Winter Olympic Video games:

Now that you’ve got discovered the way to make a GIF, think about using your newfound data so as to add animations to your web site or portfolio.

If you do not have one, check out The 12 Best Graphic Design Portfolios We’ve Ever Seen, & How to Start Your Own. 

Editor’s Be aware: This put up was initially printed in September 2013 and has been up to date for freshness, accuracy, and comprehensiveness.