Nove-Noga Info Post

Free Nove-Noga Banner with GIMP.

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

A Simple Text Banner For Nove-Noga.

If you like doing things yourself, or if you are simply working on a limited budget, this exercise will allow you to make a banner for *Free using GIMP. GIMP the GNU Image Manipulation Program is available for *Free.
*Free Means Free!



I am going to describe, Click-by-Click, how I created the simple Free banner that I first used on my IBO Toolbox Advertising.

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"

*-*-*-*-*-*

*NB: My GIMP tool started with the Dockable Dialogs for Toolbox and Tool Options connected together. Thus I am showing them as {Toolbox - Tool Options}. At some point, became disconnected. Please forgive any confusion this may cause.*

1) Fire up the GIMP:
#) >>GIMP
*NB: It should open with the work area and the "Dockable Dialogs" for {Toolbox - Tool Options} and {Layers - Gradients}. GIMP uses many "Dockable Dialogs" for various control functions. To see the variety available, Select Windows->Dockable Dialogs. You do not need to worry about more than {Toolbox - Tool Options} and [Layers - Gradients] for the current project.*

2) Open a new banner file From the dropdown Template: Select Web banner common 468x60.
#) >>File->New{Create a New Image}>vTemplate = (Web banner common 468x60) [OK/Enter]

3) Select Foreground and Background colors: (Default is Black on White.)
In {Toolbox- Tool Options} Choose the Foreground Icon, Set your Color and Click [OK].
#) >>{Toolbox- Tool Options}[Foreground Panel] {Change Foreground Color}(HTML 'Your Choice') [OK]
*NB: At the bottom of the tool palette are two rectangles positioned one over the other. Naturally the one in front is foreground. Click it and choose the foreground color from the popup tools or enter the HTML notation. [OK]*

Then repeat for the background color:
In {Toolbox- Tool Options} Choose the Background Icon, Set your Color and Click [OK].
#) >>{Toolbox- Tool Options}[Background Panel] {Change Foreground Color}(HTML 'Your Choice') [OK]
*NB: One of the nice things about GIMP is that it will remember recent colors so that you only need to choose from the tiles displayed.*

4) Fill Background: Choose the "Bucket Fill tool" from the {Toolbox - Tool Options}.
(The paint can to the right of the text "A") In the tool options menu under "Fill Type" choose "BG color fill". Then click your new banner space to fill it with the background color.
#) >>{Toolbox-Tool Options}[Bucket Fill]
#) >>{Tool Options} [Radio Button - BG Color Fill] [Your New Banner Space]
*NB: You could wait until later to do this but I like to make sure the colors are doing what I want.*

5) Begin Text additions to banner: Select the "Text Tool", the "A" to the left of the "Bucket Fill tool" from the {Toolbox- Tool Options}. Then in the {Tool Options} below, click the font button [Aa] located just below the word "Text". Choose your font from the drop down list. I am going with "Alba Matter". Next I set the Size to 18. Click on your banner area where you want the text to appear. (Don't worry, you can move and adjust it after your text is visible.) I want to display the words "Nove" and "Noga" one over the top of the other so I placed a "carriage return" (Hit the Enter Key) between the two words. Next, I position the new text by clicking on the handles and moving it into place. If you want to change the Font or text size use the {Tool Options} Dock.
The following is the Notation for the above process:

Set up Text Tool; Font=Alba Matter Size 18px
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]-> "Alba Matter"
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]

6) Set additional lines of text: Click another target area on your banner for your next line of text. (Do not worry if they don't land exactly where you wanted. We will adjust the vertical after we place the lines.) I chose to use different fonts for each text entry. Select your new Font and Text size. I also chose "centered" from the "Justify" options below the color. Click on the target area again and begin entering your new line of text. By making the text-box the width of the work area, (From the right side of Nove-Noga to the right side of the banner shape.) I am able to center it on my target.

Repeat above for Lines 2 and 3.

7) Adjust your lines vertically by eye with the "Move Tool": Choose the "Move Tool" from {Toolbox - Tool Options}. (Crossed Arrows icon.) Next, select the line to be moved from {Layers - Gradients} and shift-click and hold on the selected text to move it up and down to the desired position.
#) >>{Toolbox}[Move Tool]
#) >>{Layers-Gradients}('target line')
#) ^>('selected text')move to desired position
*NB: If, when you created your text, you set your text box to the width of the target area and justify to "centered" then it will be easy to set the alignment. All you have to do is achieve a pleasing vertical balance.*

For alternative methods of adjustment see: "GIMP Notation and Descriptions"

8) Save your masterpiece: Select File->Save (Please note that it is untitled.xcf and the current directory may not be the place you want this to land.) Give it a useful name but DO NOT change the extension yet. (It will be easier to make changes with this original file.) Select your target directory. For some reason, probably my screen size, I cannot see the save button. When you have selected your directory and set the name just hit [Enter]. You will note the new name in the header of your work area.
#) >>File ->SaveAs (Banner.xcf)->>(GIMP folder) [Create Folder] (Banner) [Enter] [Save/Enter]

9) Export your masterpiece to an image format: Select File->Export... The default will be a .png extension. You could choose to set it to .png, .jpg or .gif for a banner. The name and directory should be the same as the previous save. Hit [Enter] when ready to save it to the new format. A Dialog box will pop up. Click [Export]. Go to that directory and verify that your new banner is existent and as desired. It is easy to make changes and repeat steps 8 & 9 as needed.
#) >>File->Export(Banner.jpg)[Export]{Export Image as Jpeg}[Export]

10) Ad New Banner to IBO Toolbox: Simple method. On IBO Toolbox, Choose "IBO ADVERTISING". In the AD EDITOR enter your Ad Name. From the Ad Type DropDown choose Banner. Click on "upload banner graphic". Browse for your new banner. (NB: It must be in .png, .jpg or .gif format) Then click [Next]. If we have done everything correctly, when IBOTOOLBOX Imager pops up, it will show the original as 468x60. Click [Finish]. Click the radio button for Banner Graphic (The Banner displayed in the dropdown box should be the one you just uploaded.) Choose your banner placement.(Where you want advertising to run.) Enter the Target URL for your new banner. Set your Ad Display Throttle. Then click [SAVE NEW AD]. NB: The complex method involves uploading your banner to your site image folder and providing the reference for your new ad.

For detailed instructions see: Posting Your First Banner at IBO Toolbox V2.0

11) Test and Activate your new ad: Your new ad will show on the list below the credits and impressions bar. First, ALWAYS test your new ad. Locate your ad. Click on the [PREVIEW] button to view your new ad. If it shows properly in the display, then everything is good to this point. Next, click your new ad and verify that it goes to your target URL the way you want it to. If you have a problem, you will have to figure out your error and correct it. Mine worked so I turned off my old ad and turned on the new one.

A Simple Text Banner For Nove-Noga.

*Note: You can run more than one Ad at a time on IBO Toolbox. It is interesting to see them change as you access your pages.*

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!