# data[].attributes.body
1. Pick a design from the freepik.com (EPS format)

2. Animate the design with the specifications listed below

3. Save the animated GIF and upload it to your respective class columns

# data[].attributes.attachment_link.title
How To Make Animated GIFs with Photoshop and Illustrator [2021 Tutorial]

# data[].attributes.attachment_link.readable_text
Animated GIFs are great additions to your marketing. They're easy to consume, provide a new way to capture your viewers' attention, and can have a serious emotional impact.

The best part about GIFs is that they aren't too hard to make. 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 using the Creative Cloud 2015 version of Photoshop, but the steps should be similar in other versions.

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 new layer for each new frame.

5. Open the same menu icon on the right, and choose "Make Frames From Layers."

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

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

8. Preview your GIF by pressing the play icon.

9. Save and Export Your GIF.

How to Create an Animated GIF in Photoshop

If you already know how to create a GIF, skip to the section on how to use GIFs in your marketing materials.

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

Alright, let's get started.

Step 1: Upload your images to Photoshop.

If you already have images created ...

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 choose 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 done that, 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, chose 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 only 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, choose 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:

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 options won't show up.

Now, your Timeline should look something like this:

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 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 the next frame.

To do this, click the time below each frame and choose how long you'd like it to appear. In our case, 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 can loop it as many times as you want, including Forever. Click Other if you'd like 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 with your GIF? Save it to use online by going to the top navigation bar and clicking File > Export > Save for Web (Legacy)...

Next, choose the type of GIF file you'd like to save it as under the Preset dropdown. If you have a GIF with gradients, choose Dithered GIFs to prevent color banding. If your image employs a lot of solid colors, you may opt for no dither.

The number next to the GIF file determines how large (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 colors 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 put an image, and it should play seamlessly. Here's what the final product might look like:

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 Calm used a GIF of a heart drawing in this quote from Samuel Beckett to add animation to an otherwise text-heavy Instagram post:

2. In your emails.

Animated GIFs display in email the same way a regular 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 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% increase in revenue. Using HubSpot's free email marketing software is an easy way to accomplish this type of increase on your own site.

Make use of GIFs by showcasing products, making event announcements, or otherwise enticing readers. Check out the GIF below from The Hustle, which showcases various prizes email subscribers can win by referring the Hustle to friends:

3. On websites and blog posts.

Finally, consider the power of using GIFs on webpages to draw a viewer's attention to a specific area, or engage a viewer in an otherwise text-heavy post.

Take a look at how Bloomberg uses stick figure animated GIFs in this article on the Beijing Winter Olympic Games:

Now that you've learned how to make a GIF, consider using your newfound knowledge to add animations to your website or portfolio.

If you don't have one, take a look at The 12 Best Graphic Design Portfolios We've Ever Seen, & How to Start Your Own.

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

# data[].attributes.attachment_link.title
How to Make an Animated GIF in Photoshop [Tutorial]

# data[].attributes.attachment_link.description
Learn how to create a GIF in Photoshop that you can use to enhance your next social media post, email, or blog article.

# data[].attributes.attachment_link.title
Photoshop Animations for Instagram Stories: How To Use Tween

# data[].attributes.headline
Advanced Tips: Movement + Tweening + Reverse + Looping

# data[].attributes.subject
Advanced Tips: Movement + Tweening + Reverse + Looping

# data[].attributes.attachment_link.title
V2 Photoshop Animation Movement, Tweening and Reverse Frames

# data[].attributes.attachment_link.readable_text
Are you on the hunt for some inspiration to build your next email? You couldn't have found a better place to start.

Join me on a five-minute reading journey as I present you 15 animated GIF examples and break down the steps of the creation process.

You can (and you will) start creating an animated GIF for your email today, as soon as you finish reading this article. Believe me.

A GIF Can Make Your Email Look Less Stiff

Email marketing has been around for over 30 years, and it's here to stay. However, if we want to stay on top, we need to continually improve our emails and find ways to surprise our contacts.

As marketers, we want our sales emails to stand out in the inbox, engage the customers, and motivate them to take specific actions like filling a form, buying a product, or attending an event.

There are many ways of looking at improving our company emails. One of them is including badass content. Impressive visuals that invite people on a journey to our websites through the simple click of a mouse. Let me tell you a secret: using GIFs in email marketing can help you get attention, engagement, and conversions.

Here's a brief list of the benefits a small thing as a GIF in email marketing can bring to your company:

GIFs work on any device.

They have increased reader engagement.

GIFs are supported by all major email clients.

They provide higher email click-through rates.

GIFs make emails look more professional, which in turn increases your customers' trust.

15 Examples of Animated GIFs in Email Marketing

If you're wondering how to make an animated GIF, here's a list of animated GIF examples I've put together for you. You'll find a detailed explanation of the process for each GIF so that you can better understand how it's done and help you create one for yourself as soon as you finish reading this post.

Here's a step by step video on how to create an animated GIF for your email marketing campaigns with Creatopy:

1. Chewy's cute little kitty moving its whiskers in delight

Chewy, an online pet food store, sent a sales email to promote their 4 most popular cat food brands. In it, they featured this sweet animated GIF. So touching! As a cat owner, I can testify: watching a cat's facial expressions is heart-melting. So, good job, Chewy, for finding this great insight!

If you'd like to create a similar GIF to surprise your customers, here's how:

1. Create a beautiful visual with your main object/person/animal. Create additional features (whiskers, hands, pieces of clothes, etc.) that you can use as moving parts to make it look alive.

2. Duplicate this slide and just change the position of the whiskers/hands/legs/clothes.

3. Play and download in GIF or MP4 format. That's it.

2. Netflix's email announcement for the upcoming season of House of Cards

Netflix's emails can be as cool as their movies. Here's a brilliant GIF announcing the next season of their popular series, House of Cards.

Can you feel the chills running down your spine when Francis Underwood looks you in the eyes? What on Earth is he up to this time?!

How to create a similar GIF:

1. Create a YouTube account (in case you don't already have one) and upload the video you want to use for your email GIF. Make sure the video has no more than 10-15 seconds.

2. Create a Creatopy account (in case you don't already have one) and click on "Create."

3. Picture your GIF already in your email. This will help you to decide which format size you'd like to use. You can go for a header GIF banner (728 x 90), a rectangle (336 x 280), or a large rectangle format (1200 x 900).

4. After you choose the size, click on Elements > Widgets > YouTube video. Then, click on the Settings icon, and add the YouTube's video URL in the box.

5. Pull and stretch your video to fit your banner size or adjust it.

6. Add a shape over the video if you want to hide a part of it and to create a beautiful background for your logo and text.

7. Add your logo.

8. Add some text. If you want to create the same kind of animations Netflix used for their GIF, add two or three textboxes and organize them to fade in and fade out at different timings. Thanks to Creatopy's Timeline, you can easily set your texts chronologically and create animation effects like fade in, fade out, blow, bounce, roll down, roll up, etc.

9. After you're done, you can download the file in GIF format. Choose the high-quality option to make sure it looks as good as possible.

10. And you're done.

3. MailChimp's automation feature promo email

MailChimp found a suggestive way to present its new automation feature to its customers: a GIF made of moving shapes that build the word "Automation," letter by letter. If you feel intimidated already, don't. You, too, can create a cute GIF like this.

1. Create your first slide and add your logo and your first shape. Add an animation effect to the shape.

2. Duplicate the slide and add one more shape (different than the first one, different color) and its animation.

3. Duplicate the second slide and add another shape with a different animation.

4. Duplicate the third slide and add a new shape and an animation effect for it. Make sure you combine different shapes.

5. Duplicate the slides and add shapes until you finish building a word.

4. Creatopy's Timeline feature promo email

When we launched the Timeline feature, we thought it would be nice to show people how it works before they tried it out for themselves in the Creatopy editor. So we made this GIF.

You can make a GIF like this one by recording 10-20 seconds of a scene you choose and then just save it as a GIF.

5. Loft's flash sale

This original GIF makes our eyes roll in wonder. Ka-Ching. Ka-Ching. Ka-Ching.

Here's how to create a similar GIF:

1. Design the main layout, add three rectangular shapes, and put three objects inside each rectangle. Animate your objects using the slide up effect.

2. Duplicate the slide, delete the three objects, and add three other objects. Then slide them up.

3. Duplicate the slide again, delete the objects you've added to the second slide, and add three new objects. Animate these as well, sliding them up.

4. Play and download once you're happy with the results.

6. Bigfish.tv's email invitation to the company's party

When we think of parties, we think of music, dance, lots of people and fun. And alcohol.. (but that's just between you and me). This is exactly the insight behind Bigfish.tv's creative process.

They wanted to introduce people into the atmosphere of the party right from the moment they clicked the email. So they came up with this animated GIF, using flashing splashes of color and small little people dancing their hearts out.

And a lady looking forward to the event, of course. You can tell she cannot wait for the party to happen by the way she blinks. Blink. Cannot wait. Blink.

How to create a similar GIF:

1. Create your main layout.

2. Duplicate your slide and add a splash of color. Let's say the color is pink. Then add an animation effect. Go for a fade or a soft blur.

3. Duplicate the slide, delete the splash, and add a new one. Choose white as a color. Choose your animation effect.

4. Duplicate the slide, delete the splash, and small blue dots. Don't forget to choose your animation effect.

5. Now how do you make the people dance? Go back to each slide and add the people. Start with the first one. Add the people with their hands down.

6. Go to the second slide, delete the people, and add new ones with their hands above their shoulders.

7. Go to the third slide, delete the people again, and add new figurines with their hands up.

8. Play and download.

7. Mountain Khakis' Memorial Day sale

I've got more animated GIF examples for you, so grab an ice tea and hang in there with me. This clothing brand for mountain lovers found a simple but effective way to communicate their Memorial Day discount. Learn how you can create a similar GIF below:

1. Create your first slide, add your text.

2. Duplicate the slide, delete the text, and add new words.

3. Play and download. That's it.

8. Halloween Newsletter from Last Craft Designs

Time for a spooky GIF. But first, I must warn you: this one is so easy to create you'll be outraged.

How to make a GIF following this model:

1. Create your visual and add your text. Choose grey as the primary text color.

2. Duplicate the slide and change the color of the first word from grey to orange.

3. Duplicate the slide, change the color of the first word back to grey, and the color of the second word to red.

4. Duplicate the slide, change the color of the second word back to grey. Both words (first and second) should be grey at this time. Change the color of the third word to white.

5. Play and download.

9. Sittercity's astronaut GIF ad

Sittercity, an online babysitter booking agency in the US, sent this cute GIF to their customers to emphasize how hard it is for parents to find a babysitter for their children. No problem, here, Houston! We've found our way!

How to create a cute GIF like this:

1. Create your visual, add all the elements of the composition.

2. Duplicate the slide. Change the position of the main characters in the story. Add some additional elements like stars, clouds, and animate them using the fade-in effect.

3. Play and download.

10. Design a Glow's promo email for a USB design box

Less is more. Here's an example of a minimum design effort and a great result.

Create one for yourself:

1. Take pictures of your objects in various positions. If you want to follow this example, that is to take an object out of a box, take photos of the object at different stages when you take it out of the box, and put it on the table.

2. Create a slide for each picture.

3. Add text on whichever slide you want.

4. Play and download.

Animated GIFs Created in Creatopy:

And now, I'd like you to have a look at these animated GIF examples created in Creatopy.

By the way, did I tell you that we now have the GIPHY Widget integration? This means that you can use any element from the GIPHY library in your designs, and edit it just like you would with a video.

11. Clothes promotion

Here's an adorable four frame GIF banner that instantly grabs your attention and transports you to the pink world of women's clothes promotions.

What makes this banner so special is the animation created with Creatopy's Magic Animator tool. See how the gifts pop up in the third frame?

12. EVO TV

A TV provider in Croatia created this GIF to send their customers an exclusive offer email. I love the way the popcorn pops and dances all around.

This kind of GIF is so easy to create! They used 3 different pictures of the popcorn and animated them to dance, spreading the popcorn all over the layout. Kind of inviting, isn't it? I suddenly feel the urge to watch a good movie.

13. Wedding invitations

You can even create an animated email to invite your friends and family to your wedding. Everyone will be surprised! Here's an example: 4 animated frames, flowers blooming all around, and a short text with the event's details.

14. NGO motivational emails

Or if you're an NGO concerned about the health of the people living in big cities, you can send out a motivational animated email on Picnic Day. Using Creatopy's templates, ready-made elements, and animation effects, you can create a stunning GIF like this one below.

15. Tourism emails

The possibilities to create an animated GIF with Creatopy are endless. Look at this one, for example. There are only 2 frames, but the animated text and sliding effects make it totally memorable. Wouldn't you agree?

Create a State-of-the-Art GIF in Minutes with Creatopy

If you feel inspired by these 15 animated GIF examples and would like to go ahead and make a creative GIF for your next email marketing campaign, you can create a free account with Creatopy and start designing your custom GIF right now.

You can choose your preferred size format, upload your pictures, or choose one from our vast stock database. Also, you can add your logo and products and use animation effects to make them come alive. Before you start, you may want to learn about the technical details of an animated GIF.

So, read on about the ideal size, how to insert a GIF in an email, and check out the list of email clients that support GIFs.

What's the Ideal Size of GIFs in Emails?

Animated GIF sizes can get quite large if there are too many frames. The more frames you add, the bigger the file gets. For email, it's better to refrain yourself and stick with 4 to 5 frames. Don't worry, you can create awesome GIFs even with 2 frames!

While the ideal size of a GIF for email marketing is 400 kb, you can aim to keep it under 1MB.

What's bigger than 1MB will either have a hard time uploading, or the email will be blocked by the mail client.

Keep in mind that people check their mail on their phones too, so keep it as small as possible!

How to Insert a GIF into an Email

After you have optimized your GIF, you'll want to include it in your email. This is easy. You can add your GIF in the email just the way you would upload an image, because after all, GIF is only another image file.

Email Client Support

Animated GIFs work well in all major webmail, desktop, and mobile clients with a few exceptions. The exceptions are Microsoft Outlook 2007, 2010, and 2013.

Here's the entire list of email clients:

I hope you've found enough inspiration here to get started with animated GIFs.

For more tips and information on how to create unique visuals for your promotional campaigns, keep an eye on our blog. We've got freshly served blog posts every week.

# data[].attributes.attachment_link.title
15 Animated GIF Examples For Email Marketing Inspiration

# data[].attributes.attachment_link.description
Are you on the hunt for some inspiration to build your next email? You couldn't have found a better place to start. Join me on a five-minute reading journey as I present you 15 animated GIF examples and break down the steps of the creation process.

# data[].attributes.body
Dimensions: 800px x 600px
Resolution: 72 dpi
Loop: Forever
Timing: 15 secs (Max)
Save: Export > Save for Web (Legacy)
Format: GIF (256 colour)

# data[].attributes.body
Upload animated GIF here...

# data[].attributes.body
Upload animated GIF here...

# data[].attributes.body
Upload animated GIF here...

# data[].attributes.body
Just in case we weren't supposed to use realistic images

# data[].attributes.headline
Carey Ann Ng 220172D (video timeline version)

# data[].attributes.subject
Carey Ann Ng 220172D (video timeline version)

# data[].attributes.headline
Carey Ann Ng Shi Yin 220172D (frame animation version)

# data[].attributes.subject
Carey Ann Ng Shi Yin 220172D (frame animation version)

# data[].attributes.body
running in circles