Make a GIF
We acknowledge Aboriginal and Torres Strait Islander peoples and their continuing connection to land and as custodians of stories for millennia. We respectfully acknowledge the land on which we all meet today, and pay our respects to elders past, present and emerging.
This a basic introduction to GIF making that can be interchanged depending on software choice.
- Basic image editing
- Understanding basic frame animation
- Image based File formats
What is a GIF
Making our GIF
The basic concept of making a GIF is having a still image with animated/moving parts. We can use a variety of software to make a GIF and some of these include;
- Photoshop - requires an account
- GIMP - free and open source software (download)
- Pixlr - free option for web https://pixlr.com/
You will need to have a base image for your GIF and that is usually the starting point for your design. Once you have the base image chosen, think about how you can add simple animations to make it come alive!
We have chosen to use one of the State Library of Queensland collection items, a cover of the Queenslander magazine. It's a nice clean image of a cat with a butterfly and our end goal is to animate the butterfly and the eyes of the cat.
There are two ways you can go about starting your GIF, if you have an image already, once you open Photoshop you can just head to the file menu and 'Open' the image.
Or if you would like to set up specific dimensions for your image, create a new file with the dimensions you'd like to use and import into Photoshop via File>Place embedded.
Select the Butterfly in the image using Photoshop's Object Selection Tool (included with the magic wand tools), this should just choose the butterfly and will have the 'marching ants' guide around the selected area.
Choose to 'copy' and 'cut' the butterfly selection and then you want to paste in place on a new layer, so go to File>Paste Special>Paste in place
We do need to fill the blank space where we cut out the butterfly, we can use the 'Clone' tool to paint with the same colour/texture closest to the blank space.
Now that you have your butterfly and cats pupil's on separate layers, you can create your frame animation using these. You should have two layers - the Queenslander cover image with cat and the butterfly.
Make sure you have the 'Timeline' window open, which should default to displaying at the bottom of the workspace.
Click on the 'Create Frame animation'
One you have created frame animation it will automatically show one frame with any visible layers highlighted.
Now to make your animation, create a new frame with the plus symbol in the timeline.
With the second frame selected, move your butterfly slightly to a new spot. Now press play and see your two frames in action!
The default timing between the frames is usually set to 0.1 seconds but you can select all your frames and adjust this when you've added as many frames as you think will make your animation look good. Add new frames with the plus symbol and keep moving your butterfly around in new spots, you can test the play function any time to see how it looks.
We used 7 frames and kept at 0.1 seconds and added some eye movement as well for our final gif.
Step 4 - Exporting
Once our frames are finalised we need to export as a GIF. Head to the File menu and select Export>Save for Web
The default should be set to a GIF in the export screen and you can view the playback, adjust the size and optimize in this screen, but you can also just keep the default settings and hit save!
And you're done, congrats on your new GIF making skills.