-
Download and install the GNU Image Manipulation Program (GIMP) and an essential plugin called the GIMP Animation Package (GAP). Together, these can be used to give you all sorts of options for editing videos and GIFs in GIMP.
[hide]I'm not well versed with Photoshop, but I've heard that GIMP is a very powerful free alternative that is nearly as good. It takes some learning, but the program is actually a lot of fun to use if you are interested in this kind of thing.[/hide]
-
Obtain a copy of the GIF you would like to make into your avatar.
[hide]Right click, "Save image as…"
It's originally about 874kB in file size.[/hide]
-
Open the GIF in GIMP.
[hide]Immediately when the file opens, check what GIMP says about it in the window title. Since I saved the file as "Ray_Original.gif", my GIMP window is titled:
[Ray_Original] (imported)-9.0 (Indexed color, 118 layers) 500x269 - GIMP
The only really important thing to notice here is that the original GIF was encoded using an indexed color scheme at a resolution of 500x269 pixels. Color indexing is typically (always?) used because it attempts to build the video out of as few colors as possible in order to minimize the file size. Of course, you shouldn't do this too much, otherwise the quality of the video is noticeably degraded. We'll get into this a little more later.
Also notice that you can only currently see the last frame. This is because each frame of the GIF is given its own separate layer, which you can see in the Layers dialog window.
We will ultimately be shooting for a GIF with a resolution of less than or equal to 150x150 pixels and a total file size of under 97.7kB.[/hide]
-
Convert the GIF to either Grayscale or RGB mode as appropriate.
[hide]Simply use the drop-down menu at the top of the window to select Image/Mode/Grayscale or /RGB. We want to do this because many of the image manipulation tools in GIMP will not work on an indexed color scheme. When we are done with all of our editing, we will convert the GIF back to an indexed color scheme to compress our file size as much as we want.
Because this GIF doesn't have much (any?) color, I converted it to Grayscale.[/hide]
-
If necessary, increase the contrast of the GIF.
[hide]As we convert to lower resolution, we will be blurring out the original GIF. Because blurring can decrease contrast and make faint details even fainter, we're going to want to edit the original video so that it has a little more contrast. I think that the best option here is to use the Levels tool.
Using the Layers dialog window, hide the layers at the top of the list one at a time and you can start to see the GIF play back in reverse. Do this until you've found a nice representative frame. In this case, I think that frame 86 looks pretty typical:
Make sure you've left clicked to select the frame you're currently seeing in the Layers dialog window. Using the drop-down menu again, go to Colors/Levels… and the Levels window should pop up. Here's how I used this tool to give the GIF more contrast:
This tool shows you a graph called a histogram that helps you see how the color values of the pixels in the GIF are distributed. The black lines in the graph are taller when there are more pixels with the color directly below that line.
First, I increased the minimum pixel level by 20 color values, from 0 to 20. This will make the black pixels in the GIF a little blacker, and should do wonders to get rid of the unnecessary graininess in the black background of the video. It will hopefully be a big help in reducing the overall detail of every frame.
Next, I decreased the maximum pixel level by 45 color values, from 255 to 210. This will make the white pixels in the GIF a little whiter, and will hopefully have a similar effect as the previous step.
Last, I greatly increased the Gamma from 1.00 to 2.25. This was in an attempt to put the little gray triangle under the histogram about half way along the pixel distribution. We'd like the middle of the distribution to be about where the 50% gray color is used.
Leave the output levels where they are, at 0 and 255, respectively. If you've made it so that frame 86 is visible and applied this Color Level filter as I have suggested, then here's what you should see (back to back with the original frame 86 so you can see the difference):
Now, here comes the tricky part. You don't want to apply this filter to frame 86 alone. So if you made this edit, quickly undo (Ctrl-Z) it, or cancel out of the Levels window. We're now going to apply this exact same filter to all of the frames in the GIF.
Use the drop down menu to select Filters/Filter all Layers… This option will only be available if you have correctly installed GAP (see step 1). In the window that pops up, scroll down to find and select the "plug-in-wr-color-levels" filter and click the "Apply Constant" button. Simply apply the same color levels filter that I've already described above and click "OK":
Hit "Continue" on the next pop up, and after a bit of time the filter will be applied to every layer/frame in the GIF. If you want to see the result of this change, then export the edited video as a new GIF via File/Export as… Save the file as a GIF and give it a new name. In the next window, make sure you have checked the "As animation" box and then click "Export".
Following this process reduced the size of the original GIF from 874kB to 424kB for me.
Here's what the result looks like, back to back with the original:
[/hide]
-
Crop the GIF so that it is square shaped.
[hide]From here on out, it's a lot easier. Crop your GIF so that it is square using the crop tool. I cut it down to a size of 269x269 pixels starting from a position of x=125 and y=0.
Now the file size is only 291kB. Making progress…[/hide]
-
Scale the GIF.
[hide]To get down to a maximum of 150x150 pixels in resolution, we'll need to take two steps. First, we'll blur the image slightly, then we'll scale the image to a slightly lower resolution. We can repeat this process as necessary until we are at the final resolution that we want.
Once again, use Filters/Filter all Layers… This time, however, use the "plug-in-blur" filter and hit "Apply Constant". Hit "Continue", and a simple blurring effect will have been applied to all of the frames in the video. This helps to get rid of artifacts we might see when scaling down the video.
Now, use the drop-down menu to select Image/Scale Image… I recommend not to scale the image down by anything more than a factor of 3 since the simple blur tool that we use is not quite strong enough for anything else. Since our current resolution is 269x269 pixels, and we would like to shoot for 150x150 pixels, we are only scaling down by a factor of about 1.8, so we should be fine with only one down-scale of the image. Fill out the next window this way, and click "Scale":
If we were to save the GIF now, it would have a size of only 211kB. Coming right along.[/hide]
-
Compress the GIF by converting back to an indexed color scheme.
[hide]To get the rest of the way towards our file size goal, we'll need to find a way to further reduce the detail in each frame. The simplest (but probably not always the best) way to do this is to just go back to an indexed color scheme.
From the drop-down menu, select Image/Mode/Indexed… In the next window, you're going to want to reduce the maximum number of indexed colors from 255 to a MUCH smaller number. Without changing anything else, hit "Convert", and your GIF will be reconstructed from a maximum of that number of different colors. For this particular GIF, I found that the optimal number of color indices to use with a resolution of 150x150 pixels was only 16.[/hide]
-
Export (Save) the final product as a new GIF.
[hide]This final step is the most important and will help you figure out where you might (1) have gone wrong, or (2) need to do some more work. If you've picked a sufficiently small number for the maximum number of color indices to use in the previous step, then your avatar's file size will be under 97.7kB. If it is a lot smaller than this file size, you might want to try to increase the maximum number of indices to see if this improves the video quality without exceeding the 97.7kB limit.
From the drop-down menu, select File/Export As… Save the file as a GIF, and on the next window, be sure to check the box next to "As animation" before clicking on the "Export" button.
This one ended up having a file size of about 93.8kB[/hide]
-
Enjoy your new GIF avatar!
[/hide]
