Join me @ IBOtoolbox for free.
Curtiss Martin
Member Since: 8/13/2012
  
performance / stats
Country: United States
Likes Received: 2744
Featured Member: 18 times
Associates: 12659
Wall Posts: 474
Comments Made: 26751
Press Releases: 360
Videos: 2
Phone: No Calls Please
Skype:    
profile visitor stats
TODAY: 15
THIS MONTH: 4800
TOTAL: 544469
are we ibo associates?
member advertising
active associates
Melinda Grace    
Last logged on: 10/19/2017


Laurie Kay      
Last logged on: 10/19/2017


Shermone Johnson    
Last logged on: 10/19/2017


Mori Webster    
Last logged on: 10/19/2017


Lawrence Bergfeld    
Last logged on: 10/19/2017


Larry Ellner     
Last logged on: 10/19/2017


Paruchuri Sridhar    
Last logged on: 10/19/2017


victor chukwuemeka    
Last logged on: 10/19/2017


Myrtis Myles    
Last logged on: 10/19/2017


Rodney Robinson     
Last logged on: 10/19/2017


David Mathews    
Last logged on: 10/19/2017


Cynthia Minnaar    
Last logged on: 10/19/2017


Wesley Sin    
Last logged on: 10/19/2017


James Hill    
Last logged on: 10/19/2017


Mohan Gopal    
Last logged on: 10/19/2017


other ibo platforms








Curtiss Martin   My Press Releases

Nove-Noga: Create a Favicon With GIMP

Published on 2/24/2013
For additional information  Click Here

Nove-Noga: Create a Favicon With GIMP Time has passed since my first venture with the *Free GIMP Tool. (GNU Image Manipulation Program) I have refined the notation and have decided to apply it to the earlier projects. *Free Means Free! See Link near the bottom of the page at http://www.Nove-Noga.com From the first line of code for my website, I wanted to create a FavIcon to use with it. I had in mind a simple text with a stylized font to make a nice, simple, image using “n-n”. Even before I found IBO Toolbox, I knew that my success would depend upon branding. *NB: These are my Notation methods. “>>” 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 “>v” Click DropDown button. “^>” Shift + Click Each instruction line is usually in two parts. Verbal then Symbols. “*NB:” is for the Latin “Note Bene” which I interpret as Good Note or Note Well.* 1) Fire up your GIMP Tool. >>GIMP 2) 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 Foreground 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.* *-*-* Please Note: The standard favicon sizes are 16x16 pixels and 32x32 pixels. To reduce problems I decided to create my new image using a 64x64 px box. *-*-* 3) Create a New 64x64 px Image using {Create a New Image} >>File->New Width(64) Height (64) [OK] *-*-* Select the Text Tool from {Toolbox} and set it up in {Tool-Options} *-*-* *NB: Somehow my {Tool Options} have become separated from the {Toolbox} if you do not see {Tool Options} when you need it, >>Windows ->Dockable Dialogs ->Tool Options, to make it reappear.* 4) Set up Text Tool; Font=Alba Matter Size 40px Justify=Centered (Nove-Noga)@0,5 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 40 px >>{Tool Options} Size = 40 px In {Tool Options} dialog set Justify to Center >>{Tool Options} Justify = [Centered] ->@0,5(Nove-Noga) *-*-* Click the body of your new image towards the upper left corner and enter your text for the Icon. Mine is “N-N”. In Alba Matter, they appear like a normal small “n”. *-*-* 5) Click Image. >>{Untitled-x}(image body) Enter Text “N-N” (N-N) 6) Select Alignment tool from Toolbox and Drag a selection box over element. >>{Toolbox}[Alignment Tool] ;Drag a selection box over element Center horizontally. >>{Tool Options}[Align Center of Target] Center Vertically. >>{Tool Options}[Align Middle of Target] *NB: I used different methods in the previous version of this Press Release. http://www.ibosocial.com/Nove_Noga/pressrelease.aspx?prid=170812 *-*-* When you save a file for the first time during a project, GIMP will save it in “My documents” as the default directory. I strongly recommend that you put each project in a separate directory inside a “GIMP” directory. I like to number my files and save the clean name for the final project. *-*-* 7) Save as “FavIconBase1.xcf” in /my documents/GIMP/FavIconBase/ >>File.>SaveAs (FavIconBase1)>>(GIMP folder) [Create Folder](FavIconBase)[Enter][Save] *NB: Do Not change the Extension. If you cannot see the [Save] button, just hit [Enter] to complete the save. *-*-* Be Patient, we are nearly done. 8)Export the image to png or jpg. The default is png. I am going to use jpg. >>File->Export(FavIconBase.jpg)[Export]{Export Image as Jpeg}[Export] *-*-* Remember that the Exported Image will be in the same folder as your first save. For the paranoid, check that location for your new image. If it is all good, close GIMP and we can move on to the next step. *-*-* 9) Now that we have the image that we want to use to create our new favicon, we are ready to go to http://favicon.htmlkit.com/favicon/ a site that can create your new favicon from a picture. *-*-* On this page you will see a nice box with the header “Create a FavIcon from any picture” with a place to Browse for your pic and a Generate button. Browse your way to your selected picture, then click [Generate FavIcon.ico]. This will take you to the next page displaying your new favicon as a Still and an Animated favicon. They have a lot to offer on this page. I was happy to add my site to their Favicon Gallery. *-*-* 10) Near the top and to the right you will see a red caption, “To add this favicon to your site:” With a Download link just below it. The instructions that you will need can be found in the readme.txt that comes with the download. NB: I always drop my downloads into a special folder so that I can easily find them. Click the download link, make a note of the file name and Save it to your selected folder. 11) GoTo your selected folder on your computer and Open the favicon_### file. READ the ReadMe.txt file. In the ReadMe you will find the code you need to add to your html files.* *NB: When posting this PR, I discovered that my favicon was no longer working on the root directory files. I dropped them into images and added the image reference to the html. (“images/favicon.ico”) Problem solved. I do not understand the Works/Don't Work of this. It works now. C;-)* *-*-* Point of Order. I am building my own pages and keep everything related to the website in that folder. I copied my new favicon.ico and animated_favicon1.gif to my working folder. I find it easier when doing my uploads. *-*-* 12) Copy the html from the ReadMe. (See *NB: above if you have problems.) Open your page file (s)(index.html) and add the new code between the “head /head” tags. *NB: Html tags are always enclosed by “<>” but they cannot be displayed properly on IBO Toolbox. They probably would confuse the browsers.* I placed favicon code just below the meta tags. Save your file(s) and upload them to your website. Please Note: The code provided in the ReadMe assumes that your new icons will be in the same directory as any page that is calling on them. Each directory will need a copy (Or even a different set of Icons.) *-*-*-* (From *NB: above. The favicons worked on my first test. When testing my PR links, only the favicons in the secondary folders were working. To err is human… To really screw up takes a computer.) I use FileZilla that I downloaded for free http://filezilla-project.org/ for all of my uploads. It is very easy to use once you have entered the access information. If you are totally lost, you may want to talk to your webmaster. Your other option is to GoTo http://www.w3schools.com/ for lessons and reference on html. To work with an existing image, try Nove-Noga: Image Resize with GIMPLink: http://www.ibosocial.com/Nove_Noga/pressrelease.aspx?prid=179627 Resize your image to 64x64 px and go to step 9. Other Free GIMP PRs: 11/16/12 Nove-Noga: Free GIMP Banner – Redux 11/29/12 Nove-Noga: My New Header with GIMP 12/1/12 Nove-Noga: Simple Animation with GIMP 12/1/12 Nove-Noga: Image Resize with GIMP 12/08/12 Nove-Noga: Free GIMP – Business Card 12/08/12 Nove-Noga: Free GIMP – Business Cards by the Dozen 12/12/12 Nove-Noga: My Facebook Image with GIMP 2/5/13 Nove-Noga: Animated Text Project with Free GIMP 2/7/13 Nove-Noga: Free Animated Banner with GIMP Part 1 2/7/13 Nove-Noga: Free Animated Banner with GIMP Part 2 For more Information on Nove-Noga, our Goals and Offerings check out The Nove-Noga Primary Website http://www.Nove-Noga.com/ And, our Opportunity and Tools Website http://www.Nove-Noga.com/Opporknockity/ For Due Diligence (and maybe a little amusement) Google Search “Nove-Noga”. For a great *Free graphic image manipulation program. Find a link to the *Free GIMP Tool near the bottom of http://www.Nove-Noga.com/ Join us at IBO Toolbox: http://www.ibotoolbox.com/invited.aspx?jid=36279 Experience *Free Viral Advertising: http://adviralizer.com/?r=9155 And also *Free: http://www.cms-design.ca/chain-ad/chain-ad_1.php?id=38 *Free means FREE! Nove-Noga!
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.