Note: This tutorial is for Adobe Photoshop CS3. It will work in Adobe Imageready CS and CS2 with a slightly different importing process.
This tutorial will create an animated GIF similar to:
Introduction
Before you attempt this tutorial, know that it is a midly difficult tutorial because specific instructions are lacking. Instead, it relies on your ingenuity and the ability to find problems and know how to fix them. Therefore, I would only recommend this tutorial for those somewhat familiar with Photoshop, and you will get lost if you don’t use Photoshop frequently. Second, because the result of this tutorial is a GIF in 256 colors, don’t be disappointed if the quality isn’t as good as you expected. Even though GIFs offer animation and transparency, it can only hold 256 colors, leading to inevitable loss in quality.
This tutorial assumes that you are trying to make a gif of a scene from a video clip. The video player I will use to export images is Media Player Classic. VirtualDub can be used to easily export images, but for the purposes of simplicity, only the MPC method will be shown. To use this method, CCCP needs to be activated and CoreAVC needs to be disabled.
Phase 1: Capturing Images
First, open up MPC then go to View -> Options. You should get the screen below:
Choose Output under Playback on the sidebar then select VMR7 (windowed) and click OK. This option only needs to be done once, so the next time you capture images you don’t have to do this again. Now close MPC and open it again with the video clip you want to use. Then go to the place in the video with the scene you want. Move to the scene just before that and press Pause.
Now go to Play -> Filters -> ffdshow Video Decoder. On the sidebar, scroll down until you see Grab then click on that word. When the options for Grab appears, click on the checkbox next to Grab. Your screen should look similar to the image below:
Make sure that the options match the screenshot. For Path, click on the button with ellipses (…) to select a blank folder. I just create a new folder on my Desktop for easy access. Once everything looks good, click OK. Now press Play. The video could play slowly because it’s saving images to that folder you selected. You should only let it play through the scene you want animated then stop the video. Go to ffdshow Video Decoder again and uncheck the box next to Grab. Now close MPC.
Phase 2: Pre-Editing Processing
Access the folder you’ve “grabbed” images to, and it should have a ton of images. Remember that most animation are 24-30 frames per second, so if your scene is 3 seconds, the you would have captured about 75 images. First, locate the images that are not part of the scene, because remember, I told you to move to the scene before the scene you want before pressing Play. In the screenshot below, the images encircled in red are not needed and should be deleted:
There should also be more images at the end of the folder that are part of the next scene, and you should delete those also. Now you’re left with probably still a lot of images. And here comes to tedious part. For anime, notice that many of the images captured are exactly the same. This is because you do not need 20+ different frames per second to create smooth animation. Therefore, the same frame can be repeated to get about 8-14 unique frames per second.
So now you have to go through all of these images and delete all duplicates. This is a time-consuming process, but it will save a lot of trouble when we import these pictures to Photoshop. In the screenshot below, the selected images are duplicates, and they are in the process of being deleted:
After you’re done, the best scenario would be that you have 5-12 images. If you have more than that, then the scene you want animated is too long, and that would likely result in a very big GIF file that is not friendly to anyone. The very maximum I would go is 15 images animation. If you have 22 images, then I would suggest that you delete every other frame to get 11 images. The animation will be choppy, but at least it is manageable.
Phase 3: Importing and Organizing Frames
Now, we open Photoshop CS3. Go to Files -> Scripts -> Load Files into Stack. You should get the screen below:
First, change the Use dropdown menu to Folder. Then click Browse and select the folder you stored your captured images in. A list of files should appear. Now click OK. Photoshop will attempt to open all of the files in that folder and put them all in a single file. If you’re trying to import 50 images this way, you will probably freeze Photoshop, so that’s one of the reasons why I advised you to get rid of duplicates.
Now, open the Animation palette by going to Window -> Animation. There are two modes in the Animation palette, frame animation and timeline animation. If you see blue bars, then you’re in timeline animation, so find the button on the lower-right corner (Convert to frame animation) and click it:
Now you should see a single frame. It would be helpful to have the Layers and History palettes open at this point also. Find the pop-out menu at the top-right corner of the Animation palette, open it, and choose Make Frames From Layers:
Open it again and choose Reverse Frames. Now all of the layers will be converted into frames, with each frame having only one layer visible. You can go through all of the frames to see the changes in visibility on the layers palette. But those weird layer names are not agreeing with me. go to the pop-out menu again and choose Flatten Frames Into Layers. That should create new layers having the name associated with each frame. Since you have these new layers, you can delete all of the original layers (not frames) with MPC-assigned names.
Note: Know the difference between a frame and a layer. Frames refer to frames in the Animation palette, and layers refer to layers in the Layers palette.
This is nice, but it is harder to work with hidden layers. Instead, working with opacity is better, so we should convert all of the hidden layers of each frame to visible, having 0% opacity. To do this easily, find the Convert to timeline animation button in the lower-right corner (same button to clicked on before), click on it to see the timeline then click on it again to see the frames. Amazingly, doing this will convert all non-visible frames to visible with 0% opacity.
Phase 4: Editing the Animation
Now, it’s time to deal with the animation itself. In the lower-left corner, you should see the word Once or Forever. If you see Once, then click on it and change to Forever:
Then, select all of the frames. To do this, click on the first frame, hold down shift, then click on the last frame. Go to the “sec” at the bottom of the picture on the frame and chose 0.1 seconds. This is a temporary setting. All of your frames should display 0.1 sec. Lastly, it’s time to crop your image. Let’s say I want to make a 120 x 300 forum signature. When you crop the image, all of the layers and frames will also crop to that dimension. I’ll assume you know how to use the Crop tool:
Now preview the animation by pressing the play button on the Animation palette. There are two main types of animations, looped and reset. Reset animation means that after the last frame, animation is reset to the first frame without transition. In the first image, the signature is an example of reset animation, because after the scene is animated, it stops, then goes back to the first frame. Looped animation means that after a sequence of frames are played, they are played again in reverse to transition back to the first frame. The second image, a member card, is an example of looped animation.
Looped animation is mostly used for a still camera shot with only a part of the focus moving, such as hair, mouth, or arms of a person being still. This type of animation may require a bit more planning, such as which images to delete to “loop back” to the first image smoothly. In certain cases, you will need to use existing layers to create new frames and reverse them. Since this type of animation is more advanced, this tutorial will focus on reset animation, so we will continue with our signature.
For reset animation, you will want the last frame to wait a bit before resetting to the first frame. A good time is 2-5 seconds, depending on the animation, so set that time for the last frame. Now, if we don’t want to do adjustments to the layers, then we’re basically done. If you don’t want to mess with more advanced stuff, then you can skip down to Phase 5.
Now, if you want to make adjustments to the layers, remember that you have to do it to all of the layers. If you’re trying to apply Auto Levels/Auto Contrast to each layer, then there is a chance that some layers will look out of place since each layer has different color information. Therefore, it’s best to manually adjust a setting, record it as an Action, then play that Action for all of the remaining frames. Lastly, when making a global adjustment, make sure you are on the first frame.
Let’s say you want to apply Levels all of the layers consistently. Select the first frame, then select the layer Frame 1. Then on the Actions palette, create a New Action, name it something, then click Record:
Without doing extraneous actions such as changing frames/layers/tools/etc…, do your Adjustments (I usually apply Levels and Surface Blur), then click Stop on the Actions palette. Without changing frames, click on the layer Frame 2, Play the Action you recorded, then do so for the rest of the layers (while still on the first frame). Because all layers are visible, you can do this while on the first frame. This is why we use opacity instead of visibility. If you’re confused, then just undo what you didn’t understand in the History palette and move on.
If you want to add text or borders, then you have to do it on top of all the current layers. Like usual, make sure you are on the first frame before you add new layers. For this signature, I just added a simple black stroke and no text. It’s time to save your animation.
Phase 5: Optimizing and Saving
To save GIFs, I recommend you going to File -> Save for Web & Devices. First, make sure that the file type is set to GIF (instead of JPEG, PNG, etc…). Here, if you are making an avatar or signature for a forum without a size limit, then you can go to the pop-out menu to the right of Preset then choose Optimize to File Size:
Doing this may give you a very crappy GIF, which means you had way too many frames. Under the GIF drop-down, you should select Perceptual, Selective, or Adaptive, whichever gives you the lowest file size. To the right, the more Colors you have (max 256), the higher your file size will be. The more Dither % you have (max 100), the higher your file size will be. The more Lossy you have (max 100), the lower your file size will be. It’s best to play with these three settings to get good quality while retaining a decently low file size.
The more complex your background is, the more Colors you will need for the image to look good. My signature really only has white, black, blue (the cat), red (the text), and yellow/brown (the background), so I can get a nice picture with low amount of Colors used. But if you’re animating a transformation scene or something vibrant, then even with 256 colors, the GIF will look bad. Keep this in mind when making GIFs, and the best ones have relatively little animation with a simple background.
In general, even if a forum does not have limits, the maximum size of a signature or member card should not exceed 350 kb. This courtesy is mostly for people with slow Internet connections. If you are hosting a GIF on Photobucket or a host with strict bandwidth limits, then big GIFs will let you reach that limit rather quickly. So it’s for your and others’ benefit to keep the size of GIFs as small as possible.
To maximize a quality of a GIF, you should change the color reduction algorithm (drop-down box below image type) to Pattern. This will give a very big file size, but if you’re only making a 100 x 100 avatar, then you might not worry much since it will still be relatively small. For my signature, I will optimize it down to 100 kb and take the suggested 150 colors.
Finished Product
If you’ve followed through this tutorial and made a GIF of your own, then congratulations! Do note that there are way more to GIF animation, and this is just the basics. Slices are a great way to reduce file sizes in signatures, because it allows you to only save the animated part as a GIF and the other parts as JPEG. Notice how the right side of the above signature has no animation at all. If we slice the signature into two and save the left as a GIF and the right as a JPEG, then that would further reduce the file size. For example, below is the same signature, sliced into 3 parts, totaling only 48.6 KB, optimized for AnimeSuki forums:
(The three slices are shown separately for demonstrative purposes.)
You can notice that the quality is worse, but all the same, it is a nice signature for 48.6 KB, which is less than half the size of the first version! The second version uses only 31 colors as opposed to 150 colors, but because the signature has a simple focus and background, 31 colors is good enough. Wasn’t that fun? Animated GIFs can result in lots of unique and dynamic creations, so it is very useful to know how to make them.
