Nove-Noga Info Post
Animated Text Project with GIMP
If you found this page useful,Please Like and Share. Thank you.
Nove-Noga!
Animated Text Project with Free GIMP by Nove-Noga. I put a number of definitions on my website some time back. They can now be found at http://nove-Noga.com/Working-Definitions.html. There were reasons for putting them there but I was not pleased with the presentation. I had also been thinking about creating an animated banner with the *Free GIMP tool. (GNU Image Manipulation Program)
Animated Text Project To Display Multiple Definitions in a Restricted Area.
*Free Means Free!
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"
*-*-*-*-*-*
1) Fire up the *Free GIMP Tool. (GNU Image Manipulation Program).
#) >>GIMP
2) Open a new image for the project 610x60px @72ppi, RGB Color.
#) >>File->New{Create a New Image} Width=610 Height=60 Units=px [OK]
*NB: First we are going to create the base image containing any elements that will be common to more than one frame. At this time, you would also select your background color. For my purposes, I want this to appear on a white background. I am going to place the words "Working Definitions" on two lines 15 pixels from the left side of the image. *
3) Set up Text Tool; Font=Arial Bold Size 18px.
In {Toolbox} dialog select [Text Tool] (the "A" Icon).
#) >>{Toolbox }[Text Tool]
In {Tool Options} dialog Click the Font Button and choose Font.
#) >>{Tool Options} [Aa]-> "Arial Bold"
In {Tool Options} dialog Set Size to 18 px.
#) >>{Tool Options} Size = 18 px
In {Tool Options} dialog set Justify to Center.
#) >>{Tool Options} Justify = [Centered]
*NB: The animated text image that I am going to create is going to be dropped on my web page. To fit into the formatting that I am using, I made my box 610 pixels wide. I want to drop my "heading" or key phrase very carefully 15 pixels from the left edge of the box. At the bottom left corner of your GIMP work area you will see the marker for Units which should be set to "px" for pixels. As you position the cursor over the active work area, you will see a pair of numbers. For our purposes, move the cursor to a comfortable vertical position and verify that the left number equals 15. E.G. 15,10.*
4) Position cursor as described above and enter your text. Hit the "Enter" key to start a second line.
#) {Untitled}("Working" [Enter] "Definitions")
5) Select the Alignment Tool (Square with pointers on all four sides).
#) >>{Toolbox}[Alignment Tool]
6) If {Tool Options} has become separated from {Toolbox} Select from Windows.
#) >>Windows->Dockable Dialogs->Tool Options
7)Drag the box over the text we just placed OR Click to Select.
#) Drag a box over the text to select. OR Click to Select.
8)In Tool options select the tile with arrows pointing up and down to the center line [Align middle of target].
#) >>{Tool Options}[Align middle of target]
*NB: I like to save my projects at every step. It makes it easier to restart at an earlier point. The Undo functions of GIMP are excellent but, once in a while you won't be able to go back. Remember that GIMP defaults to "My Documents" It is best to make these decisions early.*
9) Save first copy of your project as AniPic11.xcf Remembering to Create a Project folder in your GIMP Directory.
#) >>File ->SaveAs (AniPic11.xcf)->>(GIMP folder) [Create Folder] (AniPic1) [Enter] [Save/Enter]
*NB: GIMP defaults to "My Documents".*
10) Merge the two layers to create your Base Image.
#) Rt>{Layers}Top Layer ->Merge Down
11) Save again.
#) >>File->SaveAs (AniPic12.xcf)[Save/Enter]
12) Select text tool again and change to Arial and 16 pixels.
In {Toolbox} dialog select [Text Tool] (the "A" Icon).
#) >>{Toolbox }[Text Tool]
In {Tool Options} dialog Click the Font Button and choose Font.
#) >>{Tool Options} [Aa]-> "Arial"
In {Tool Options} dialog Set Size to 16 px.
#) >>{Tool Options} Size = 16 px
In {Tool Options} dialog set Justify to Left.
#) >>{Tool Options} Justify = [Left Justified]
13) Position your mouse at the 127 px mark, (*NB: To the left of the zoom box is your position in pixels.) And enter your text.
#) ->@10,127('text information line')
14) Center vertically. See steps 6, 7 & 8.
15) Save and Increment image. See step 11.
16) Delete text layer Or simply copy over your text section.
17) Select your text tool and repeat steps 13 through 16 until you have created all the panels for the animation. AniPic13 through X *NB: I use the letters after I run out of numbers.
18) Close last working area.
#) >>File->Close
19) Open AniPic13 again.
#) >>File->Open{Open Image}->(Name="AniPic13.xcf")[Open/Enter]
20) Merge layers.
#) Rt>{Layers}Top Layer ->Merge Down
21) Copy to clipboard
#) >>Edit->Copy
22) Close current project without saving. (You may decide to make changes. Easier this way.)
#) >>File->Close
23)Create new project from clipboard.
#) >>File->Create->from Clipboard
24) Save as AniPic131.
#) >>File ->SaveAs (AniPic131.xcf) [Save/Enter]
25) Open next layer. *NB: The new file opens behind the working file.
#) >>File->Open(AniPic1x.xcf)[Open/Enter]
26) Merge layers.
#) Rt>{Layers}Top Layer ->Merge Down
27) Copy to clipboard.
#) >>Edit->Copy
28) Close current project without saving. (You may decide to make changes. Easier this way.)
#) >>File->Close
29)Paste as new layer into AniPic131.xcf.
#) >>Edit->Paste as->New Layer
30) Repeat as necessary steps 25 thru 29.
31) Save as AniPic132.xcf.
#) >>File ->SaveAs (AniPic132.xcf) [Save/Enter]
*NB: I did not like the results of the following step. Instead of continuing, I re-opened AniPic132.xcf and proceeded to step 33.
32) We will be creating a Gif from this. Select Image->Mode->Indexed. In the dialogue box under Colormap, the first radio button "Generate optimum palette" is pre-selected. The "Maximum number of colors" should be 255. This is the optimum number for Gif Files. As I am going for simplicity, I am making no further adjustments. Now click [Convert].
#) >>Image->Mode->Indexed [Convert]
33) Save as AniPic133.xcf.
#) >>File ->SaveAs (AniPic133.xcf) [Save/Enter]
34)The next step is to optimize your file for Gif. Select Filters->Animation->Optimize 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
35) Save as AniPic134.xcf.
#) >>File ->SaveAs (AniPic134.xcf) [Save/Enter]
36) 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 4000 milliseconds (4 seconds) and Checked "Use delay entered above for all frames." I did not worry about "disposal". Next click [Export].
#) >>File->Export('WorkingName.gif') [Export]
#) ->Gif comment (I added my Name, Nove-Noga and the date)
#) [x] As animation
#) [x] Loop forever
#) [x] Set Delay (4000)
#) [x] Use delay entered above for all frames
#) [Export]
Now to make sure everything works as desired. Go to your target directory. Find your new Gif and run or open it. You will want to make a note of the image dimensions for the html entries.
Animated Text Project To Display Multiple Definitions in a Restricted Area.
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!
