Gimp-Tutorial Part 2
| After saving our work, we can go on with the next steps. First, you copy all layers. Now you have the complete scenario twice. Just click with the right mouse button on every layer entry in the window "Layers & Channels" and choose the menu "Duplicate Layer". After copying all layers you sort them the way that all original layers and all copies are grouped. Click on a layer and move it with the arrow-buttons to the bottom of the window. |
|
|
In your banner it will look like the penguins move their heads to the
middle of the banner. It is simpler to produce the banner the other way around
so the penguins move their head away from the banner. To keep the overview over originals and copies, you deselect all original layers. Click on the black eye of the corresponding entries. Now these layers cannot be seen any longer. Now select each copied layer and move the corresponding penguin a little bit out of the banner using the "Move Tool". |
|
|
|
|
Then, copy all the copied layers again so you get the layers called "Tux1 copy copy". Sort them into two sets of "copy" and "copy copy". Then,
deselect the "copy"-layers so you can easily work with the "copy copy" layers. Also, you now move the penguins a bit outside of the banner so you just see a little bit or nothing of their heads: |
|
 |
|
|
Next you have to combine the layers which belong to one picture, i.e.,
you combine all layers of one scenario (first the original layers, then the first copy and then the "copy copy" layers). Select all pictures of one scenario (i.e. you let the picture as it is. Just the "copy "copy layers have an eye in the "Layers & Channels" window.) Select the option "Merge visible Layers" using the right mouse button in the layer menu. But before Gimp starts the action, it asks how the pictures have to be combined. Because the penguins lay partially outside of the frame Gimp offers the option "expanded as necessary". But this is exactly what we do not want. Instead you should check the option "clipped to bottom layer". Please do the same with all the other layer sets. (Attention: Just select the layers which have to be combined.) |
 |
Now, only three layers exist which look, when combined together, like the following picture:
 |
|
|
To get the banner playing in the right direction, you have to set the layers
in this way: the layer with the heads most visible has to be the first, the layer with the heads you can hardly guess has to be the last one. Next you rename the layers. Please give them the names starting from the top: Layer1 (2000ms) Layer2 (180ms) Layer3 (250ms)
The entry between the brackets sets the time that it takes to move from one picture to the next when you produce an animated banner. |
 |
The animated banner should look like the following example:
 |
|
|
As you can see, the animation does not perfectly work. The penguins are just painted above the old ones. Sometimes you see a part of the penguin below. Too, the banner does not look too good on a white background. A little research gets the information that blue banners have the highest click-through-rate. Just add a fourth layer with a blue background. Select the button "New Layer" (the empty sheet of paper at the bottom of the window "Channels and Layers") to create a new layer. This layer automatically gets the same size as the existing banner. Select the "Layer Fill Type: Transparent". It gets its color later. |
 |
|
Now choose the new layer so that it can be edited. The other layers can still be visible. This does not matter because the following works
on the new layer will not touch them. Please double-click on the colored field at the bottom of the window and a window with the name "Color selection" appears. Now select a nice blue color as the foreground color. A double-click on a colored field selects it as the background color. We suggest you select a little bit darker blue than the background color. Next choose the option "Fill with a color gradient"  . In this window with additional options (double-click on the icon), you select the
menu "Blend: FG to BG (RGB)".This option creates a blend starting with the light blue foreground color to the darker blue background color. Use the mouse to produce an arrow on the banner that defines the range and the direction of the color blend. You will see that just the selected layer is changed. The layer with the blue background color has to be copied four times ("Duplicate Layer"). Then, you merge each layer with penguins together with one blue background layer ("Merge visible Layers") so that only one blue layer remains (we need this one later). Take care that the layer with the penguins is placed above the background layer before you merge them, otherwise the penguins are hidden. After merging the three layer-sets, the names are changed so you have to rename them again: Layer1 (2000ms) Layer2 (180ms) Layer3 (250ms)
Next you edit the layer that remains blue. Choose white to be the foreground color and then insert a text after clicking on the button
"Add text to the image" |
|
|
|
|
Now, merge the three layers (the blue background and the two layers with the white text. Now you can edit the last layer with a blue background. Just select this one and put some text with your or our Internet address on it. It uses the same procedure as before. Choose the font "courier". The height depends on the length of the address. After merging these layers (background and text) you should rename them and add a time in milliseconds to define how long the text has to be shown. For the "question text", we suggest a time of 2700 millisecond. The Internet address should be presented for at least 3000 milliseconds. Finally, you have to sort the text layers in the right way, i.e. the Internet address has to be the first, then the question followed by the three layers of penguins in the already discussed order. |
 |
The animated banner should look like:
|
|
|
The next important step is to save your master work. Because the picture has to be saved is the GIF format, you have to transform it into the indexed format using the menu Image->Indexed. Then, a window appears where you can choose among a picture with 255 colors (one color is reserved for the transparent background), a special WWW adjusted picture, or if you may save it with your own color table. We suggest that you choose the option with the 255 colors. The WWW adjusted format needs much less space but does not look very good.
If you were satisfied with your animation (have a look at it with the menu Filters->Animation->Animation Playback), you would be able to reduce the file size of the picture a little bit. Until now, Gimp has saved five complete pictures which are shown one after another in our small animation. But the pictures do not change very much. The background is identical for all pictures and also the penguins move only a little bit at the beginning. Ahh, you did it and you produced your first animated banner with Gimp. Congratulations! |
 |
.Talkback Area
Enter Own Comment