Nove-Noga Info Post
Click-by-Click: SOLUTIONS Banner with GIMP
If you found this page useful,Please Like and Share. Thank you.
Nove-Noga!
SOLUTIONS Banner with GIMP. My friend, Jason Yost at SOLUTIONS Indoor Environmental Consulting was looking for something in a more active banner for his advertising efforts. Unlike many marketers at IBO Toolbox, Jason runs a brick and mortar business within a regional area. He wanted something to catch the attention of his audience and promote more direct business in his area. After a little back-and-forth of information and images, we came up with this banner.
Banner Created for Solutions Indoor Environmental Consulting
Using the Free Gimp Tool.
I) Design Phase - Work out the basic structure and script:
468x60 Banner.
9 Frames (First and Last are the Same.)
Logo: 60x60
Header: 176x30
Text: Sans 18 *NB: Sans is default. In this case, I thought it worked.*
Script: The script lines to go with your images to promote your message.
Images: 80x60
II) Preparation - Create the Base Image and select and resize the image portions to be used in the final assembly:
Because this project relies on external images, I am going to assume that you have already created a WorkingFolder in MyDocuments/GIMP and made the images available there. For basic information on these subjects, you may want to start with "GIMP Notation and Descriptions"
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 your GIMP tool.
#) >>GIMP
2) Open a new banner for the project from New Template.
#) >>File ->New v>Template ->Web banner common 468x60 [OK]
3) Save as the first of your GIFimage files in your WorkingFolder.
#) >>File->SaveAs{Save Image}("'GIFimage1.xcf'")("Places"="My Documents")->>("Name"="GIMP")->>("Name"="'WorkingFolder'") [Save/Enter]
Start by resizing the square logo to 60x60 to fit our working area.
4) Open 'LogoFile' in your WorkingFolder.
#) >>File->Open ("Places" = "My Documents") ->>("Name"="GIMP") ->>("Name"="'WorkingFolder'") ->("Name"='Logofile') [Open/Enter]
5) Copy Current Selection to the Clipboard.
#) >>Edit->Copy
6) Create a new Image from the copy.
#) >>File->Create->FromClipboard
7) Scale your new proportional image to desired size. EG: 60x60.
#) >>Image->ScaleImage {Scale Image} Width=60 [Tab] [Scale]
*NB: With a proportional image, just change one dimension, when you hit the [Tab] key GIMP will automatically set the other parameter.*
8) Save as New Image at final size (60x60).
#) >>File->SaveAs ('logofile_60x60.xcf') [Save/Enter]
9) Repeat steps 4 thru 8 for any image already in the proper ratio for their position in the project. Remember to make good notes and use clear names when possible.
*NB: The images that I used on the right hand side of this example are 80x60 having a ratio of 4:3 or 1.33:1. For elements in the wrong ratio, an extra set of steps is involved. *
10) Open next image in 'Project Folder'.
#) >>File->Open ("Name"='original picture') [Open/Enter]
11) Select image area in 4:3 (1.33:1) ratio using [Rectangle Select Tool] from {Toolbox}.
#) >>{Toolbox}[Rectangle Select Tool]
Click a point on the image and Drag a box approximately as desired. As you do so, the size will be displayed at the bottom of your work area. If you need to change it, you can click in each corner and drag it as necessary. When ready, proceed to next step.
12) Copy Selection to the Clipboard.
#) >>Edit->Copy
13) Create a new Image from copy.
#) >>File->Create->FromClipboard
14) Save as New Image at size EG: PicName_240x180.xcf.
#) >>File->SaveAs ('PicName_240x180.xcf') [Save/Enter]
15) Scale your new proportional image to desired size. EG: 80x60.
#) >>Image->ScaleImage {Scale Image} Width=80 [Tab] [Scale]
16) Save as New Image at final size (80x60).
#) >>File->SaveAs ('PicName_80x60.xcf') [Save/Enter]
17) Repeat steps 10 thru 16 for remaining picture elements that need to be adjusted for Ratio as well as size. *NB: The extra saving step just leaves you more options for the future. *
*-*-* Now that the elements are prepared, we create the first or base Frame. For simplicity, we would work from right to left to take advantage of the left hand bias in GIMP. Because we want our changing elements/layers to be at the top of the stack, we will work from Left to right. *-*-*
18) Open or Select your LogoFile_60x60.
#) >>File->Open->("Name"="'LogoFile_60x60'") [Open/Enter] OR >>{"'LogoFile_60x60'"}
19) Copy Selection to the Clipboard.
#) >>Edit->Copy
20) Select your original Blank 468x60 image, {"'GIFimage1.xcf'"} that we started with.
#) >>File->Open->("Name"="'GIFimage1.xcf'") [Open/Enter] OR >>{"'GIFimage1.xcf'"}
21) Paste Selection as New Layer.
#) >>Edit->PasteAs->NewLayer
22) Open or Select your Header_176x30.
#) >>File->Open->("Name"="'Header_176x30'") [Open/Enter] OR >>{"'Header_176x30'"}
23) Copy Selection to the Clipboard.
#) >>Edit->Copy
24) Paste Selection as New Layer in GIFimage1.xcf.
#) >>{"'GIFimage1.xcf'"}->Edit->PasteAs->NewLayer
25) Choose Alignment Tool
#) >>{Toolbox}[Alignment Tool]
26) Click your new image.
#) > (Image Element)
*-*-* By experimentation with the Alignment tool Distribute buttons, I discovered that I liked the balance at the following position. Remember to make notes. *-*-*
27) Set Offset=2 and Distribute top edges of targets.
#) >>{Tool Options} [Offset = 2] [Distribute top edges of targets]
28) Set Offset = -10 and Distribute horizontal edges of targets.
#) >>{Tool Options} [Offset = -10] [Distribute horizontal edges of targets]
29) Set up Text Tool; Font=Sans; Size 18px; Justify=Centered.
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. *NB: Default is Sans.*
#) >>{Tool Options} [Aa]-> "Sans"
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]
30) Click anywhere on your image. Key-in your "Script" line for your first Frame.
#) >>{"'GIFimage1.xcf'"}
Enter your "Script" line for your first Frame.
#) ('script line')
31) Select the Alignment Tool and Click your Script Element.
#) >>{Toolbox}[Alignment Tool] Click element.
*-*-* By experimentation with the Alignment tool Distribute buttons, I discovered that I liked the balance at the following position. *-*-*
32) Set Offset= -4 and Distribute bottoms of targets.
#) >>{Tool Options} [Offset = -4] [Distribute bottoms of targets]
33) Set Offset = -10 Distribute horizontal edges of targets.
#) >>{Tool Options} [Offset = 2] [Distribute horizontal edges of targets]
34) Save new image as a subsequent of previous. EG: GIFimage1.xcf becomes GIFimage2. xcf.
#) >>File->SaveAs->('GIFimage2.xcf') [Save/Enter]
*-*-* This completes the creation of the base portions of the project. We will create the desired frames by using GIFimage2.xcf as a base and saving them as the Frames we need. *-*-*
III) Creation - Working from the Base Image {"'GIFimage2.xcf'"}, create each Frame that will be used in the final GIF:
35) Open or Select your first Frame image 'PicName_1_80x60'.
#) >>File->Open->("Name"="'PicName_1_80x60'") [Open/Enter] OR >>{"'PicName_1_80x60'"}
36) Copy Selection to the Clipboard.
#) >>Edit->Copy
37) Paste Selection as New Layer in GIFimage2.xcf.
#) >>{"'GIFimage2.xcf'"}->Edit->PasteAs->NewLayer
38) Choose Alignment Tool
#) >>{Toolbox}[Alignment Tool]
39) Click your new image.
#) > (Image Element)
40) Align right edges of targets. (Move image to Right Side.)
#) >>{Tool Options} [Align right edge of target]
41) Save current as first Frame of your final GIF Project. EG: GIFframe01.xcf. #)
>>File->SaveAs->('GIFframe01.xcf') [Save/Enter]
*-*-* There are a couple of primary options for our next set of steps. You could reopen 'GIFimage2.xcf' and edit the text, add the next image and save as the next frame. Instead we are going to work with the current frame and save each new image as the subsequent of the previous. *-*-*
42) Open or Select your next Frame image 'PicName_?_80x60'.
#) >>File->Open->("Name"="'PicName_?_80x60'") [Open/Enter] OR >>{"'PicName_?_80x60'"}
43) Copy your new image to the clipboard.
#) >>Edit->Copy
44) Select our current Frame. Right Click the previous image clipboard layer and choose Delete Layer from the menu.
#) >>{'GIFframe01.xcf'} Rt>{Layers-Gradients}[Clipboard (for image)] ->DeleteLayer
45) Paste (New Image Copy) as New Layer.
#) >>Edit->PasteAs->NewLayer
*NB: If you want to place it in a certain place in the stack, select the layer you want it to appear above.*
46) Choose Alignment Tool
#) >>{Toolbox}[Alignment Tool]
47) Click your new image.
#) > (Image Element)
48) Align Right Edge of Target.
#) >>{Tool Options}[Align right edge of target]
49) Right Click the Text Layer in {Layers-Gradients} and Choose Text Tool from the menu.
#) >>{'GIFframe01.xcf'} Rt>{Layers-Gradients}['text script line'] ->TextTool
50) Click on the 'Text Script Line' and change it to the next line of the script.
#) Be brave, you will figure it out. Nove-Noga.
51) Save new image as a subsequent of previous. EG: GIFframe01.xcf becomes GIFframe02.xcf.
#) >>File->SaveAs->('GIFframe02.xcf') [Save/Enter]
52) Repeat steps 42 thru 51 as necessary. The advantage to doing it this way is that you do not have to reopen your base image time after time. Feel free to try the other method if you wish. Once all your frames are prepared, continue to the next step.
IV) Assembly - Using the created Frames, Assemble the final GIF:
53) Open or Select your first Frame image 'GIFframe01.xcf'.
#) >>File->Open->("Name"="'GIFframe01.xcf'") [Open/Enter] OR >>{"'GIFframe01.xcf'"}
54) Select the current frame and Merge all layers together.
#) >>{"'GIFframe01.xcf'"}->Image->MergeVisableLayers {Merge Layers} (x) Clipped to Bottom Layer [Merge]
55) Flatten Image
#) >>Image->FlattenImage
*NB: You may want to save the result to a new file because we plan to reuse the first layer. Otherwise, I do not save this image so that I can easily make changes.*
56) Copy prepared Panel.
#) >>Edit->Copy
57) Create a new file from the Clipboard.
#) >>File->Create->FromClipboard
58) Save as the next subsequent of your GIFimage.
#) >>File->SaveAs->('GIFimage3.xcf') [Save/Enter]
*-*-* Continue to add the Frames to your new Gifimage. *-*-*
59) Open or Select your next Frame image 'GIFframe02.xcf'.
#) >>File->Open->("Name"="'GIFframe02.xcf'") [Open/Enter] OR >>{"'GIFframe02.xcf'"}
60) Select the current frame and Merge all layers together.
#) >>{"'GIFframe02.xcf'"}->Image->MergeVisableLayers {Merge Layers} (x) Clipped to Bottom Layer [Merge]
61) Flatten Image.
#) >>Image->FlattenImage
*NOTE: DO NOT SAVE!!! It is okay to save to a new file if you want but it is best to leave this as it was so that you can easily make changes.*
62) Copy prepared Panel.
#) >>Edit->Copy
63) Select your GIFimage3.xcf and paste new layer.
#) {GifFile1.xcf} >>Edit->PasteAs->NewLayer
64) Repeat steps 59 thru 63 as necessary. Remember, to get the "double time" on my first Frame, I repeated it as the last Frame.
V) Export - Make the final adjustments and Export your finished project to a GIF file:
65) Review your sequencing. Choose Animation Playback from Filters and Step your way through the sequence. The default play is 100ms per step.
#) >>Filters->Animation->Playback.
66) Save your new Gif File as a subsequent of the previous.
#) >>File->SaveAs->('GIFimage4.xcf') [Save/Enter]
67) Prepare the new file to create a GIF. This will create a new file.
#) >>Filters->Animation->Optimize for GIF
68) Save the Optimized File as the next in sequence. EG: GIFimage5.xcf.
#) >>File->SaveAs->('GIFimage5.xcf') [Save/Enter]
69) Export your new file to GIF.
#) >>File->Export(GIFimage5.gif)[Export/Enter]
#) Byline = "Created with GIMP at Nove-Noga by Curtiss Martin"
#) [x] As Animation
#) [x] Loop Forever
#) Delay = [1500] ms
#) [x] Use delay entered above for all frames.
#) [Export]
A little note on GIMP. The default directory is My Documents. You should take care where your files are going but when you cannot find them, try My Documents.
Banner Created for Solutions Indoor Environmental Consulting
Using the Free Gimp Tool.
Consider how you can use some of the Images that you have to create a striking animated banner for your own efforts. Even if you are part of a larger marketing organization, there are often advantages in having Graphics that are unique to you. Nove-Noga!
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!
