Introduction: How to Make Animated Gifs About Pizza

About: I used to work for instructables.com, now I just make stuff. // follow me to see what I'm up to: https://www.echoechostudio.com

If you spend any time in the Instructables Community Forums >> Community Blog, would see that a while ago I started talking about the art I make to celebrate the ordering of pizza at the Instructables HQ on Thursdays. I have affectionately called it "Pizza Thursdays"

Pizza Thursdays was initiated by Randofo's deep desire to keep his office companions happy and fed, and has evolved into a reason for me to make the most ridiculous gifs ever. Each image is lovingly crafted for about 15 minutes, then mailed out to the entire office as soon as the pizza delivery person arrives.

Pizza Thursdays also lives on tumblr

In the following Instructable, I will go over some of the principles of Pizza Thursday gif-making, and encourage you to experiment with your own creative instincts. 

Step 1: Google Image Search and Photoshop

The two things you will absolutely need to make pizza art is Adobe Photoshop, and internet access.

I carefully consider concept before I begin my image search, carefully selecting my qualifiers. Sure Searching for "Cat" is great, but when you visualize a cat in your pizza art - what kind of cat is it? A tabby? A kitten? Does it have thumbs? The same consideration should be applied for the kind of pizza you are wanting to display or animate.

For this instructable, I am going make a gif with just a few frames - we will heavily utilize Photoshop the animation window, and it's options. To find this dialogue box in Photoshop, go to the "Window" drop down menu, and select "Animation". Then begin a new .PSD file.




Step 2: Building Your Foundation

After carefully considering my source material, I copy and paste it all into one photoshop document. You'll see I used a cat, and a nice round pizza. Each image is a separate layer.

I selected images that were easy to photoshop out negative space with the Magic Wand tool (Keystroke "W") and then the delete key.  I then added a background layer, making sure it was all the way at the bottom on the layer tab.

Using the transform controls on each layer (Command +T) , I scaled both the Pizza and the Cat to be more suitable for my pizza-art-vision.

At this point, I am still establishing a my first frame - forseeing the motion I want to integrate into the following frames.

With additional photoshop wizardry, I was able to make another cat layer with it's arm in a different position. I did this by duplicating the cat layer (Command + J), and then warping it with the transform tools (Command + T > right click > warp)


Step 3: Adding Frames

So your image is a roughly organized composition. Let's shift our focus to using the Animation Bar - Make sure you are in the frame-by-frame viewer of the Animation Bar (the toggle is in the bottom right corner in the box), and then add a new frame to your animation. To do so there is a button that I point out in the images step.

I made seven frames total.  Then toggle the visibility and position of pizza and cat. You can push the play button  on the the Animation bar to preview what you have.

Selecting one frame at a time, you are able to toggle the visibility of which layers you would like to show in a frame from the layers tab, and reposition the image in the frame with the Transform tool. To easily move the pizza, select your layer from the Layers Tab, and then push Command+T.

Be sure that when you are selecting a different frame, that you drag your animations a little bit with each frame. View my example in the images. I shrunk down the pizza, and moved the image of the pizza back and forth between it's paws.

It's still pretty boring until we add.....

Step 4: LAZERS!!!!!111!!11!

Every Cat needs lasers.  I use the Pen Tool in Photoshop (Keystroke "P") to add lasers coming out of their eyes. Here is a cute but sad video involving fainting cats and lasers.


(They fall over because of a genetic disorder, that will eventually end in their death :-( sad.)

With the Pen Tool, and all frames selected, I begin to make green laser beam triangles. By doing this we are making shape layers. I set them behind the pizza, but in front of my subject. To close your shapes, go back to your origin point with the pen tool and click it shut.

To make the lasers transparent, I change the shapes' blending option. From the layers tab, set the Blending option for your laser beams from "Normal" to "Pin Light", and shift the opacity down a bit. Then using the effects window (double click the layer) give it an outer glow. I used a nice toxic yellow.

I encourage you to consider the timing of your lasers in your animation - they should be a special treat for your audience. Like the delivery of any good joke - timing is critical.

Step 5: Timing and Exporting.

From the Animaton Bar, I have this gif set to loop forever, at 0 seconds per frame. 0 seconds per frame means that each frame is visible for less than a tenth of a second, and will cycle through very quickly. If you click on either of those things you can change the setting to any frequency and number playback loops.

To save the animation and make it ready for it's internet debut, go to the File menu, then select "Save for Web and Devices. From there, I selected the GIF-128 Dithered preset from this dialogue box, and saved it to my desired location.

Step 6: Publish!

Start a blog, or add your pizza art to my collection in the forum here on Instructables. I will send gifts to the first five people who post their own pizza gifs in the comment thread of this instructable.

Cheers!
Audrey

Pizza Contest

Participated in the
Pizza Contest