Tech, Tutorials

Design your own GIFs with your favorite photos

The GIF format consists of one or many frames, as a set of images, to be able to generate an animation, although it is also valid for static images. We see them on social networks, forums or messaging applications and we are used to saving and sending them, but not all of us know how to create an animated image and it is much simpler than we can imagine.

This format was created with the intention of generating animations for websites and applications, although it only has a palette of 256 colors (8 bit). Each color in that palette has a value range of 16.8 million colors, but only a maximum of 256 colors can appear in an animated image in this format. However, one of its advantages is that compress images without loss of quality.

Create GIFs from Photoshop

The graphic editor par excellence allows us create GIFs relatively easily, following the steps that we indicate is very simple and fast. As is usual, there are several ways to create an animated image, we are going to show the one that we consider to be the simplest.

Choose the images

First we will save in a folder the images that we are going to use to create our design. It is important that they have the same proportions so that the frame is correct. In addition, if we are going to use images about an object, a person or a specific element, we will ensure that it is centered or that it is arranged in the same or very similar position in all the images.

Regarding the properties and attributes of each frame we should not worry because once we have opened them in Photoshop we will be able to configure all the aspects related to the image so that they all have the same lighting, saturation, etc.

Create a GIF step by step

To create an animated file with Photoshop we will have to follow these steps, it is possible that the menus or the names of the sections may vary depending on the version of Photoshop you are using.

Once Photoshop is open we will go to Files / Scripts / Load files to stack …

Click on To explore… and we select the images that will compose our design, once added we click on OKAY. As many layers will have been created as images we had selected.
We are going to Window / Timeline to display it at the bottom of the screen.
In the Timeline we open the drop-down in the central part and choose Create frame animation. We will see how the first Frame of our creation appears.

In the right part of the timeline we will click on the menu icon with three horizontal stripes and we will choose Create templates from layers.

So already we have created the design structure, it is almost ready to be saved.

GIF settings and export

Before exporting it, we will review some parameters to finish designing our project. Below each box we have a drop down With the time that we want to assign it, we can make tests with different options and pressing the button play to check the previous result.

In the bottom menu of the timeline we will see the dropdown Infinite, we can modify it so that it only loops a limited number of times.

To save it on our hard drive we just have to go to File / Export / Save for Web (Legacy). There we will modify the preset by choosing one of the options or we will choose the correct extension for our file and other parameters such as the dimensions of our final file or its location when we click on Keep…

Other computer programs

We can use other design tools like GIMP, which is also free, or LICEcap, probably the most basic and simple of all.

LICEcap

This program it’s a screen grabber, with the peculiarity that the content is not exported to video but to GIF format. We could also choose LICEcap file (LCF) as the destination file. When we open the program, it is available to Windows and macOS, we will see a transparent window, we will place it with the position and size we want on the content we want to capture, it can be a video that we are going to play or anything we want to do on the desktop.

We will press the button Record… from the lower right corner and configure the output file adjusting these parameters:

Name from the file
Location
Extension (GIF or LCF)
Show the qualification and the period of weather
Mark the clicks mouse
Repetitions in loop
Qualification to show at the beginning

Once we press the button Save LICEcap will start recording everything that happens within its window, we will control the recording with the buttons Pause and Stop.

GIMP

GIMP is a free graphic editor that is available for Windows, macOS and GNU / Linux. It is a very complete tool that allows us to do all kinds of edits and create our own designs, among other things. To design our own animated image we will do the following:

Once GIMP is open we will go to File / Open to add the first image.

To add the rest as layers we will go to File / Open as layer. Once we have all the images in layers we will make sure that they are in the correct order since they will be the frames of the document that we are going to create. If any image is larger than the rest, it will be cut so that all the frames are the same size.
We will press with the right click on each layer and we will select Edit layer attributes to set the time each frame is displayed.

To create a file that is not too heavy we will go to Filter / Animation / Optimize (for GIF).
Now we only have to save the file from File / Export … Here we will select the name, location and type of file.

Websites and online applications

There are several web applications for creating animated images. These kinds of tools are very useful and easy to handleFurthermore, it is not necessary to install anything on our computer.

Giphy Create

The tool for creating and uploading animated images of Giphy allows us to create animated images with our own designs as follows:

Click on Choose File to choose the files to include in the archive.

As it only lets us choose the first image, then we will click on + Add more images and we upload the rest with the button Browse Files.
We choose the duration of the frames with the selector and press Continue to Decorate.

We write the text we want and configure it with the type of source and the animation, click on Continue to Upload.
We indicate the source of the content, the creator, we add labels and select if we want the design to be public or private, press Upload to Giphy.
Once created we can save it on the hard drive, share it through social networks or a link or integrate it into a website.

Tenor GIF Maker

Tenor is another of the most popular directories of animated images. In fact, the files we are looking for on WhatsApp come from Tenor’s collection. To create an animated image we have a specific tool with which we will design our own animated images in this way:

We drag the files or choose them by pressing the Browse Desktop button.

We add the labels or tags that we want to each of the boxes (at least we have to add a tag to each image) and click Upload to Tenor.

Click on Download your GIFs.
From here you will have at your disposal all the images you have uploaded. Although they are uploaded independently and not as a video or an animated image.

IMG Flip GIF Maker

Possibly IMG Flip GIF Maker be the most complete web application since it is designed exclusively for this and is not part of an image bank. The process is very simple and allows you to adjust many parameters:

Click on Upload Images and we choose the images that will form our design.

We choose the configuration as the weather sample (Delay), the measures (Width and Height, width and height) and the adjustment of the dimensions in case there are images of different sizes.
We will click on the buttons Add text to GIF (add text), Crop (cut), Rotate (rotate), Add image (add image), Draw (draw) or we open the drop-down More Options for options like choosing the background color, rotating the image on the horizontal axis, and other options.
We choose a qualification (Title) and add labels (Tags).
We mark the NSFW option (not allowed for professional use) or Private if we wish.
To remove the watermark we would have to go through the checkout ($ 9.95 license for one month).
Finally we press the button Generate GIF to share it on social networks, WhatsApp, GMail or email, copy the link or directly download it to our computer.

From the phone

Photo editing applications are always very well received on smartphones. For create our own files We have several specific applications for this, of which we recommend these two, available both for Android as for iOS.

GIF Me! Camera – GIF Maker

GIF Me! It allows us to create files of animated images from different sources. When we open the application we will choose between recording an animation from the smartphone camera, importing photos from the gallery, importing Live Photo from the reel or importing videos. In addition, it is available for Android and ios.

Once we chose our images or frames when we import photos from the gallery we can edit it with different settings: brightness, color, image cropping, playback speed, add texts or stickers and rotate. We can also apply different filters that are shown at the bottom of the screen.

For save them we will only have to click on the icon Share in the upper right corner to save it in our gallery or share it by email or on Facebook, Twitter or Instagram.

GIF Toaster

GIF Toaster is another application specific to Android and ios to create our own designs from images, videos, Live Photos, panoramas or Time Lapses. As soon as we open the application, we will click on the central icon of the upper bar to choose the origin of the images and select them on the reel.

Click on the upper right corner arrow to go to the edit menu of each frame where we can adjust various parameters in the lower menu: layers, playback time, dimension adjustment, movement direction, filters, texts, cropping, image rotation and playback direction. When we have everything ready click again on the arrow in the upper right. We chose the size and we can save it on our device or share it by email, with the link on the clipboard or via social media.