Friday, December 08, 2006

Generating a simple graphic header using Irfanview

I use mostly free tools, and one of my favourite is Irfanview, about which I have written in an earlier post Using Irfanview and Paint photo editors for your blogs (click "BACK" button to get back to this page). For this post, I will describe how I used Irfanview to generate a simple graphic header for this post Good Health Information (close new window/tab to return to this page). Irfanview is free for download, and you can easily find a download site by googling "download irfanview" in the search box above, just tick the radio button againt web as the radio button for googling this site is set by default.

For this blog, I used Ramani's 3 column template for Blogger Beta (close new window to get back to this page). The first thing I need to do is to find out what is the pixel width of the Header. For this I have to get into the template editor (Layout > Template > Edit HTML). I found this block of code in the CSS (Cascading Style Sheet): (See screenshot below. Click to enlarge):
Ramani's 3 column Blogger beta Header width
This tells me that the Header width is 660 pixels and the graphic width must be not more than 660 pixels.

UPDATE 11 December 2006: I have added an AdSense Unit in the header and that extended beyound the header boundary. I have since extended the header width for that (and my other blogs, including this one) to 750 pixels.

I opened Irfanview, and in the menu bar, click "Image", then select "Create new (empty) image (see screenshot below. Click to enlarge):
Irfanview creat new empty image
Upon clicking "Create new (empty image) a pop-up appear, and I have to input the pixel width and height of the image plus the background color (see screenshot below, click to enlarge):
I chose the width to be 640 and the height to be 75 pixels. In the new image, I then click and drag the mouse to create a broken-line "box" to create a "selection" in which I want the text to be added in. After this, in the menu bar I click "Edit", then select "Insert text into selection" and then type in the text and select the font type, size and text alignment (see screenshot below, click to enlarge):
Irfanview 'insert text into selection
When satisfied, in the menu bar, I click "File", select "save" and save the graphic with a suitable file name and file extension (in my case, I chose jpg). The graphic can then be used to insert into the blog Header as described in this post: Adding a graphic into a Blogger beta Header (close new window to return to this page).

Update: Originally the Header fitted snugly into the blog Good Health Information (close new window/tab to return to this page). However, after adding an AdSense link unit into the header, the link unit extended beyound the boundary of the Header, and I had to change the width of the Header to accomodate the link unit.

UPDATE 11 December 2006: Chris (see comments) mentioned that a graphic generating tool is also available at target="_blank">Cool Text (close new window/tab to get back to this page). If you want a fancier graphic header than what this post can provide, you can try out Cool Text. I believe I have come across Cool Text before, tried it, but it was too fancy for me. However, as they say, "one's meat is another's poison".

Related post: Using Irfanview and Paint photo editors for your Blogger blog (click "BACK" button to return to this page).



  1. Anonymous12/11/2006

    Irfanview is excellent, but have you tried Paint.NET? Also free, & very powerful. I've only just started to play with it, but you can produce some excellent banners using your own images.

    A simpler option for free graphics may be:

    Also very good.

  2. Hi Chris,

    Thanks for your compliment. I see you have referred to Paint.NET which I suppose is different from Paint available in the Accessories of Windows which I use for highlighting and have mentioned in the post Using Irfanview photo editor for Blogger blogs which in hindsight I should have used the title "Using Irfanview and Paint photo editors for Blogger blogs.

    Thanks for the info on and which I will definately check out. I may also do a post on it if I find it useful and acknowledge your contribution if you have no objection.


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics