completed image © hillie

CROPPING TRANSPARENT GIFS
USING GIF ANIMATOR 5

SOFTWARE: Gif Animator 5
AUTHOR: Hillie
HOME PAGE: Hillie's imagEnation
TITLE: Cropping Transparent Gifs Using Gif Animator 5
SKILL LEVEL: Intermediate
TOOLS USED: Gif Animator 5's Edit / Canvas Size option
ADDITIONAL FILES: Download yay-uncropped.gif (70 x 30px - 2 seconds download)

DESCRIPTION: Learn how to resize the canvas background of animated or still transparent gifs using Gif Animator 5's Edit / Canvas Size menu.

INSTRUCTIONS:

Sometimes you find emoticons or transparent animations that have a large canvas background and need to be cropped to lessen download time. Or maybe you'd like to resize your own. In this tutorial we will be using an animated smiley.

This method can be used on still or animated gifs. The main reason for cropping is to cut down on optimization times and also handy for boards using large numbers of emoticons.

Reminder: We are not resizing the smiley, we are resizing the canvas. Hence we won't be using Edit/Resize Image. We'll be doing a Canvas Size resize.

1. Open the downloaded smiley.

You can also press your + keyboard key to zoom in since this ani is quite small (but expressive lol).

2. Click on the first frame (1:Frame) and cycle your way through the frames using your right arrow key on your keyboard. Find the frame where the smiley is utilising the largest amount of canvas (eg if the smiley is expressive with one hand out the side, it fills more space on the canvas - you don't want to cut off the hand in your final resize.) In this case it's Frame 15. Click on it to select.

Frame 15

3. On your Menu Bar go to Edit / Canvas Size (or Ctrl G) to open the dialogue box. Move the box over to the right of your little guy so you can use your eye to judge size. Untick Keep Aspect Ratio - you are resizing the canvas not the smiley, so aspect ratio is superfluous.

untick aspect ratio

4. First let's resize the width. (If your own smiley was, say, smack bang in the middle it would be easier.) Estimate "by eye" what you think the pixel width should be in relation to the actual size.

In this case we'll put in 52.

5. Next we'll look at the Sizing Reference / By Position radio buttons down the bottom. We want to bring in the left side so click on the 2nd row far right button (Align Right) - this will move the left edge over to the right (the little blue box in the pic shows which direction it will move). Click OK.

6. Still a bit too much room left and right. Put 44 in the Width box with the Align Centre box selected, click OK. It could be cropped a little bit more (on the right) but I'm leaving it at that.

7. Now do the same as above for the height. I thought 25 for the height with Align Centre still selected would work well but when I clicked the Preview tab to play it back I realised the hands were cut off. I cycled through the frames again on the Edit tab and found Frame 14 was the culprit.

8. Finally 27 with Align Bottom Centre selected (to move the bottom down) did the trick.

On the toolbar choose the drop-down arrow next to the Save icon and choose "As Gif File...". Done Done

Save As Gif

The main thing is to experiment til you get it right. Have fun :-)

Additional information - Another way of cropping:

Find the frame where the icon takes up the most space. Use the Selection Tool to draw a box around it. On the Menu Bar select Edit / Crop Canvas. It will crop all of the frames to the same size.

crop

There's a bit of guesswork involved because in one of the other frames the little guy moves further down when he bounces. You can always use Undo and start again.

(Thanks to MaryLou for this tip.)

Thank you for trying out my tutorial. I hope you've enjoyed it.

HTML Comment Box is loading comments...

HILLIE'S PHOTOIMPACT TUTORIALS INDEX

HOME: Hillie's imagEnation

Hillie © April 2008

PIRC forum   The PIRC Network