Creating Animated Gifs with Sarah Chan
/Sarah Chan teaches you how to make your own animated gifs, with or without Photoshop!
For this workshop, you will need :
- a computer
- Adobe Photoshop OR pen and paper
- digital camera (smartphone, DSLR, etc.)
Special note! We will be going through the steps first with the Photoshop tutorial, but if you don’t have Photoshop - have no fear! We will do step by step instructions for the hand drawn gifs right after!
MEET YOUR INSTRUCTOR
Sarah Chan is a video artist currently living in Philadelphia, PA. She studied at the University of Oregon where she received her BFA in Digital Art (2013) and at the University of California, Davis for her MFA in Art Studio (2016). Her work has been exhibited at Cinema Pacific’s Fringe Festival, Pure Surface #10 in Portland, Oregon, Tropical Lab 9: Island in Singapore, MUX: Asheville Video Art Festival, and was recently included in the group show, 'Something from Something Else,' at Outback Arthouse in Los Angeles. She enjoys going on field trips to photograph and film visual glitches, ephemeral omens, and other strange phenomena.
Step 1 : Photograph your subject matter
This should be a series of photographs to reference during your drawing and painting process. The most important part is that the reference section should have at least one section of movement built within it. Keep in mind the duration of the gif loop will be able one to two seconds — or even less. Aim for at least six images in rapid secession. Keep your camera as still as possible.
Step 2 (with Photoshop) : Import your images onto your computer
Put your images in a folder and make sure they are in order.
Step 3 (with Photoshop) : Open Photoshop and import your images
Go to File -> Scripts -> Load Files Into Stacks -> Browse. Use this pathway to find the images you want to use. Hold down the shift key to select all the files. Click Open. Click okay for it to open these as layers. Create layers on top of them and change opacity to 40%.
Step 4 (with Photoshop) : Paint it how you wish. Save often!
You can trace the layers to make sure they line up, but don’t feel constrained by the reference images. You can add in elements and take out things like the background or other distracting compositional elements.
Step 5 (with Photoshop) : Create your gif!
Go to Window in the menu bar -> timeline. This will open the timeline panel. Click the button on the middle of the timeline panel (in the middle of the bottom section). Select Create Frame Animation from the drop down there. Next, click the menu icon from the upper right corner of the timeline panel. Select Make Frames From Layers. Preview the animation by hitting play on the timeline panel. To be sure your animation repeats, be sure to chose “Forever” in the bottom left section.
Step 6 (with Photoshop) : Export your gif
Go to the menu bar to File -> Export -> Save for Web Legacy. When the window opens, select the gif 128 Dithered preset. If you are using the gif online, change the longest side to 500 pixels on the Image Size. For looping options, select forever. It all looks great! Hit save and choose where you want your gif to save to!
Step 2 (without Photoshop) : Print your images
Import your files onto your computer and then print the photographs. Be sure to print each frame. With your printed images, mark them with numbers so that they can stay in order. With your favorite art medium and tracing paper, begin tracing the images.
Step 3 (without Photoshop) : Scan your work
After you have traced and created your frames, you will scan them into your computer. If you don’t have a scanner, your phone’s camera will do and there are apps to make perfect scans of work on your phone. Make sure your scanned image frames are in order.
Step 4 (without Photoshop) : Create your gif!
Using an online resource such as GifMaker.me. Upload your artistic frames to the website. Change the canvas size and animation speed. You can save your gif by right clicking the gif preview.
You’ve done it now! You’ve stepped into the world of gif making and of beginner animations thanks to our talented friend Sarah Chan! You can find more of her work at https://sprucearts.com/blog/sarah-chan
