[TUT] Animated Banner with GIMP

[gangstagreen]

Ok, this time I’ll show you how to make one of these bad boys, an animated banner logo. Like this or this . The first one is actually a bit trickier as it involves a lot more layers than the other one, but I’ll explain that later.

What you need first to make these cool banners is,

a cool font
GIMP 2.4 or any other version.
and a good idea, what you want your Banner to look like
Here’s a screenshot, what GIMP will look like, once it’s installed on your machine!




To start a new banner project click File >> New (or simply press Ctrl+n) and then this dialog box should pop up:



Make sure you select the Web banner huge template, in the template drop-down box! This will be the ideal size for your banner, web-standard apparently!

Now you can start laying out your banner, make sure you use a new layer for each frame you want to use.

So basically I used a layer for

SEASON
-TURN THE CORNER
coming soon
season
Tip: Always keep the layer box (ctrl+l) handy (next to you!).

An example of my layer box is here:



As you can see I’ve used quite a few layers……this layer box is for the 1st banner….since I wanted to “Turn The Corner” bit separated, I had to create a new layer for every letter. I wish there was a simpler way of doing that, but alas I don’t know how. If you know how to make this easier, shoot me an email or drop me a comment. PLEASE!

Anyway, once you’ve created all your layers and text, you can start moving onto animating it. But be sure to save it first as a raw file (.xfc) which is the counterpart to .psd in photoshop. Because if you don’t like the animation, you can always go back and change the individual layer or animation effect.

Ok, once that’s done, go to Filter >> Animation >> and then choose whatever Effect you like. GAP (the animation program in GIMP) comes with a bunch of different animation effects.
I recommend the “Blend” effect, that’s what I have been using. Here you can choose the “Intermediate frames” and the “maximum blur radius“. Just play around with it a bit to see what you want. The higher you go up with the Intermediate frames, the slower it will fade. Doesn’t necessarily mean that it will stay longer, in fact it won’t!
I’ve been told tho, by various Gimp Experts, that by changing the layers name to e.g. “Layer 1 (500ms)” that it will stay longer than the standard time, which is around 100 or 200ms. I’ve tried that, but it did NOTHING for me. So maybe I missed something, or it just doesn’t work. If you find out how to make a certain layer stay longer than the other, drop me a comment please!

Once you’ve found the right configuration for your banner, save it as a gif file. File >> Save As… (Shift+Ctrl+S)
Select .gif and then the Export File Dialog box should appear. Make sure you select “Save As Animation“. Then this last dialog box should pop up.



Make a few adjustments if you like, and then click to “Save” and voilà your brand-new sexy animated banner is done!

Well done!

PS, if you’re using GIMP in a foreign language and want to start it in English for taking screenshots and all that, simply just type

LC_MESSAGES=en_EN gimp-remote

into your console. Actually took me hours to find that out, so I’m posting it here if anyone wants to know it.

[Narudan]

urgh. gimp

[wow4Supplier]

Too bad I don't use GIMP :/

[gangstagreen]

*shrugs* Photoshop cost money. I felt that it would be appreciated if I posted this.

[gangstagreen]

Hate to double post but this is important. I am posting the DL link in MP so people can at least try it if they'd like.