Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2751
Featured Member: 18 times
Associates: 12662
Wall Posts: 474
Comments Made: 26744
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 84
THIS MONTH: 4322
TOTAL: 560417
are we ibo associates?
member advertising
active associates
Mohammed Sunmonu    
Last logged on: 12/15/2017


Lawrence Rinke    
Last logged on: 12/15/2017


Ken Burwen    
Last logged on: 12/15/2017


Evon Folkes    
Last logged on: 12/15/2017


John Madeira    
Last logged on: 12/15/2017


Allison King    
Last logged on: 12/15/2017


Aleksandar Aleksic    
Last logged on: 12/15/2017


Emmanuel Mba     
Last logged on: 12/15/2017


Wyndham Rees    
Last logged on: 12/15/2017


Roger Eddy    
Last logged on: 12/15/2017


Todd Treharne    
Last logged on: 12/15/2017


Ian Henderson    
Last logged on: 12/15/2017


Shermone Johnson    
Last logged on: 12/15/2017


Rachid Raoui    
Last logged on: 12/15/2017


Debbie Cosby    
Last logged on: 12/15/2017


other ibo platforms








Curtiss Martin   My Press Releases

Complex Timing Animation Banner with GIMP

Published on 5/8/2013
For additional information  Click Here

FavIcon
GIMP Tutorials at Nove-Noga. Nove-Noga.com/GIMP.html Complex Timing Animation Banner with GIMP:
The first step in any project is the planning. For this project, I am going to create three active panels in a standard 468x60 banner. I have eight images that I will need to resize to fit the project. Images 1 & 2 will be 60 pixels high, Images 3 thru 6 will be 40 pixels high and the last two, Images 7 & 8 will be proportional to Images 3 thru 6.

This is going to be an exercise in complex timing. Instead of using the default timing of (100ms) there will be three different timings used in this project. This is my first Networking Made EZ banner created with artwork used to build the NetworkingMadeEZ sites. 

Complex Timing Banner created with GIMP, GNU Image Manipulation Program.

For notation and standard practices and warnings see: “GIMP Notation and Basics


*NB: The actual keystroke instructions will be preceded by “#)”. *

*-*-*-*-*
1) Fire up the *Free GIMP.
#) >>GIMP

2) Open the first image file in the folder containing the original image. Assumption: Images are located on your desktop
#) >>File->Open(“Places”=”Desktop”) ->>(“Name”=’Image1’) [Open/Enter]

*-*-*
The working image will be “untitled.xcf” until you save the file and set the name. We need to scale these images. Image1 & 2 will be height=60 and Image3 thru 6 will be height =40.
*-*-*

3) Scale Image1 & 2 to Height=60 and Image3 thru 6 to Height=40.
#) >>Image->ScaleImage {Scale Image} (Height=60 or 40) [tab key] [Scale]

*-*-*
Choose and enter a working name and save it. Be Sure not to change the xcf extension. Select your working folder before clicking the [Save] button. GIMP returns to the default folder on start-up.
*-*-*

4) Save as a new file “Image1” in our new GIMP Project “NMEZ”
#) >>File->SaveAs(“Places” = ”My Documents”)->>(“Name” = ”GIMP”)[Create Folder](NMEZ)[Enter][Save/Enter]

5) Repeat Steps 2 thru 4 as necessary for Image2 thru Image8

6) Create a New Banner image from the Template dropdown box.
#) >>File->New{Create a New Image}>vTemplate = (Web banner common 468x60) [OK/Enter]

*-*-*
I played with the various text options before settling on this pattern. In the first panel “Networking Made EZ” With Image1 at the end. Font = Times New Roman Bold. Left Offset +20 and Image 1 Right offset -25. *NB: Default color is black and Justify is left.

7) Set up Text Tool; Font=Times New Roman Bold and enter only the first character (N).
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]-> “Times New Roman Bold”
#) >>{Tool Options} Justify = [Centered]
#) ->@0,5(N)

8) Select alignment tool and position first character at Left +20 and centered vertically.
In {Toolbox} dialog select [Alignment Tool]
#) >>{Toolbox}[Alignment Tool]
Shift Click the Element on the Image to select the Element to align.
#) ^>(‘element on image’)
In {Options} Distribute set offset to 20 and select [Distribute Left Edges of Target]
#) >>{Options} Distribute Offset=20 [Distribute Left Edges of Target]
In {Options} Relative to: select [Align Middle of Target]
#) >>{Options} Relative to: [Align Middle of Target]

9) Save as a new file “NMEZ001” in our new GIMP Project “NMEZ”
#) >>File->SaveAs(NMEZ001.xcf)(“Places” = ”My Documents”)->>(“Name” = ”GIMP”)->>(“Name” = “NMEZ”)[Save/Enter]

For purposes of brevity, I am going to give a simplified statement for the next step.

10) Continue Entering “Networking Made EZ” one letter at a time, incrementing the name and saving each step along the way. EG: NMEZ002, 003, …NMEZ018.

11) Open Image1, Copy and paste onto NMEZ018. Then align it right at -25.
#) >>File->Open->>(Image1)
#) >>Edit->Copy
#) >>{NMEZ018}
#) >>Edit->PasteAs>NewLayer
#) >>{Toolbox}[Alignment Tool]
Shift Click the Element on the Image to select the Element to align.
#) ^>(‘element on image’)
#) >>{Options} Distribute Offset=-20 [Distribute Right Edges of Target]
#) >>{Options} Relative to: [Align Middle of Target]
#) >>File->SaveAS(NMEZ019)

This completes the base for the first panel.

12) For the second panel, I constructed the final image using element Image3 thru Image8 then, deconstructed it to create each of the Four Images. To move the Elements in {Layers-Gradients} for proper grouping, Click on the element and drag it to the proper location in the group. These four completed panels make up files NMEZ020 thru NMEZ023.

13) For the Third panel we begin with Image2 set to a Distribute offset of 10 and Distributed from the left edge. After saving file NMEZ024, we begin to add the letters for Networking Made EZ again with a Distribute offset of 100 and Distributed from the left edge. This will create files NMEZ025 thru 42. For NMEZ043 we will add the words “Click Here!” and for NMEZ044 we will replace “Click Here!” with “Start Today!”.

14) Having created each panel, we will go back to the first one and begin assembling our GIF.
#) >>File->Open(NMEZ001.xcf)
#) >>Image->Merge (Setup Discard Transparents.)[Merge/Enter]
#) >>Image->Flatten
#) >>File->SaveAs(NMEZ001mf.xcf)
#) >>Edit->Copy

15) Start the new GIF.
#) >>File->Create->FromClipboard.
#) >>File->SaveAs(NMEZ1.xcf)[Save/Enter]

16) For the remaining images NMEZ002 Thru 44, Repeat Merge and Flatten process saving result and pasting as new layers on NMEZ1. For Images NMEZ43 & 44 Repeat so the final words will read “Click Now!”, “Start Today!”. “Click Now!”, “Start Today!”. “Click Now!”
From the {‘Last File Opened’} (NMEZ’001 thru 043’)
#) >>File->Open(NMEZ ‘002 thru 044’.xcf)
Close {‘Last File Opened’} *NB: Current should default to the one you just opened.*
#) >>Image->Merge [Merge/Enter]
#) >>Image->Flatten
#) >>File->SaveAs(NMEZ’002 thru 044’mf.xcf)
#) >>Edit->Copy
#) >>{NMEZ1.xcf}
#) >>Edit->PasteAs>NewLayer
Repeat this step until complete.

17) Save Completed assembly.
#) >>File->SaveAs(NMEZ2.xcf)[Save/Enter]

*-*-*
18) The standard timing is 100ms. To achieve the delays desired, I changed the timing.
In {Layers-Gradients} Double Click the actual element and add the timing elements “(1000ms)” parenthesis included, to the Layer Name in the {Layer Attributes} dialog.
EG: [Clipboard #15]
Becomes [Clipboard #15(1000ms)]
#) {Layers-Gradients}->>Element Clipboard #15
#) {Layer Attributes}Add timing “Clipboard#15(1000ms)” to Layer name.[OK]

19) Repeat Step 18 with (1000ms) for #16 thru #18 and #37 Thru #41.

20) Repeat Step 19 with (200ms) for #36 and (1500ms) for #19.

21) Save Completed assembly.
#) >>File->SaveAs(NMEZ3.xcf)[Save/Enter]

22) Set the optimum pallet with the image mode.
#) >>Image ->Mode ->Indexed Generate optimum palette
#) Maximum number of colors (255)
#) Color Dithering (Positioned)
#) Enable dithering
#) [Convert]

23) Save new File as NMEZ4.xcf
#) >>File ->SaveAs (NMEZ4.xcf)

24) The next step is to optimize your file 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

25) Save new File as NMEZ5.xcf
#) >>File ->SaveAs (NMEZ5.xcf)

26) Export file as GIF.
#) >>File->Export(NMEZ5.gif)[Export/Enter]
#) [x] As animation
#) [Export/Enter]

I apologize for the grouping of some of these steps. If I hadn’t, it could have run to several pages. I would like to know if anyone works up a similar project using these instructions. The only way to make them better is through feedback.

Complex Timing Banner created with GIMP, GNU Image Manipulation Program.

This project was originally created for a project that I no longer support. However, it remains an excellent example of what you can do with GIMP, the GNU Image Manipulation Program. For more information on the Free GIMP tool and a working list of my GIMP Tutorials, go to:
http://www.Nove-Noga.com/GIMP.html
Nove-Noga!


Nove-Noga.com/Learn.html
Nove-Noga.com
Nove-Noga.com
All Solutions Network, A Free Opportunity to Build Your Future!
© 5/8/2013 Edited 8/27/2016

Member Note: To comment on this PR, simply click reply on the owners main post below.
-  Copyright 2016 IBOsocial  -            Part of the IBOtoolbox family of sites.