Nove-Noga Info Post
Complex Timing Animated Banner with GIMP
If you found this page useful,Please Like and Share. Thank you.
Nove-Noga!
Complex Timing Animation Banner with GIMP. The first step in any project is the planning. For this project, I am going to create three active panels in a standard 468x60 banner. I have eight images that I will need to resize to fit the project. Images 1 & 2 will be 60 pixels high, Images 3 thru 6 will be 40 pixels high and the last two, Images 7 & 8 will be proportional to Images 3 thru 6.
This is going to be an exercise in complex timing. Instead of using the default timing of (100ms) there will be three different timings used in this project. This banner was created with provided artwork for Networking Made EZ.
Complex Timing Animated Banner for Networking Made EZ.
Each instruction line is usually in two parts; Verbal then Symbols.
"#)" The Symbol line will begin with "#)".
EG: #) >>File->Open("Name" = 'work image')[Open/Enter]
">>" Means Select, from the main menu if no {Dockable Dialog} or other source is indicated.
The square brackets mean [click this button].
The parenthesis mean (your entered info) E.G. (picname.xcf)
"Rt>" Means Right Click with your Mouse
"->" Click or Select
"->>" Double Click
">v" Click DropDown button
"^>" Shift + Click
" "literals" " The quotes usually contain what has been referred to as "Literals" meaning that that is exactly/literally what you should see.
" 'Described Item frequently an Icon' " EG: IBO Edit Icon 'Paper&Pencil'
[Action/Enter] is for the Option to Click the button or Hit the Enter key.
"*NB:" is for the Latin "Note Bene" which I interpret as Good Note or Note Well.*
"EG:" is for the Latin "Exempla Gratia" I use it when illustrating an example. See above.
Selection Synonyms: Click, Select, Choose,...
For more info on notation and standard practices see: "GIMP Notation and Descriptions"
*-*-*-*-*-*
1) Fire up the *Free GIMP.
#) >>GIMP
2) Open the first image file in the folder containing the original image. Assumption: Images are located on your desktop.
#) >>File->Open("Places"="Desktop") ->>("Name"='Image1') [Open/Enter]
*-*-*
The working image will be "untitled.xcf" until you save the file and set the name. We need to scale these images. Image1 & 2 will be height=60 and Image3 thru 6 will be height =40.
*-*-*
3) Scale Image1 & 2 to Height=60 and Image3 thru 6 to Height=40.
#) >>Image->ScaleImage {Scale Image} (Height=60 or 40) [tab key] [Scale]
*-*-*
Choose and enter a working name and save it. Be Sure not to change the xcf extension. Select your working folder before clicking the [Save] button. GIMP returns to the default folder on start-up.
*-*-*
4) Save as a new file "Image1" in our new GIMP Project "NMEZ".
#) >>File->SaveAs("Places" = "My Documents")->>("Name" = "GIMP")[Create Folder](NMEZ)[Enter][Save/Enter]
5) Repeat Steps 2 thru 4 as necessary for Image2 thru Image8.
6) Create a New Banner image from the Template dropdown box.
#) >>File->New{Create a New Image}>vTemplate = (Web banner common 468x60) [OK/Enter]
*-*-*
I played with the various text options before settling on this pattern. In the first panel "Networking Made EZ" With Image1 at the end. Font = Times New Roman Bold. Left Offset +20 and Image 1 Right offset -25. *NB: Default color is black and Justify is left.
7) Set up Text Tool; Font=Times New Roman Bold and enter only the first character (N).
In {Toolbox Tool-Options} dialog select [Text Tool] (the "A" Icon).
#) >>{Toolbox Tool-Options}[Text Tool]
In {Tool Options} dialog Click the Font Button and choose Font.
#) >>{Tool Options} [Aa]-> "Times New Roman Bold"
#) >>{Tool Options} Justify = [Centered]
#) ->@0,5(N)
8) Select alignment tool and position first character at Left +20 and centered vertically.
In {Toolbox} dialog select [Alignment Tool]
#) >>{Toolbox}[Alignment Tool]
Shift Click the Element on the Image to select the Element to align.
#) ^>('element on image')
In {Options} Distribute set offset to 20 and select [Distribute Left Edges of Target]
#) >>{Options} Distribute Offset=20 [Distribute Left Edges of Target]
In {Options} Relative to: select [Align Middle of Target]
#) >>{Options} Relative to: [Align Middle of Target]
9) Save as a new file "NMEZ001" in our new GIMP Project "NMEZ"
#) >>File->SaveAs(NMEZ001.xcf)("Places" = "My Documents")->>("Name" = "GIMP")->>("Name" = "NMEZ")[Save/Enter]
For purposes of brevity, I am going to give a simplified statement for the next step.
10) Continue Entering "Networking Made EZ" one letter at a time, incrementing the name and saving each step along the way. EG: NMEZ002, 003, ...NMEZ018.
11) Open Image1, Copy and paste onto NMEZ018. Then align it right at -25.
#) >>File->Open->>(Image1)
#) >>Edit->Copy
#) >>{NMEZ018}
#) >>Edit->PasteAs>NewLayer
#) >>{Toolbox}[Alignment Tool]
Shift Click the Element on the Image to select the Element to align.
#) ^>('element on image')
#) >>{Options} Distribute Offset=-20 [Distribute Right Edges of Target]
#) >>{Options} Relative to: [Align Middle of Target]
#) >>File->SaveAS(NMEZ019.xcf) [Save/Enter]
This completes the base for the first panel.
12) For the second panel, I constructed the final image using element Image3 thru Image8 then, deconstructed it to create each of the Four Images. To move the Elements in {Layers-Gradients} for proper grouping, Click on the element and drag it to the proper location in the group. These four completed panels make up files NMEZ020 thru NMEZ023.
13) For the Third panel we begin with Image2 set to a Distribute offset of 10 and Distributed from the left edge. After saving file NMEZ024, we begin to add the letters for Networking Made EZ again with a Distribute offset of 100 and Distributed from the left edge. This will create files NMEZ025 thru 42. For NMEZ043 we will add the words "Click Here!" and for NMEZ044 we will replace "Click Here!" with "Start Today!".
14) Having created each panel, we will go back to the first one and begin assembling our GIF.
#) >>File->Open(NMEZ001.xcf)
#) >>Image->Merge (Setup Discard Transparents.)[Merge/Enter]
#) >>Image->Flatten
#) >>File->SaveAs(NMEZ001mf.xcf) [Save/Enter]
#) >>Edit->Copy
15) Start the new GIF.
#) >>File->Create->FromClipboard.
#) >>File->SaveAs(NMEZ1.xcf)[Save/Enter]
16) For the remaining images NMEZ002 Thru 44, Repeat Merge and Flatten process saving result and pasting as new layers on NMEZ1. For Images NMEZ43 & 44 Repeat so the final words will read "Click Now!", "Start Today!". "Click Now!", "Start Today!". "Click Now!"
From the {'Last File Opened'} (NMEZ'001 thru 043')
#) >>File->Open(NMEZ '002 thru 044'.xcf)
Close {'Last File Opened'} *NB: Current should default to the one you just opened.*
#) >>Image->Merge [Merge/Enter]
#) >>Image->Flatten
#) >>File->SaveAs(NMEZ'002 thru 044'mf.xcf) [Save/Enter]
#) >>Edit->Copy
#) >>{NMEZ1.xcf}
#) >>Edit->PasteAs>NewLayer
Repeat this step until complete.
17) Save Completed assembly.
#) >>File->SaveAs(NMEZ2.xcf)[Save/Enter]
*-*-*
18) The standard timing is 100ms. To achieve the delays desired, I changed the timing. In {Layers-Gradients} Double Click the actual element and add the timing elements "(1000ms)" parenthesis included, to the Layer Name in the {Layer Attributes} dialog.
EG: [Clipboard #15]
Becomes [Clipboard #15(1000ms)]
#) {Layers-Gradients}->>Element Clipboard #15
#) {Layer Attributes}Add timing "Clipboard#15(1000ms)" to Layer name.[OK]
19) Repeat Step 18 with (1000ms) for #16 thru #18 and #37 Thru #41.
20) Repeat Step 19 with (200ms) for #36 and (1500ms) for #19.
21) Save Completed assembly.
#) >>File->SaveAs(NMEZ3.xcf)[Save/Enter]
22) Set the optimum pallet with the image mode.
#) >>Image ->Mode ->Indexed Generate optimum palette
#) Maximum number of colors (255)
#) Color Dithering (Positioned)
#) Enable dithering
#) [Convert]
23) Save new File as NMEZ4.xcf
#) >>File ->SaveAs (NMEZ4.xcf) [Save/Enter]
24) The next step is to optimize your file for Gif. This will create a new file. You can see the results for optimization in {Layers-Gradients}. Optimization takes note of all the repeating elements and displays only the changing elements.
#) >>Filters->Animation->Optimize for Gif
25) Save new File as NMEZ5.xcf
#) >>File ->SaveAs (NMEZ5.xcf) [Save/Enter]
26) Export file as GIF.
#) >>File->Export(NMEZ5.gif)[Export/Enter]
#) [x] As animation
#) [Export/Enter]
I apologize for the grouping of some of these steps. If I hadn't, it could have run to several pages. I would like to know if anyone works up a similar project using these instructions. The only way to make them better is through feedback.
Complex Timing Animated Banner for Networking Made EZ.
For more information on GIMPand a working list of my GIMP Tutorials,
go to:
http://nove-noga.com/GIMP.html
Time is your most precious commodity.
Do as much with your time as you can.
Nothing Ventured - Nothing Gained.
Nove-Noga!
