Nove-Noga Info Post
A Simple GIMP Animation for Nove-Noga
If you found this page useful,Please Like and Share. Thank you.
Nove-Noga!
A Simple GIMP Animation for Nove-Noga.My website is a work in progress. I know the direction I want to go but I am still finding my own path. One of the things that I wanted to experiment with was animation. I was also aware of the need for images, logos, etc. to use on the site.
I was lucky enough to find the Free* GIMP (GNU Image Manipulation Program).
*Free Means FREE!*
I have been using it to create a simple banner, tiles for buttons and links on the site and various other images. It is an incredibly powerful program that was very intimidating the first times that I fired it up. Finally I just dove in and I have been sharing my experience as I go along.
You may wonder why I started writing these with such limited experience. I have noticed that the Experts tend to forget the small but important steps when they explain the processes that they know so well.
When I was creating the simple Tiles to use for images and buttons on my website, I was also considering the possibility of using them for animation. I found a very interesting tutorial that I was able to parse for the instructions to make my own Simple Animation with GIMP. http://www.tutorialboneyard.com/Pages/GimpGifxray.aspx 
Previously, as mentioned above, I have created a group of tiles to correspond with some of my site pages. They are based on the same frame with different titles. They are all 110px by 80px. Now I am going to use them to create a simple animation. 
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) First, Fire up the GIMP.
#) >>GIMP
*NB: On your first file open, GIMP defaults to most recent files created. I recommend deliberate selection of your target directory/folder.*
2) Open the first of the existing tiles. Select, File from the menu, Select Open**. Choose your first tile from MyDocuments/GIMP/Tiles.
#) >>File->Open("Places" = "My Documents")->>("Name" = "GIMP")->>("Name" = "Tiles")->("Name" = "Tile1.xcf")[Open/Enter]
*This is the kind of thing that gets 'Lost' by habit. You will note that I do not mention this again in these instructions.*
**NB: In my copy of GIMP 2.8.0 the Dialogue Box for Files is oversized. I had to manually resize the box to see all of the content.**
3) In the {Layers-Gradients}* Dockable Dialogue there will be a display of the tile I have already created, displayed as the various layers. Right-click on the first layer and select Merge Down. Repeat for each layer until you only have one layer.
#) Rt>{Layers-Gradients}(top line of text)->MergeDown
#) Repeat as necessary.
*NB:If you cannot see {Layers-Gradients} you might have closed it during a previous use. Select Windows->Recently Closed Docks->Layers to reopen the Dockable Dialogue.*
4) Now we need a copy. Select Edit->Copy.
#) >>Edit->Copy
5) It is time to open our Animation project. (You need to have something on the clipboard to take this step.) Select File->Create->From Clipboard. This will automatically create a new "Untitled" file with the notation "Pasted Layer" in {Layers-Gradients}.
#) >>File->Create->FromClipboard
6) Close your first tile Without saving changes. You want to keep it whole for changes in the future. This will leave you with your new Untitled project.
#) {Tile1.xcf}>>File->Close [Without Saving]
7) Select File->Open and select your second tile. Your newly opened tile will be behind the Untitled project that you are working on. Select the opened tile to bring it forward. Merge the layers as above. Then copy the layer. Select Edit->Copy. Now close this second tile Without Saving.
#) >>File->Open->("Name" = "Tile2.xcf")[Open/Enter]
#) {Tile2.xcf}
#) Rt>{Layers-Gradients}(top line of text)->MergeDown
#) Repeat as necessary.
#) >>Edit->Copy
#) >>File->Close [Without Saving]
8) On your Untitled Project Select Edit->Paste As->New Layer. This will show on your animation project as Clipboard.
#) {untitled.xcf}>>Edit->PasteAs->NewLayer
9) Repeat steps 7 & 8 as necessary until you have all of your panels pasted onto this project.
*-*-* Save your new image. (Please note that it is untitled.xcf and the default directory may not be the place you want this to land.) Give it a useful name but DO NOT change the extension. (It will be easier to make changes with this original file.) Select your target directory. Create a new project folder by clicking [Create Folder] and entering your project name. For some reason, probably my screen size, I cannot see the save and create folders buttons. I manually resize the window so that I can see both. Click [Save] to save your file in your new folder. You will note the new name in the header of your work area. *-*-*
10) Save new image to Tiles work area.
#) >>File->SaveAs(TileAni1.xcf)->> ("Name" = "GIMP")->>("Name" = "Tiles")[Save/Enter]
11) 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
#) [x] Generate Optimum Palette - Maximum number of colors = [255]
#) [Convert]
*NB: I highly recommend saving the steps in your project. While you can generally Undo any mistakes, if you change plans in the middle, it helps to be able to go to that step and restart.*
12) Save new image.
#) >>File->SaveAs(TileAni2.xcf) [Save/Enter]
13) 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
12) Save new image again.
#) >>File->SaveAs(TileAni3.xcf) [Save/Enter]
Now it is time to Export our Masterpiece as a GIF. Select File->Export-> Choose your Name and set extension to Gif "name.gif" 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(TileAni.gif)[Export/Enter]
#) Byline = "Created with GIMP at Nove-Noga by Curtiss Martin"
#) [x] As Animation
#) [x] Loop Forever
#) Delay = [2000] ms
#) [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.
Once you have tested your new Animation and are happy with the results, you can choose which of the interim "Untitled" projects to save. Consider whether you may want to make changes and where. Then use your own judgment.
The next step is to upload the new gif to my image file and add the image to my web page where I wanted it to display. The following Attributes are used in my Clickable Image Statement for the Image to the right.Attributes:
href="http://nove-noga.com/"
target="_blank"
src="http://nove-noga.com/images/Nove-Noga.gif"
border="1"
width="110"
height="80"
alt="Nothing Ventured - Nothing Gained. Nove-Noga!"
title="Nothing Ventured - Nothing Gained. Nove-Noga!"
*Note this is an HTML5 Compliant Clickable Image Link. This means that Border, Width and Height attributes are set in the Style attribute as CSS Properties and Values. In addition, the Float Property with the Value of "right" has been set to cause the Image to Float to the right side of the Display.
<a href="http://nove-noga.com/" target="_blank"><img src="http://nove-noga.com/images/Nove-Noga.gif " style="border: 1px solid black; float:right;width:110px;height:80px;" alt="Nothing Ventured - Nothing Gained. Nove-Noga!" title="Nothing Ventured - Nothing Gained. Nove-Noga!" ></a>
This is the HTML5 Code that I can use to place this image into my IBO Toolbox Press Release by Inserting it in HTML Mode. Experiment with your own Images created with the Free GIMP Tool to spice up your Press Releases and Websites. This Simple Animation is a great way to present more information in a small space.
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!
