How to create an animated GIF image

The web has changed significantly. Loading flash has become obsolete and does not work for search engine ranking. A smarter way to use animations is to use an animated image. This can be achieved in Photoshop and in this article, we will look at how to get this done.


Further reading:

A Guide on How to Design Your Website By Yourself

A Guide to Website Traffic Optimization

16 Mistakes That Turn People Away From Your Website


What is a GIF

There is the saying that iIf a picture is worth a thousand words, a GIF is worth 10,000

But what exactly is GIF? GIF stand for Graphics Interchange Format, and it was born before the popular explosion of video. In fact, the GIF is probably the lead to the development of Web 2.0 video. The GIF tells a story more than a static image ever could - it is literally a series of timed images patched together, invented by photographer Eduard Muybridge in 1878. It was eventually developed for the web in 1987 by CompuServe.

Also read:

Basic Tips and Tricks That Can Boost The Speed of Your Website

Best Slider Plugins for WordPress Websites

Build Your Website With The Right Tool

As internet speeds increased, streaming became popular with dominance of channels like YouTube. GIFs got cool again. They were recycled and reborn in new ways, as users realized the advantage of easy-to-use content over long-form videos.

They were also perfect for getting your point across or to explain your feelings in a fun, ironic way.

So why should you bring them into your campaigns?

Also read: Image Optimization for the Web

Why Use GIF?

Sites with GIFs look better than those without; people stay on your page longer and are more likely to browse your site. A site that is noteworthy impresses potential customers and clients so they are more likely to buy. In the past, companies in business for long periods of time were seen as safe and trustworthy, today they are seen as antiquated and out of touch sites with eye-popping images are seen as modern and trendy. And today modern and trendy are seen as more trustworthy, giving you more sales.

Also read: Build Your Website With The Right Tool

How to Create: an Animated GIF in Photoshop

Follow the process with a step by step approach:

Step 1: Import your images to Photoshop.

To upload your image into Photoshop, you need to create and keep all the images you want to use in a separate folder, 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.

Also read: 20 Ways You Can Reduce Your Website Bounce Rate

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, then you are 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 not forget to 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 your GIF to use online.

Once you are 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 YOUR GIF image file into the location or folder you desire and put them into use.

Comments (0)

Leave a comment

Powered by Simple Blog