HOW TO MAKE A GIF
By Fervent & Anna
Revisions by Cymette & Luxor
In this guide, you will learn how to make an animated gif using two very popular image editing programs, namely Photoshop and GIMP. An animated GIF is a great way to attract a viewer’s attention and help create a story. We will only be covering simple steps / Basic Foundation on how to make and save a GIF, The rest comes from your imagination!
[ Free trial of Photoshop CS6 ] - Just scroll down to the arrow that says "Photoshop CS6, Photoshop CS6 Extended," and download the file in your preferred language and preferred operating system. ( FYI: the first file ( File 1 of 2 ) for windows users is fine. You do not have to download the second file ( file 2 of 2 ) for it to function.)
[ GIMP (FREE) ]
[ What is a gif? ]
GIFs are popular for its low file size and for the looping animation it provides. GIFs are restricted to only 256 colors and should only be used selectively. The GIF format can be used to showcase a short video clip, artwork animation, or a series of still images that are on a repetitive loop.
[ How to make a .gif in Photoshop ]
The “Timeline” tool in Photoshop is the magic behind creating GIFs in Photoshop. There are many different ways to create a GIF but for this particular guide we will be creating one from a series of still images using frame animation. This is the easiest and quickest way to create a GIF .
(Adobe Photoshop CS6 is being used for the guide, but this method should work for Photoshop CS2 and above.)
Step 1: You will need to make a new document with your still images. You can do this two ways:
Have all your images in a folder, then in Photoshop, click File > Scripts > Load Files into Stack. Click on Browse > Look for the folder > Select all images > Select “ok”.
A new document will open with all the images you have selected as individual layers.
OR Make a new document by going to File > New > Set your desired settings > Hit “ok.”
A blank canvas will open up and you can manually drag the images into the blank document.
Step 2: Arrange your images in the order you want the gif to start. The order should be from the bottom up, meaning your first frame should be the layer on the bottom. If you need to edit the images, you can do so at this stage before continuing. Remember, each frame of the animation should be its own individual layer.
Step 3: After arranging your images, you will be preparing for the animation. To open up the Timeline panel, you will go to Windows > Click on ‘Timeline’ > Click on “Create Frame Animation”. (If you are using CS5 or lower, it will be Windows > Animation.)
Make sure it says "Create Frame Animation" in the middle of the Timeline panel:
A new panel will open up at the bottom of the Photoshop document:
Step 4: You will need to make a frame for each layer. To do this automatically click on the the arrow in the right-hand corner > “Make Frames from Layers”.
After doing so, the frames and layers should be set up and ready to go.
To do it manually, make sure to hide all the layers except for the bottom one (layer 1). Click on the page icon (before the trash can) and a new frame will open up. Click on the eye to unhide the next layer and repeat this until you have all the layers in individual frames.
Step 5: Use the menu underneath the frames to set the duration you would like each frame to run. If you want the gif to be on an endless loop, make sure to select “Forever”.
Step 6: Click the the play button and you should see the animation! It should look something like this:
If you want a smoother transition between the still images, please continue reading the following steps. If you don’t want to know more, skip ahead to learn how to export the gif.
Step 7: This step will help you create a smoother animation for the GIFs. We will be using the tool provided by Photoshop called Tweening. This tool automatically generates transitional frames between two existing frames.
Select the first frame then click on the Tween button on the toolbar at the bottom of the Timeline panel. A box will open up, make sure to set Tween With: Next Frame.
“Frames To Add” is how many transitional frames you would like between each images. The higher the number is, the smoother it will be but it will also make it slower. For this guide, we will be using 3 frames.
Make sure the rest of the settings are set up similar to below and select “ok” when you’re done.
Repeat the steps above for all the layers you have. When you get the last frame, set Tween to the First Frame. This helps create a smooth transition back to the beginning of the gif.
Press the play button and you should get something like this:
[ How to export a .gif in Photoshop ]
Before you export the gif, make sure to save the project as a .psd. This will save all the layers and animation so you can revisit later and edit it if you need to.
Step 1: Go to File > Save for Web, and a window will open. Make sure to select “GIF” if it wasn’t already selected.
Step 2: Before clicking save, you might want to play around with the settings to ensure you’re getting the best quality of your GIFS. We will briefly go over the settings and what they are used for.
The following information will go over the Optimization settings for a GIF file, you can skip ahead to Step 3 if you would like to use the default settings.
Lossy (GIF only) - Reduces file size by selectively discarding data. A higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy option can reduce file size by 5% to 40%.
Note: You cannot use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.
Color Reduction Method and Colors - Specifies a method for generating the color lookup table and the number of colors you want in the color table. You can select one of the following color reduction methods:
Perceptual - Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
Selective - Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of web colors. This color table usually produces images with the greatest color integrity. Selective is the default option.
Adaptive - Creates a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
Restrictive (Web) - Uses the standard 216‑color color table common to the Windows and Mac OS 8‑bit (256‑color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8‑bit color. Using the web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
Custom - Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG‑8 file, it will have a custom color palette.
Dithering Method and Dither - Dithering refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid colors may work well with no dither. Images with continuous-tone color (especially color gradients) may require dithering to prevent color banding.
You can select one of the following dithering methods:
Diffusion - Applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels.
Pattern - Applies a halftone-like square pattern to simulate any colors not in the color table.
Noise - Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.
Transparency and Matte - Determines how transparent pixels in the image are optimized.
To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper Color (to use the color in the eyedropper sample box), Foreground Color, Background Color, White, Black, or Other (to use the color picker).
Transparency Dithering - When the Transparency option is selected, you can choose a method for dithering partially transparent pixels:
No Transparency Dither applies no dither to partially transparent pixels in the image.
Diffusion Transparency Dither applies a random pattern that is usually less noticeable than Pattern dither. The dither effects are diffused across adjacent pixels. If you select this algorithm, specify a Dither percentage to control the amount of dithering that is applied to the image.
Pattern Transparency Dither applies a halftone-like square pattern to partially transparent pixels.
Noise Transparency Dither applies a random pattern similar to the Diffusion algorithm, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise algorithm.
Interlace - Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress. However, interlacing also increases file size.
Web Snap - Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors from dithering in a browser). A higher value shifts more colors.
Information provided by: [ Web graphics optimization options By Adobe ]
Image Quality Settings:
One of the most complicated settings in saving a gif is the Quality drop down menu. The choices are Nearest Neighbor, Bilinear, Bicubic, Bicubic Smoother, or Bicubic Sharper. Each of these reflects a different method of pixel interpolation.
Unfortunately, there is no best solution for every image and Photoshop isn’t smart enough to decide which mode is best for a given image. By default, Bicubic is selected. This is generally good enough for most beginners and is in fact the most complex method. However, if you really want to learn to maximize your output, check out the brief explanations of the pros and cons of each method below.
Nearest Neighbor: This setting is the most basic interpolation mode and seeks to preserve the hard edges in an image by simply enlarging or reducing the pixel data as mentioned above. This may be good if your image doesn’t contain many gradients but will produce an over-aliased, pixelated image if you are significantly changing the size.
Bilinear: Slightly more intelligent than Nearest Neighbor and uses a weighted average of the 4 nearest pixels to increase the number of pixels. This method produces an anti-aliasing effect which eliminates harsh pixelated edges but can produce a blurry image as a result.
Bicubic: Bicubic is the most complicated method and samples from the nearest 16 pixels. As with bilinear, this method results in anti-aliasing to keep out any unwanted artifacts.
Information provided by: [ Saving Images For The Web By WebpageFX ]
Always keep these settings in mind when exporting gifs within the Save for Web window. Remember to play around with the settings and preview the gif before exporting. Each gif will be different and may not all have the same settings.
Step 3: For this particular guide, we will just use the default settings Photoshop provided to export the gif.
The “Save for Web” window should look similar to this image:
You may click the “Preview” button to preview your gif in a web browser. If you are happy with the results > click save and congratulations on making your gif!
This is the end result:
[ How to make a .gif in GIMP ]
Making animated images in GIMP is a very simple process and can be done in just a few short steps. There are several different methods of doing this, but this method is likely one of the easiest options.
For GIMP, each layer is going to be a different frame of your animation. Please keep that in mind when proceeding.
Here we have a set of images that were previously made. Be sure that they are in the order you would like them to appear in, Frame 1 being the first one and Frame 3 being the last. Making them into animated image can be done simply.
Step 1: Begin with selecting File > Export As.
We need to check save “as animation” for it to save in a .gif format.
“Loop forever” means that the .gif will loop back and repeat itself. If you want the animation to play multiple times, then select this option.
"Delay between frames where unspecified" means that any layer you have not set up to have a specific time lapse will be played at the speed you place here.
"Use delay entered above for all frames" means that all frames will be played at the speed you typed in previously. This must be checked in order for the GIF to play at the correct speed.
"Use disposal entered above for all frames" refers to how layers are animated. GIMP has only two options; a layer being replaced by the next layer, or the layers piling up on top of each other. In this tutorial, we have the layers replacing each other.
Another way of animating frames is to rename the layer with the number of millisecond delay you would like in GIMP prior to exporting. This would show as "Frame 1 (333ms)." When you are satisfied with how your layers are set up, select File > Export As and then check the “as animation” option.
.png)