A complete walkthrough for you to create an amazing GIF! – WAU

Do you know how to create a GIF? We show you step by step how to produce this super dynamic content!

Creating a gif is a skill that can be performed in a very simple way currently, given the different possibilities and software available on the market. You can work with Adobe Photoshop or even a mobile application.

In case you don’t know, GIF is an image format that can be found in a fixed form or in an animated form, in infinite loop or not.

On the internet they are used on a large scale in their animated form, after all that was what they were created for.

The interesting thing about GIFs is that, when animated, they create an illusion of movement by displaying a sequence of images or frames for a certain period.

how to create a gif

“Le voyage dans la Lune” (1902)

GIF, an acronym for Graphics Interchange Format (Graphics Interchange Format), is a bitmap image format that uses 8-bit colors.

It uses LZW compression, which is a lossless compression method, leaving areas of solid colors very sharp while preserving details.

But not everything is flowers colors: as the files GIF are limited to 256 colors, optimizing an original 24-bit image as an 8-bit GIF can subtract colors and damage the original image.

Another interesting aspect is that GIFs support transparency in the image, in addition to being accepted in practically all browsers (Google Chrome, Mozilla Firefox, Microsoft Edge, among others).

GIF in your marketing strategy

You may be wondering why to use this tool / strategy in marketing. Well, GIFs are easy to understand and load faster than videos.

They are a great way to attract the attention of your user, encouraging him to share or click on elements that previously went unnoticed on certain pages.

Here’s an example:

how to create a gif

In the following tutorial you will learn how to create and export a gif. You can use the same step by step to create a banner, a moving button, a CTA (Call to Action) or even a meme.

Come on?

Download this post by entering your email below

Powered by WAU Convert

How to create a GIF in Photoshop

In this tutorial we will use Adobe Photoshop Creative Cloud 2015, however, you can use this program from the CS3 version.

Adobe Photoshop CC

Step 1 – Importing / creating the content

If you have not yet created an art, open Photoshop and go to File> New … (File> New), or press Ctrl + N. Set the basic settings of your image to Width, Height, Resolution (72 pixels / inches is essential for the web).

Document created, insert the elements of your composition and do not forget: each layer of the file can be animated in a different way.

Jump to the Step 2 of this tutorial.


If you have a sequence of images that produces movement, open Photoshop and go to File> Scripts> Load Files into Stack (File> Scripts> Load Files into Stack).

click in Search for… (Browse…) and locate the video or photos you want to use. Select all files and click Open (Open).

click in OK to import the photos in just one file. Note that the time for opening the files may be longer, as Photoshop will create a Layer for each image. These layers will become the frames of your GIF.

Jump to the Step 2 of this tutorial.

how to create a gif

how to create a gif


If you have a video you want to convert to GIF you will need to convert the video frames to individual layers. Open Photoshop and go to File> Import> Video Frames for Layers … (File> Import> Video Frames to Layers …).

Locate and select the video file and click Open.

click in OK to convert the frames into a single layered file.

how to create a gif

In newer versions of Photoshop you can limit the video upload, speeding up the import process. In the options in the import window you can limit the number of frames to be inserted.

You can import the entire video or choose only a part of it. You can also limit the frame range.

Step 2 – Opening the Photoshop Timeline

Go in Window> Timeline (Window> Timeline) to open the animation panel.

how to create a gif

At this point you have two options: Create video timeline (Create Video Timeline) or Create animation frame (Create Frame Animation).

how to create a gif

When we are dealing with a more generic edition, it is interesting to use the Create video timeline. When we need a frame-by-frame animation, it’s interesting to use the Create animation frame.

Step 3 – Converting layers to animated frames

Click on the Options button in the upper right corner of your Timeline and select Create Frames from Layers (Make Frames From Layers). This action will convert all layers into single frames.

how to create a gif

Click the button with a Play or press the space bar on your keyboard to view the animation.

how to create a gif

Step 4 – Defining the GIF loop

In your Timeline panel, select the option Ever (Forever) to enable the infinite loop in your GIF (this setting is only for previewing your GIF. Before saving, remember to activate in the export panel).

how to create a gif

Again, click on the button with a Play or press the space bar on your keyboard if you want to view the animation.

how to create a gif

Step 5 – Exporting in .gif format

All ready? Go to File> Export> Save to the Web (legacy) … (File> Export> Save for Web (Legacy) …).

In the window that opens, select the Preset GIF 128 With Dithering (GIF 128 Dithered). Choice 256 in the menu Colors (Colors) to ensure better quality.

Choose the Image size according to your need and don’t forget to select Forever (Forever) in Looping options.

click in Preview … to see how your GIF will behave in browsers.

click in To save… (Save …) and select the folder where your file will be saved.
Ready! Your animated GIF is ready to be published.

how to create a gif

how to create a gif

How to publish a GIF on the internet

There are many options for publishing a GIF. Here, we will deal with two ways.

If you have a website, you can host the GIF from your FTP or, if you use CMSs like WordPress, you can host it from your admin panel.

If you prefer to host GIF only on a social network, it may be interesting to use the site Giphy.com.

This site has the largest collection of GIFs in the world and your art could not be left out. The upload is completely free and Giphy releases a url for you to show the world in seconds.

How to put a GIF on Facebook

To publish a GIF to your timeline, simply paste the file url next to your text. Remember that this url will always end in .gif, right ?!

If the url is working, Facebook will automatically detect that it is a GIF and will make it ready to be released.

As soon as the GIF thumbnail appears, you can delete the previously pasted url to make your post more visually appealing.

It is also possible to publish GIFs on Twitter, Pinterest and, of course, on the favorite social network of animated images: o Tumblr.

How to convert a video to GIF

Just want to convert a finished video and you have no time to do the entire Photoshop process?

You can access the website Ezgif or the Make a GIF, upload your file in MP4, WebM, AVI, FLV, 3GP, OGV, MOV or M4V format.

When the upload is finished, each site will show, in its own way, a way to export the image.

You can crop, resize, select a section, set the frame rate, among others.

How to convert a YouTube video to GIF

To convert any YouTube video to GIF just insert the word “gif” at the beginning of the video’s URL.

For example, if the link is https://www.youtube.com/watch?v=8dmg1d3F3Bc, leave it like this: https: // www.gifyoutube.com/watch?v=8dmg1d3F3Bc. Easy, isn’t it ?!

Doing this, you will be redirected to a video editor in which you can select the stretch that will become GIF.

Example of Gif from Peçanha

In this GIF for example, we selected a piece of a video from Peçanha and added some effects.

As you can see, this tool leaves a watermark on top of your video. You can withdraw it using another GIF editing site or subscribe to a Gifs.com plan.

How to create a gif using your phone

There are some applications like GIF Pro, O Gifs it’s the Gif Me! that collaborate for the production of GIFs on mobile platforms, such as Android and iOS. All of these are still quite precarious compared to Photoshop, however they can help in everyday multimedia production.

Below, we list the main apps that can help you simulate a GIF on your phone or tablet.

Boomerang (Android and iOS)

Instagram recently launched the Boomerang app, which simulates how GIFs work in your videos, creating an infinite loop system.

With it you can make minivideos using the front and rear cameras. There is only one button!

The application takes 10 photos and joins them, speeds up the video and displays the images in a loop back and forth.

Share your videos on Facebook and Instagram directly from the app or share them later on the camera roll.

Remembering that Boomerang creates videos, that is, when saving on your phone you will have the MP4 format only. There is no need to register or open an account to start capturing images.

Giphy (Android and iOS)

Giphy is the largest GIF site in the world and, through all this expertise, created a series of applications that facilitate the use of its materials on mobile platforms. Finding that old meme was super easy.

Giphy

Check out all the Giphy apps on official site.


Did you like the content? Learn even more about visual content for marketing with the Video Marketing ebook:
Video Marketing
If you have any questions, leave them in the comments and we will clarify them as soon as possible.