Nove-Noga Info Post

Free Animated Banner for Nove-Noga
Part 2

If you found this page useful,
Please Like and Share. Thank you.
Nove-Noga!

Simple Animated Banner For Nove-Noga Created with the Free GIMP Tool.

This is Part 2 of 2 parts. Part 1 is "Free Animated Banner for Nove-Noga Part 1"

I have already opened a project directory with the first working file. If you stopped out after the first section, you can rejoin us in progress with these Click-by-Click Instructions to create a simple animated banner.

Notation Methods:

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"

*-*-*-*-*-*
To Restart: Fire up your GIMP tool.
#) >>GIMP
Open your working file.
#) >>File ->Open ->>(GIMP folder) ->>(AniBanner folder) (AniBan1.xcf) [Open]
*-*-*

11) Combine both text layers into one element. Right Click on top layer in {Layers-Gradients} and select Merge Down from popup menu.
#) Rt>{Layers-Gradients}(Top text layer)->Merge Down

12) Use Alignment Tool to position this combined text element at 5 px from left edge and visually centered vertically on the banner.
Select Alignment tool from Toolbox and Drag a selection box over element.
#) >>{Toolbox}[Alignment Tool] ;Drag a selection box over element
Center element vertically relative to First item.
#) >>{Tool Options}[Align middle of target]
Position Element 5px in from left edge of banner using the Distribute tiles.
#) >>{Tool Options} Offset(5);[Distribute left edges of targets]
*NB: The centered element appears to be about 2px lower than I want it.*
Position Element at 4px from top instead of 6px.
#) >>{Tool Options} Offset(4);[Distribute top edges of targets]

13) Combine Text and Background. Right Click on top layer in {Layers-Gradients} and select Merge Down from popup menu.
#) Rt>{Layers-Gradients}(Top text layer)->Merge Down

14) Save As next Image.
#) >>File ->SaveAs (AniBan2.xcf) [Save/Enter]

*-*-* Create the following as one element.
Top Line: "Nothing Ventured - Nothing Gained. Your Future is Up to You." ; Times New Roman, Bold 13
Bottom Line: "See the Possibilities at www(dot)Nove-Noga(dot)com Click Now!"; Times New Roman, Bold 13 *-*-*

15) Create two lines (Nothing Ventured - Nothing Gained. Your Future is Up to You.) and (See the Possibilities at www(dot)Nove-Noga(dot)com Click Now!); Times New Roman, Bold 13 color=0000ff; in two lines @100,6
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"
In {Tool Options} dialog Set Size to 13 px
#) >>{Tool Options} Size = 13 px
In {Tool Options} dialog set Color to HTML 0000ff
#) >>{Tool Options} [Color] {Text Color} (HTML 0000ff) [OK]
Click working image @ 100,6 and key in (Line 1 [Enter] [Enter] [Enter] Line 2)
#) ->@100,6(Line 1 [Enter] [Enter] [Enter] Line 2)

16) Set lines at visual center of working area using Alignment tool.
Select Alignment tool from Toolbox and Drag a selection box over element.
#) >>{Toolbox}[Alignment Tool] ;Drag a selection box over element
Align to Middle of target.
#) >>{Tool Options}[Align middle of target]
Position Element 23px in from right edge of banner using the Distribute tiles.
#) >>{Tool Options} Offset(-23);[Distribute right edges of targets]
*NB: Note that the offset for the right edges is a negative number.*

17) Save As next Image.
#) >>File ->SaveAs (AniBan3.xcf) [Save/Enter]

*-*-* Take note of the size and position of this element. Right edge -23,Length 332, Center 166+23=189 from right edge. *-*-*

18) Combine Text and Background. Right Click on top layer in {Layers-Gradients} and select Merge Down from popup menu.
#) Rt>{Layers-Gradients}(Top text layer)->Merge Down

19) Save As next Image.
#) >>File ->SaveAs (AniBan4.xcf) [Save/Enter]
*-*-*-*-*-*

*-*-* Begin creating animation elements. *-*-*
Center Lines: Rockwell Bold
MLMs & HYIPs Aren't for Everyone.
You Need a Different Place to Start.
Create Your Own Future.
Learn About Freelancing.
See Real Work Options.
Turn A Hobby into a Career.
Seize Your Future Today!

20) Set up for animation lines; Rockwell Bold 17 color=black;
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]-> "Rockwell Bold"
In {Tool Options} dialog Set Size to 17 px
#) >>{Tool Options} Size = 17 px
In {Tool Options} dialog set Color to HTML 000000
#) >>{Tool Options} [Color] {Text Color} (HTML 000000) [OK]

Changing Lines:
*-*-*
21) (MLMs & HYIPs Aren't for Everyone.)
Enter Line at 100,32
Check Length
Align center
Select Alignment tool from Toolbox and Drag a selection box over element.
#) >>{Toolbox}[Alignment Tool] ;Drag a selection box over element
Align Vertically in center.
#) >>{Tool Options}[Align Middle of Target.
Align Horizontally by calculation of Offset for distribute.
#) Center desired = -189 and element center = Length/2
Offset = Length/2-189 E.G. Element 1 Length=304 Offset = 304/2 - 189 = -37
#) >>{Tool Options} Offset(-37);[Distribute right edges of targets]

22) Save As next Level Image.
#) >>File ->SaveAs (AniBan41.xcf) [Save/Enter]

23) Right-click working line and Select Text Tool from Menu.
#) Rt>{Layers-Gradients}Text Tool

24) Click work window. Backspace over text. Enter new text line.
(You Need a Different Place to Start.)

25) Select Alignment Tool.
#) >>{Toolbox}[Alignment Tool]
Use Pointer to determine length of element. Find the right edge, left edge and calculate.
Drag Box over element then set offset and Distribute right
#) Drag box over element; >>{Tool Options} Offset(-42);[Distribute right edges of targets]

26) Save As next Image.
#) >>File ->SaveAs (AniBan42.xcf) [Save/Enter]

27) Repeat Step 23 - 26.
#) (Create Your Own Future.) >>{Tool Options} Offset(-85);[Distribute right edges of targets]
#) >>File ->SaveAs (AniBan43.xcf) [Save/Enter]
#) (Learn About Freelancing.) >>{Tool Options} Offset(-82);[Distribute right edges of targets]
#) >>File ->SaveAs (AniBan44.xcf) [Save/Enter]
#) (See Real Work Options.) >>{Tool Options} Offset(-92);[Distribute right edges of targets]
#) >>File ->SaveAs (AniBan45.xcf) [Save/Enter]
#) (Turn A Hobby into a Career.) >>{Tool Options} Offset(-71);[Distribute right edges of targets]
#) >>File ->SaveAs (AniBan46.xcf) [Save/Enter]
#) (Seize Your Future Today!) >>{Tool Options} Offset(-93);[Distribute right edges of targets]
#) >>File ->SaveAs (AniBan47.xcf) [Save/Enter]

28) Close Image 47
#) >>[X]

29) Open Image 41
#) >>File ->Open (AniBan41.xcf)

30) Combine Text and Background. Right Click on top layer in {Layers-Gradients} and select Merge Down from popup menu.
#) Rt>{Layers-Gradients}(Top text layer)->Merge Down

31) Copy Image to clipboard
#) >>Edit ->Copy

32) Create a new project from clipboard
#) >>File ->Create ->From Clipboard

33) Close AniBan41.xcf Without Saving!!! (In Case You Want to Make Changes.) Active window will default to one just created.
#) >>[X] [Close Without Saving]

34) Save new File as AniBan5.xcf
#) >>File ->SaveAs (AniBan5.xcf) [Save/Enter]

35) Open Next Image
#) >>File ->Open (AniBan4x.xcf) [Save/Enter]

36) Combine Text and Background. Right Click on top layer in {Layers-Gradients} and select Merge Down from popup menu.
#) Rt>{Layers-Gradients}(Top text layer)->Merge Down

37) Copy Image to clipboard
#) >>Edit ->Copy

38) Close Current Image Without Saving
#) >>[X] [Close Without Saving]

39) Paste Layer Into AniBan5.xcf
#) >>Edit ->PasteAs ->NewLayer

40) Repeat Steps 35 thru 39 for AniBan43.xcf thru AniBan47.xcf

41) Save new File as AniBan51.xcf
#) >>File ->SaveAs (AniBan51.xcf) [Save/Enter]

42) Set the optimum pallet with the image mode.
#) >>Image ->Mode ->Indexed
#) [x] Generate optimum palette
#) Maximum number of colors (255)
#) [x] Color Dithering (Positioned)
#) [x] Enable dithering
#) [Convert]

41) Save new File as AniBan52.xcf
#) >>File ->SaveAs (AniBan52.xcf) [Save/Enter]

42)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

43) Save new File as AniBan53.xcf
#) >>File ->SaveAs (AniBan53.xcf) [Save/Enter]

44) It is time to save our Masterpiece. Select File->Export-> Choose your Name and set extension to Gif "name.gif". Choose your target directory and hit [enter]. This will bring up the Export Box. The default will include the Gif comment. I added my ByLine to "Created with GIMP". Check the box "As Animation" then Check "Loop forever". I set my delay at 2000 milliseconds (2 seconds) and Checked "Use delay entered above for all frames." I did not worry about "disposal". Next click [Export].
#) >>File->Export WorkingName.gif [Export]
#) [x] As animation
#) [x] Loop forever
#) Set Delay (2500) milliseconds
#) [x] Use delay entered above for all frames
#) [Export]

I did not like the results.
Changed AniBan47.xcf
#) Rt>{Layers-Gradients}(Text Layer) ->Text Tool
#) Increased Text size to 22 Offset(-57)
#) >>{Toolbox}[Alignment Tool]
#) Drag Box over Text Element.
#) >>{Tool Options} Align Middle of target.
#) >>{Tool Options} Offset(-92) [Distribute right edges of targets.
#) >>File ->SaveAs(AniBan471.xcf) [Save/Enter]
#) Repeat Steps 29 thru 44 for AniBan6.xcf (Delay = 2013)
Elapsed Time approx. 10 minutes.

Simple Animated Banner For Nove-Noga Created with the Free GIMP Tool.

This animated banner allows you to produce a more eye catching display as well as displaying more information in a limited area.
For more information on GIMP
and 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!