Nove-Noga Info Post
GIMP Notation and Descriptions
If you found this page useful,Please Like and Share. Thank you.
Nove-Noga!
*-*-* GIMP Notation and Basics *-*-*The *Free GIMP tool can be downloaded at the Primary GIMP site. There are many others offering to handle your download for your but I recommend going to the source.
*Free Means Free!
There are other tutorials and information available. Simply, search "GIMP" to see what is available. I discovered GIMP through Instructables, another great site for information and techniques. I use GIMP to create all of my Graphics for the Nove-Noga Website. You can see examples and references to Instructionals on the Nove-Noga GIMP page.
The first twenty times that I looked at the GIMP tool, I found it overwhelming. The Instructions appear to be written by the programmers and I always felt like there were several assumptions that I was not aware of. I was in desperate need of a FavIcon for my Nove-Noga Website and, having been presented with a tool to convert images to FavIcons, decided it was time to dive in.
In the process, I made notes and published my first GIMP Instructional at IBO Toolbox. With changes there during June of 2013, it was becoming more difficult to write actual Click-By-Click Instructionals. All of the new Instructionals will be posted as Nove-Noga Info Posts. Please spread the word.
These are the Notation Methods that I have developed to keep from getting crossed up by blog editors. You may even find them useful in other formats.
*-*-* Shortcuts To GIMP Techniques *-*-*
Notation Methods
Basics - Getting Started with GIMP
Open Files
Saving Files
New Files
Export Files
Foreground and Background Colors
Move Tool
Alignment Tool
Merge Layers
Copy and Paste
Go to top
*-*-* 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 Curly Brackets "{ }" denote "Dockable Dialogs" or "windows".
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 double 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: Text Tool Icon 'A') or a loose reference to a file name. (EG: 'working file'.xcf)
[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,...
There are a few things that it is useful to know from the beginning.
A) The default directory for your GIMP Files is "My Documents". Whenever you "lose" a file, check there.
B) If you start using GIMP as much as I have, you will want to establish your organization early. I created a GIMP directory in "My Documents" and create a separate folder/directory for each project. Once you have Opened and Saved to your 'Working Folder/Directory' you should have no further problems for the Session.
C) While the default directory is "My Documents", the first time you open files for the session, you will be presented with your most recent projects. I usually open the desired directory manually so that I am certain of my work area.
D) Each file is opened behind the {window} you used to open it with the exception of the first file which is opened onto your work area. This makes it easy to open several files that you are going to use in the current project.
E) GIMP works using ".xcf" files. The final step in Every Project is to EXPORT the final result. The default is to ".png" even when you are doing animation. Take care to choose the right extension, ".png", ".jpg" or ".gif" for your project. *NB: Animation is Always ".gif".*
F) GIMP has great "Undo" capability. You can even undo individual brush strokes. Nevertheless, I suggest that you save you project in some form of "subsequent" notation. For simple projects a single digit may be enough (ThisProj_1, This Proj_2, ..., ThisProj_9). For more complex projects, you may need to get more creative. If you decide to change your direction, it is easy to go back to a certain point and start a new string (ThisProj_2, ThisProj_21, This Proj_22,..., ThisProj_29)
G) I recommend that you take good notes on your efforts, especially on the fonts and sizes that you use as well as any positioning offsets that you use. Graphics for your website and online efforts is about more than making pretty pictures. It is often about creating your Brand Image and maintaining continuity. You may have noticed that the Major Brands are slow to make changes and that those changes usually evolve out of their previous efforts.
By now you may be wondering if GIMP is worth your efforts. I firmly believe that it is. I have been able to do things with GIMP that many say they are not able to do with their expensive graphics suites. Once you learn the basics with GIMP there may be no limits on what you are able to achieve. It is a simple case of Nothing Ventured - Nothing Gained. Nove-Noga!
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Notation methods *-*-*
Go to top
*-*-* Basics - Getting Started with GIMP *-*-*
Getting Started with GIMP
1) Download your *Free copy of GIMP from http://www.GIMP.org
2) Install your *Free copy of GIMP on your computer.
3) Fire up your *Free GIMP, GNI Image Manipulation Program.
#) >>GIMP
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Basics - Getting Started with GIMP *-*-*
Go to top
*-*-* Open Files *-*-*
Open Your GIMP Files
Open Files:
#) >>File->Open
The open command opens the {Open Image} dialog box in your system. If it is your first search of the day it will default to your most recent projects. The Default Directory/Folder for GIMP is My Documents. I recommend that you set up a GIMP folder in My Documents and use individual folders in the GIMP directory for each project.
When I open a file, the {Open Image} Dialog box on my system is bigger than my screen. I have to manually adjust it to make it small enough to fit.
Manual adjust: Position Cursor at top edge of {Open Image} when the double ended arrow appears, Click and pull the top edge down. Repeat with the left edge. Click on the top bar of {Open Image} to drag it into a position on your screen to see the entire {Open Image} dialog box.
*-*-*-*-*
First Open from your GIMP work area:
Opening an image in a GIMP project, MyDocuments/GIMP/WorkArea;
From the Menu, Select File; Select Open
#) >>File->Open
As described above, this opens the {Open Image} dialog. Adjust as necessary. The default {Open Image} screen shows most recently opened projects or images.
Under "Places" Select "My Documents"
#) >("Places"="My Documents")
Under "Name" DoubleClick "GIMP"
#) ->>("Name"="GIMP")
Under "Name" DoubleClick "'WorkArea'"
#) ->>("Name"="'WorkArea'")
Under "Name" Select 'original pic' and Click/Hit[Open/Enter] or DoubleClick 'original pic'.
#) ->("Name"='original picture') [Open/Enter] or ->>("Name" = 'original picture')
*NB: When you save this Image, it will default back to this source directory/folder.*
When written as a single detailed statement, the above would read as:
#) >>File->Open ("Places"="MyDocuments") ->>("Name"="GIMP") ->>("Name"="'WorkArea'") ->("Name"='original picture') [Open/Enter]
*-*-*-*-*
First Open from another area:
Opening an image in another part of the computer, Desktop/Nove-Noga/GIMP;
From the Menu, Select File; Select Open
#) >>File->Open
As described above, this opens the {Open Image} dialog. Adjust as necessary. The default {Open Image} screen shows most recently opened projects or images.
Under "Places" Select "Desktop"
#) >("Places"="Desktop")
Under "Name" DoubleClick "Nove-Noga"
#) ->>("Name"="Nove-Noga")
Under "Name" DoubleClick "GIMP"
#) ->>("Name"="GIMP")
Under "Name" Select 'original pic' and Click/Hit[Open/Enter] or DoubleClick 'original pic'.
#) ->("Name"='original picture') [Open/Enter] or ->>("Name" = 'original picture')
*NB: When you save this Image, it will default back to this source directory/folder.*
When written as a single detailed statement, the above would read as:
#) >>File->Open ("Places"="Desktop") ->>("Name"="Nove-Noga") ->>("Name"="GIMP") ->("Name"='original picture') [Open/Enter]
Subsequent Opens:
Once you have GIMP pointed in the right direction, things become much easier.
From the Menu, Select File; Select Open; Select file; Click/Hit [Open/Enter].
#) >>File->Open->("Name"='original picture') [Open/Enter]
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Open Files *-*-*
Go to top
*-*-* Saving Your GIMP Files *-*-*
Saving Your GIMP Files
Save Files:
#) >>File->SaveAs
The default filename for GIMP is "Untitled.xcf" This can quickly become confusing. I recommend saving your files as some sort of group, with incremental numbers to track your steps. For this reason, the usual statement is SaveAs. Remember Not to change the extension as you are working on the files. You will use the Export function to perform that final step.
First Save:
From the Menu, Select File; Select SaveAs; Change "Untitled.xcf" to 'projectName#.xcf' where the "#" in this position indicates your number in sequence. *NB: You may want three positions for long projects.*
#) >>File->SaveAs ('projectName#.xcf') [Save/Enter]
Opens the {Save Image} Dialog box. Like the {Open Image} Dialog box, the {Save As} Dialog box is too big for my screen. Adjust as necessary. On the first save of any opened file, it will default to the location where you Opened it. Choose your target carefully. If it is the first item in the Project, you may need to create a folder for it.
Under "Places" Select "My Documents"
#) ->( "Places" = "My Documents")
Under "Name" Double Click "GIMP"
#) ->>("Name" = "GIMP")
*NB: This assumes you already created a GIMP Folder. If not, you should do so now.*
If this is a new project Click [Create Folder] on the right side of the dialog box.
#) ->[Create Folder]
*
Then, enter the ('project folder') and hit [Enter]; then Click/Hit [Save/Enter] to complete the save.
#) >('project folder')[Enter] [Save/Enter]
*
Else, under "Name" Double Click "'project folder'".
#) ->>("Name" = "'project folder'")
#) [Save/Enter]
When written as a single detailed statement, the above would read as:
#) >>File->SaveAs ('projectName#.xcf') ->( "Places" = "My Documents") ->>("Name" = "GIMP") ->[Create Folder] >('project folder')[Enter] [Save/Enter]
OR
#) >>File->SaveAs ('projectName#.xcf') ->( "Places" = "My Documents") ->>("Name" = "GIMP") ->>("Name" = "'project folder'") [Save/Enter]
*-*-*-*-*
Subsequent Saves:
Once you have GIMP pointed in the right direction, things become much easier.
From the Menu, Select File; Select SaveAs; Increment the name; Click/Hit [Save/Enter].
#) >>File->Open->("Name"='projectName#+1') [Open/Enter]
*NB: If you "lose" a file, try looking in "MyDocuments".*
When preparing for a new project using other images or prepared graphics, I will usually create the new 'WorkArea' in my GIMP folder under MyDocuments and then copy the necessary files to the new 'WorkArea'.
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Saving Your GIMP Files *-*-*
Go to top
*-*-* New Files *-*-*
Creating New GIMP Files
New Files:
#) >>File->New
This is frequently your starting place for any new project.
#) >>File->New
Opens the {Create a New Image} Dialog box. You have a wide range of options. I recommend checking the Template DropDown menu to see if there is already something in the size you are looking for. Please note that web images are usually in a 72ppi (Pixels Per Inch) format and that printed media are usually in the 300 ppi format.
New Banner:
To create a new 468x60 banner, select the web banner from the {Create a New Image} Template DropDown Menu.
#) >>File->New{Create a New Image}>v Template[Web banner common 468x60] [Okay/Enter]
New Project not on the Template list:
My first project was the FavIcon for the Nove-Noga site. For this I chose to create a 64x64 image which I could then use to create a FavIcon.
#) >>File->New{Create a New Image} Width=64 Height=64 [Okay/Enter]
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End New Files *-*-*
Go to top
*-*-* Export Files *-*-*
Exporting Usable GIMP Files
Export File:
#) >>File->Export
In order to use your new GIMP project, it is likely that you will need to Export the image to one of three basic formats. These are the default, ".png", ".jpg" and for Animation, ".gif".
Export as PNG:
The default is PNG. For this you will not need to change the extension. In {Export Image} simply hit Enter. That will take you to {Export Image as PNG}. In most cases you will not want to make any changes. Simply hit Enter again to complete the process. The results will be in the folder/directory indicated by {Export Image}.
#) >>File->Export [Export/Enter] {Export Image as PNG}[Export/Enter]
For Advanced users, {Export Image as PNG} has the following options. (Shown as standard)
[ ] Interlacing (Adam 7)
[x] Save background color
[ ] Save gamma
[ ] Save layer offset
[x] Save resolution
[x] Save creation time
[x] Save comment
[x] Save color values from transparent pixels
Compression level: >v[ 9]
[Load Defaults] [Save Defaults]
[Help] [Export] [Cancel]
As noted above, I usually just go with the defaults. Click/hit [Export/enter]
*-*-*
Export image as JPEG:
Select File; select Export. In {Export Image} change the file extension from ".png" to ".jpg" then hit Enter. That will take you to {Export Image as JPG}. In most cases you will not want to make any changes. Simply hit Enter again to complete the process. The results will be in the folder/directory indicated by {Export Image}.
#) >>File->Export(NewPic.jpg)[Export/Enter]{Export Image as JPEG}[Export/Enter]
For Advanced users, {Export Image as JPG} has the following options. (Shown as standard)
Quality" >v[90]
File size: unknown
[ ] Show preview in image window
Advanced Options
[Load Defaults] [Save Defaults]
[Help] [Export] [Cancel]
As noted above, I usually just go with the defaults. Click/hit [Export/enter].
*NB: Advanced Options is where you can change your comment as well as some of the other parameters. Experiment carefully. If it's not broke, do you want to fix it? Except, this is where you can set up your byline and save it to defaults.
*-*-*
Export as GIF:
All animation must be saved as GIF. Animations are created by having multiple layers in the same project. Select File->Export-> Choose your Name and set extension to Gif "name.gif" and hit [enter]. This will bring up {Export Image as GIF}. Unlike the other formats, you will need to make changes. This is an example from my simple animation project. 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]
{Export Image as GIF}
[ ] Interlace
[x] GIF comment = "Created with GIMP at Nove-Noga by Curtiss Martin"
[x] As Animation
[x] Loop Forever
Delay = [2000] ms
Frame disposal where unspecified: >v[I don't care ]
[x] Use delay entered above for all frames.
[ ] Use disposal entered above for all frames.
[Help] [Export] [Cancel]
GIMP will allow you to set up your Animation with differential timing on your frames. You will specify these in your creation of the project. See my Instructional on Complex Timing Animation Banner with GIMP
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Export Files *-*-*
Go to top
*-*-* Foreground and Background Colors *-*-*
Setting GIMP Colors
You can easily set your GIMP Foreground and Background colors. The same tool is used to set colors in other tools as well. See the Text tool for a good example.
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 0000ff) [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 Background Color} (HTML 00bfff) [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.*
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Foreground and Background Colors *-*-*
Go to top
*-*-* Move Tool *-*-*
The GIMP Move Tool
Move Tool:
The {Toolbox}[Move Tool] can be used to manually move Elements in the work area.
Select the [Move Tool] from {Toolbox}
#) >>{Toolbox}[Move Tool]
Select ('desired element/layer') from {Layers-Gradients}
#) >>{Layers-Gradients}('desired element/layer')
Position Cursor over selected element and shift+click to drag the element to desired position.
#) ^>('selected element') Drag to desired position.
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Move Tool *-*-*
Go to top
*-*-* Alignment Tool *-*-*
The GIMP Alignment Tool
Alignment Tool:
The {Toolbox}[Alignment Tool] ('Box with four arrows pointing out') can be used to automatically move the selected element with respect to the first or designated element. In {Options} there are two sets of Tiles for various actions. The top set offers alignment options Relative to selected elements. The bottom set offers options to Distribute alignment with a designated Offset. Select the element by Clicking it.
#) >>{Toolbox}[Alignment Tool] Click element.
Relative Options:
a) Align element to Left Edge of Target relative to First item.
#) >>{Tool Options}[Align left edge of target]
b) Center element horizontally relative to First item.
#) >>{Tool Options}[Align center of target]
c) Align element to Right Edge of Target relative to First item.
#) >>{Tool Options}[Align right edge of target]
d) Align element to Top Edge of Target relative to First item.
#) >>{Tool Options}[Align top edge of target]
e) Center element vertically relative to First item.
#) >>{Tool Options}[Align middle of target]
f) Align element with Bottom Edge of Target relative to First item.
#) >>{Tool Options}[Align bottom of target]
Distribute Options: Compensate with Offset.
a) Distribute Left Edges of Target with Offset relative to First item.
#) >>{Tool Options}[Distribute left edges of target]
b) Distribute horizontal centers of targets with Offset relative to First item.
#) >>{Tool Options}[Distribute horizontal centers of targets]
c) Distribute Right Edges of Targets with Offset relative to First item.
#) >>{Tool Options}[distribute right edges of targets]
d) Distribute Top Edges of Targets with Offset relative to First item.
#) >>{Tool Options}[Distribute top edges of targets]
e) Distribute vertical centers of targets with Offset relative to First item.
#) >>{Tool Options}[Distribute vertical centers of targets]
f) Distribute bottoms of targets with Offset relative to First item.
#) >>{Tool Options}[Distribute bottoms of targets]
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Alignment Tool *-*-*
Go to top
*-*-* Merge Layers *-*-*
Merge GIMP Image Layers
Merge:
It is common to Merge Layers to create element blocks and as the final step in a project.
In {Layers-Gradients} right-click on the top layer that you want to merge down, Select Merge Down from the Menu Display. Repeat as necessary.
#) Rt>{Layers}Top Layer ->Merge Down
#) Repeat as Necessary
For examples of my GIMP projects and links to my Click-by-Click Instructionals go to http://nove-Noga.com/GIMP.html
*-*-* End Merge Layers *-*-*
Go to top
*-*-* Copy and Paste *-*-*
Copy to Paste as New Layers
Copy and Paste:
You frequently need to copy elements to paste in different projects or to create duplicate elements. Make sure the image desired is selected.
Copy this image to your clipboard.
#) >>Edit->Copy
Create a new Image from copy.
#) >>File->Create->FromClipboard
Paste your Clipboard as a new layer.
#) >>Edit->PasteAs->NewLayer
There are other options. Feel free to experiment.
*-*-* End Copy and Paste *-*-*
As I have been working on my GIMP projects, I have learned the importance of two processes. First take good notes of every decision that you make. When you are done for the day, summarize your decisions regarding Font choices and Size, Color choices and anything you May consider re-using. Second, when designing a project, create its own folder and save every single step in the process. Next year, when you are running out of space, you will have a better idea of what you can discard.
When I first opened the *Free GIMP tool I found it extremely intimidating. I started small, with a Favicon for my site. Every graphic with the Nove-Noga logo on it has been created with the GIMP tool. Sure, you can have others do your graphics. Perhaps it even makes sense for you. But when you are starting to build your brand, having full control over your graphics can make a big difference.
*-*-*-*-*
Go to top
*-*-*-*-*
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!
