Character GIFs

a GIF is just an animated image

In its simplest form, a GIF (pronounced “gif” or “jiff”) is just an image file. The GIF format can be used to make still images like the JPEG or PNG. But the GIF format can also be used to create animated images. They are “animated images” because GIFs aren’t really videos, as they can hold multiple pictures at once that load sequentially like a flipbook. Also GIFs don’t have sound.

CompuServe published the GIF format in 1987 and it wasn’t created for animations; that’s just how things worked out. It was last updated in 1989. GIF predates the World Wide Web by two years and it helped to define early GeoCities websites, MySpace pages, and email chains (have you seen the dancing baby?). Today it’s still a large part of internet culture.

Whilst you can use existing websites to create gifs we are going to show you how you can yourself using your own vector graphic in Gimp (or Photoshop)!

Part 1 in Inkscape

Step 1 - Make your Character

First step is to make your character as a vector graphic. You have probably already done this step but if not check out this page.

For example this is Chapahua a Gnoll professor of archaeology at a magic school. She does not conform to silly human beauty standards.

Inspiration and Background Research

Final Vector Graphic

Step 2 - Make several frames

You will need to make several frames for your animation. Pick something simple; rotate some limbs or other features; change a colour or expression; make a part get bigger/smaller etc.

First you want to group any shapes together (such as a whole arm) by selecting them all and then pressing Control + G. After that you can change the selection how you want, in this example the arm has been rotated it by clicking on the grouped object twice and moving the pivot to the point of rotation. If you wanted to make something bigger/smaller you can hold CTRL +ALT ? and it will resize from the center point.

Copy your image the number of times for the number of frames you want to have, and make changes to each.

Step 3 - Export frames as PNG

Select each of the frames and export them as PNGs.

With all the parts selected press Shift + Control + E and Export.

Make sure you are saving in your personal drive and name appropriately to help with order i.e. Chapahua1, Chapahua2, Chapahua3, Chapahua4

Part 2 in Gimp

Step 4 - Import frames into Gimp

In GIMP click File > Open as Layers and select all your frames you have exported as PNGs.

Step 5 - Arrange frames into GIMP layers

Your images are likely all over the place so the first thing is to move them so they are properly on top of each other. Use the move (M) tool to layer them up on top of each other. Next you want to make sure they are in the right order in layers so make sure your first frame is on the bottom and they go up in order.

Step 6 - Export layers as GIF

Finally we are going to export it.

Click File > Export then select .gif from the File Types.

You may then be asked if you want to crop and hit Crop.

Finally you will get the GIF settings here are the ones that worked for me.

and voilà

Student Showcase

Page updated

Google Sites

Report abuse