Gif-Making Tutorial

[Gruekinda magical]

IMO paths tool is the best tool to cut out a pony. Ponies are also made from bezier curves (in Flash), so it's a natural fit.

Also good for drawing poni (this guy is crazy for not doing it in Inkscape, but anyway):

Click here to view video.

[numsOic]

If you're doing full-res stuff, it gives you an edge, though I like my results perfectly well using the straight-edged lasso tool. If you're doing avatars, though, it really makes no discernible difference. Just a thought before you start fighting with the path tool when an easier one could do the job, unless you're more proficient with it, in which case I envy you.

Also, if you're drawing vectors from scratch, Gimp's path handling is grossly undersuited for the job. You're better off using something like Inkscape, which is also open source and free.

[RagantiScootaffection best affection :3]

I spent an hour playing around with paths and they were far more forgiving than I expected. I will probably use them instead of the straight selection edges from now on.


Also, to the left is my latest creation (the avatar). I'm a bit sad by how it looks; primarily because I had to drop it down to 18 colours to get it below 30kb. I suspect that was just due to the fact that the avatar itself consists of 13 frames, thus requiring more space?

[numsOic]

Twilight looks a little vertically stretched. The borders are aliased again, which could mean you're still resizing after switching to index mode, or maybe that's just a result of using so few colors (I do see some very limited transitional colors at borders). The current filesize limit is 75 KiB, not 30, so 13 frames shouldn't even begin to be a problem, unless every single frame is completely different and unoptimizable. Again with the frame mistiming (100 ms instead of 80). It's like you forgot half the lessons you learned, man. Remember to follow the process in order and check that you did everything you were supposed to until it becomes automatic. Understanding the basic limitations of the GIF format also helps, if you ever need an explanation of why something happens in a certain way.

[RagantiScootaffection best affection :3]

Twilight looks a little vertically stretched. The borders are aliased again, which could mean you're still resizing after switching to index mode, or maybe that's just a result of using so few colors (I do see some very limited transitional colors at borders). The current filesize limit is 75 KiB, not 30, so 13 frames shouldn't even begin to be a problem, unless every single frame is completely different and unoptimizable. Again with the frame mistiming (100 ms instead of 80). It's like you forgot half the lessons you learned, man. Remember to follow the process in order and check that you did everything you were supposed to until it becomes automatic. Understanding the basic limitations of the GIF format also helps, if you ever need an explanation of why something happens in a certain way.

I'll try to address all this in the same order as you do. I cropped down the image before I did the artifact removal, sadly I couldn't make it a perfect square without cutting out something I felt was important. Could it be because I removed a couple more frames after I did the artifact removal? As for it being 75kbs....welp. My computer said it was 29.7kbs, just barely under the 30kb limit. I changed to a different avatar to fix that though I'm not sure how I was able to upload it. I actually removed a ton of frames to get it down to 13 and only kept the frames that were significant movements. The problem was that, instead of every other frame being useless, there was something changing in every frame. Finally, the 100ms vs 80ms. I though since I removed over half of the frames the timing needed to be slowed down further, but that was more of guess than anything else.

Anyways, I'm going to remake that gif.

[numsOic]

Make sure to remake it for 75 KiB. There's a reason the bump was implemented. Also, try to keep as many colors and frames as possible. Frames generally take precedence over colors, depending on how it looks.

[RagantiScootaffection best affection :3]

I was looking at Kefka's current avatar and was curious how it pulls off this effect that seems to move from one part of a scene to another with a "blur". I'm not sure how to describe it but I know his avatar is all based off a few frames, but it seems to transition from one small part of the scene to another.


Also, I fixed my avatar. So much prettier.

[numsOic]

The ubiquitous "zipping" avatar genre. That one's easy. The way I do it is to crop the initial and final frames, then roughly crop a frame somewhere in the middle of the picture. So from a picture like this:



you'd use these three crops:



so that the resulting frames look like this:



The trick here is that the transitional frame needs a motion blur. Apply a motion blur (in Gimp, this'd be Filters > Blur > Motion Blur) at the appropriate angle and about half the length you want. This is because you'll have to apply another motion blur with the same length and opposite angle so, instead of looking smudged in one direction like this:



it looks more properly like this:



Now put a copy of the transitional frame before and after the final frame so you get the final animation:



Of course, you'll want a quick timing for the transitional frames. Anything fast and snappy should do. The result is a 4-frame animation.



This one looks kinda shitty due to the uniformity of colors in the crop we got for the transitional frame, so perhaps we could try using two transitional frames instead of one. Instead of cropping at the point between the two ends, make two equidistant crops at one and two thirds of the way between them. Same thing applies in the case of four or more transitional frames, but that's usually overkill and defeats the point of doing this technique (see below). Our new result is a 6-frame animation.



You can also do this with more static frames, so for instance you could have frame A -> transitional frame A to B -> frame B -> transitional frame B to C -> frame C -> transitional frame C to A, yielding a 6-frame animation.

The main advantage of this technique is that it uses trivially few frames, which means a very small filesize, with fairly dynamic results. You'd only come up with something like this if filesize limitations were really strict, which is why I've never seen anything like this outside of SA (and here, of course).

[Headless Horse]

Arbitrary technical restrictions are the mother of all kinds of invention.

(Motorsport being only one example, but a huge one)

[Crow.Why, of course!I'm clearly insane! .]

Alright, how bad is this for a first ever try at a gif?


GIMP 2.8 is a pretty awesome little program.

[numsOic]

Besides looking fucking awful, which is a design issue unrelated to the technical side of GIFs, it's actually somewhat technically competent. It's optimized and it's timed adequately. You just need to make something that isn't an eyesore.

[Crow.Why, of course!I'm clearly insane! .]

I'm still pretty bad with images altogether. I know the image looks all warped; I couldn't scale it properly in GIMP (I just don't know how) so I had to resort to using Paint.

I'm going to try with something else, that gif was mostly to tease Grilox and The Doctor in the Rarity's Roughnecks contest thread.

[Venusy]

Select the area you want to use using the rectangle select tool (the fixed aspect ratio option could help, in this case you're probably looking for 4:1), go to Image > Crop to Selection (replace Image with Layer if you only want to work on one layer), then Image > Scale Image... (again, use Layer if you just want to work on one). Make sure the little chain icon is linked rather than unlinked, then put the desired size in the width box (in this case 160), and the height will be filled in automatically. I'm never sure which interpolation setting is best, so I just leave it on the default Cubic, maybe someone more experienced can give better advice on that.

The framing is probably going to be a little different because of keeping the correct aspect ratio though, I just gave it a try and ended up with this:

If you want more of the wings in, it means putting Celestia in the centre. Or maybe isolating the silhouette from the sun, and placing it against a different background so you're not restricted by the dimensions of the original fanart.

[numsOic]

Make sure the little chain icon is linked rather than unlinked

Layer linking is completely unrelated to image or layer rescaling, so the chain icon is irrelevant to the process either way. If you want to rescale a bunch of layers at once, you'll have to do one by one, or perhaps save them into a separate image, image-scale that, and then import it back, but either way it's a cumbersome process.

As for interpolation, try out Cubic or Lanczos; the latter usually yields either very crisp or very blurry results depending on the resolution you're scaling from due to the way the algorithm works (it's related to multiples). Linear is always shitty and blurry, and None is exactly what you don't want (unless you know exactly what you're doing).

Other issues with your improvised gangtag, specifically with the text, are the use of a really bland font (default setting?), the fact that it's full red and the fact that it's aliased (possibly due to incorrect interpolation or converting to indexed mode somewhere you shouldn't have). Also, most gangtags here have a 1-pixel black (or very dark) border, though there are exceptions. Text placement is also kind of awkward, but that's getting into details.

[Venusy]

Layer linking is completely unrelated to image or layer rescaling, so the chain icon is irrelevant to the process either way. If you want to rescale a bunch of layers at once, you'll have to do one by one, or perhaps save them into a separate image, image-scale that, and then import it back, but either way it's a cumbersome process.

Not that chain icon. The one for keeping aspect ratio locked when scaling.

You actually can rescale a bunch of linked layers at once (at least in 2.8), you just have to use the Scale tool rather than the menu option.

[numsOic]

Not that chain icon. The one for keeping aspect ratio locked when scaling.[/quote]
Oh, shit. Should've figured.

You actually can rescale a bunch of linked layers at once (at least in 2.8), you just have to use the Scale tool rather than the menu option.

Actually, it works in 2.6 too! Color me surprised. How did I never use the rescale tool with multiple layers?

[Crow.Why, of course!I'm clearly insane! .]

So how do I fix the AA in my makeshift gangtag?

[numsOic]

You have to remake it from scratch. Look at your text tool settings (make sure you have anti-aliasing on) and do not switch to indexed mode before resizing anything.

[Crow.Why, of course!I'm clearly insane! .]

Well, I tried

[numsOic]

All of that takes only 12 KB. You have a lot of room to work with and come up with transitions to make it less static. As it is, it looks much too "slideshow".

Not to mention that it's ugly and tacky for reasons I can't quite put my finger on, but that's a topic for another thread. (We could call it "Kefkaschool: Visual Design Training Grounds")

[Crow.Why, of course!I'm clearly insane! .]

Yeah, I have no idea why I keep losing so much image quality. I started off working with 1288x515 just to give more room and then scaled the whole thing down at the end. Perhaps I should have used 1600x400 to better gauge the size?

How could I make the transitions better? Adding in more frames with a dimming effect instead of straight-to-black frame? Is there even a dimming/brightness tool? I did find the desaturation tool which I used on the lightning.

[numsOic]

You could try blending frames in different ways; a simple frame-over-frame at partial transparency will do wonders to avoid that slideshow look, but try playing around with different kinds of blur or effects, something simple. You don't need to work in an insanely high resolution, either, you just need to know what you're doing. Your canvas needs to be 4:1, though, i.e. the ratio of the final animation, so you don't get horizontally stretched images like you did there.

Another thing that will make your text less boring (other than using a different font, by god) is to add a border. How do you do this? The method I currently use, thanks to Grue, is to lay down the text, then right click on the text layer > Text to Path, then add a new layer for the border and put it under the text, then go to the Paths dialog (if you don't have it, you need to add the corresponding tab somewhere in your workflow) and right click on the path > Stroke Path; just fiddle around with that.

As a final tip, the rescaling to final size should be the very last thing you do before the final steps (adding the black border, converting to index mode, etc.), otherwise what's the point of working at high resolution?

[Crow.Why, of course!I'm clearly insane! .]

What fonts would you suggest? The font was really annoying me, too. GIMP doesn't really seem to list all the fonts it has, and even if it did, I imagine those all to be pretty dull.

[numsOic]

Frankly, I dunno. I have a lot of fonts and use them without even looking at their name, so I'm not very font-savvy. Just use something that doesn't look like a text processor default and doesn't clash with what you're trying to do.

Gimp should list your system fonts, though. Maybe Fontconfig isn't configured correctly. Take a look at this and look up more info. I'm using Linux and it automatically works just fine so I can't help you there.

[Crow.Why, of course!I'm clearly insane! .]

I gave up on the gangtag. Not going to bother until I get more experience with text under my belt.

Moving on, I'm trying to learn how to use the blur tool, this is before I've blurred anything, just to check timing:



Source image: here for reference.

For the blur tool, which tool let's me select a straight angle to apply the blur to only that region? I only found the freehand/rectangle/circle selection tools.

I realize the image is too big, so I'll probably end up removing Lyra and/or Octavia.

[Gruekinda magical]

For the blur tool, which tool let's me select a straight angle to apply the blur to only that region? I only found the freehand/rectangle/circle selection tools.

I'm not sure what exactly you mean by this, but freehand selection tool is also used to select polygons, if you simply click instead of clicking and dragging the mouse.

[Crow.Why, of course!I'm clearly insane! .]

I'm not sure what exactly you mean by this, but freehand selection tool is also used to select polygons, if you simply click instead of clicking and dragging the mouse.

That's what I meant, I didn't know how to select polygons! Thanks!

edit: <- Finished product!

[numsOic]

So why did you need to select polygonal sections? Looking at the GIF it looks like you could've just straight used motion blur on the transitional frames. I do notice they have a diagonal line running through them and I don't know what the heck you did to get that.

[Crow.Why, of course!I'm clearly insane! .]

The diagonal line is from where I tried to split the frame. I wanted to see if I could get the blur going from the center of the image [<-|->], just to see how that would come out. That's what I used the polygon selection tool on. I'm going to retool the transitional frames. This, as I'm sure you noticed, only has one transitional frame; I'm going to retool it to have two.

[RagantiScootaffection best affection :3]

I'm back! I tried my hand at masking tonight using paths on multiple layers and made this:




I thought it looked okay but some of the edges seem jagged and I'm not sure why. Thoughts?

(My avatar is a scaled down version)

[Pony Factory Factorysugoi]

I'm back! I tried my hand at masking tonight using paths on multiple layers and made this:




I thought it looked okay but some of the edges seem jagged and I'm not sure why. Thoughts?

(My avatar is a scaled down version)

It's likely because GIF formats can't antialias against transparency the way PNG can. When you see a smooth animated GIF on a transparent background, that's actually gone through a process called "matting."

Here's what happens if I shrink your GIF there down and matte it. Compare to your AV, on the right.



If you're on the standard forum themes, you might be wondering what the difference is. Take a look again now that I've changed the matte color to red:



There's more pixels what the hell? Let's look at the first version again, but this time I've dropped it onto a black background and blown it up 3x:



Ah. What's going on there is that all the transparent pixels around the edges of Scootaloo have been blended against a light grey (80% grey, in this case). Since the aura is only a pixel wide or so, you can't really see it most of the time.

If you want to get fancy, matting is also called "premultiplying," and it just refers to blending fuzzy edges against a solid color. It's used for getting smooth-looking edges when you can only store transparency as "is transparent" or "is not transparent," as with GIF formats. Other image formats can be stored with an "unmultiplied" image - as in, there are as many shades of transparency as there are shades of grey.

Let's look at an example, a big fuzzy brush blob. Here's how it looks in Photoshop, against a "checkerboard = transparent" background:



Here's what it looks like saved as a GIF and matted against 80% grey:



Click for Fullsize

Well, that's noticeable. You can easily see the premultiplying unless the image just happens to be displayed against a background which is 79-81% grey. If I matte it against the default blue color scheme...



Why that looks swell to me. But someone using the orange color scheme would wonder what the hell a red dot on a blue plate is doing there.

Here's an unmultiplied PNG:



Click for Fullsize

That looks nice! Behind the scenes, that image is a mixture of two primary channels, Red and Transparency. They look like this (these are faked up):



The browser itself handles blending the color channel(s) against the background for display. The transparency channel is also called an Alpha channel. Thus instead of RGB (red-green-blue) triplets, each pixel gets an RGBA quadruplet to describe its color.

Now here's the downer: I have no idea how to accomplish matting in GIMP or any other free tool. This is an easy option in Photoshop's Save for Web dialog, but that's the limit of my experience for how-to purposes in this thread.

[RagantiScootaffection best affection :3]

It's really hard to tell what you did. I'm not very good with Gimp so could you explain? Your image looks smoother than mine but I'm unsure how.

[Pony Factory Factorysugoi]

... The rest of the post is literally me explaining what I did and why it works. At the end, I say I don't know how to do that in GIMP.

However, I Googled it for you: When you're done, and before you save, use the Filters -> Web -> Semi-Flatten tool.

[Scuderia FerrarityWhy?Because Twilight Sparkle. That's why.-- Twilight Sparkle]

I wanna find the dude that dropped the ball on getting animation into the PNG spec and slug him in the teef.


That said, I'm using the tan theme and imitating antialiasing against gray still looks better than no antialiasing at all.

[SlateSlabrock]

I'd settle for getting animated PNG support into Chrome.

[Pony Factory Factorysugoi]

There's an extension for that.

I have no clue how to actually author an APNG. The only time I've worked with one, I used AVIDeMUX with a plug-in to break an APNG into frames, but it dropped the "A" part of "RGBA" resulting in unusable blobs of color.

[Gruekinda magical]

There is an APNG input/output plugin for GIMP, but I couldn't get it to work (specifically, the output part). I can see it being useful for images that look good without animation, but also have a bonus animation if it's supported. Or display different things for different browsers.

[numsOic]

... The rest of the post is literally me explaining what I did and why it works. At the end, I say I don't know how to do that in GIMP.

However, I Googled it for you: When you're done, and before you save, use the Filters -> Web -> Semi-Flatten tool.

...and remember to delete matte artifacts, if any. I get them all the time when making emotes and I don't know why.

I wanna find the dude that dropped the ball on getting animation into the PNG spec and slug him in the teef.

Look up "MNG" and cry in shame. I agree with the idea that static and animated images should have related but different file formats.

That said, I'm using the tan theme and imitating antialiasing against gray still looks better than no antialiasing at all.

I always matte against white because most users will be using a light theme. They look pretty good even against the somewhat darker tones of the summer theme.

There is an APNG input/output plugin for GIMP, but I couldn't get it to work (specifically, the output part). I can see it being useful for images that look good without animation, but also have a bonus animation if it's supported. Or display different things for different browsers.

I have it and it works fine for me.

The main reason I don't use it is that APNG doesn't have default support for a majority of users (I'm not entirely sure Gecko-based browsers form an absolute minority of the market, but I'll just assume they do... and Opera doesn't even count), and what's the point of making a picture that has wildly different results for different people? Why bother making an animation if it's superfluous enough that you predict some people won't see it? (I'm aware that matting my GIFs for light themes will make them hideous for some users, but not matting GIFs results in ugly animations for everyone, so it's the lesser of two evils.)

I can see the use in "compatibility checks" and things like that, though. This is speaking strictly as an artist.

[Gruekinda magical]

A few weeks ago I made a script that helps with editing animations in GIMP (mostly post-processing stuff, like a poor man's After Effects). Today I finally release it to the public. I even made a video that teaches how to use it! (it is 30 minutes long...) Anyway, get AnimStack here and watch the video here or below.

Click here to view video.

[numsOic]

You beautiful motherfucker. Now I need to upgrade to 2.8. When I got to the part about generators, I almost lost it.

Jeez, this is longer than a pony episode. What did you do?!