Jul 30, 2012

How to Make a Header Title Image Using Cool Text

Have you noticed the title header of this blog? I got it from Cool Text.   It's pretty much a very straightforward thing I did here by simply clicking on the Chick Flick logo found at the opening page of the site.  But it's a trickier business doing it on my other site, iHeart Good Health.  If you have come across that blog a few months ago, it had that humongous header image that I so loved at that time.  Well, people change, and when it comes to blog layout, I like to tinker once in a while.  So, the big header image is gone, which is kind of hard to miss hehehe.  Anyway, Ms. Rhodora of Warayblogger.com asked me how I came up with that and she asked if I paid for the header image.  You'd be happy to know, I never paid a single cent, but I did spend a few hours resizing and recoloring things.  

So here's a little tutorial on how to make a header image using Cool Text's graphics generator.   

This image below is what you'll see at the opening page.  But as I have observed, the arrangement of the logo styles are shuffled from time to time.  For my particular header image, I selected the one encircled in red as the base logo.

Once you've selected a base logo, you will be directed to a window where you can pretty much do a lot of tweaking.  

To modify the default Symbol:

1.  Click on the symbol (encircled in red below).
2.  You will be directed to a list of categories.
3.  Click on a category and select a particular image you want to use.
4.  Now that you have a symbol, you can further modify that as follows:
     a.  The Layout tab lets you select where you want to position the symbol
     b.  You can also resize the image, choose the angle, or even flip it.
     b.  The Fill tab lets you chose between flat or gradient effect and you can combine 2 colors
     c.  Outline lets you choose the image outline thickness and color
     d.  You can also add Shadow for a more dramatic effect or choose a different effect from the last tab
     e.   Look at the generated preview on top of the page.  If you're not happy, tweak some more.

Modifying Line 1 and Line 2 of the Header:

1.  On the box under Line 1, type the title of your blog.
2.  Choose a font style by clicking on the font preview displayed as shown below.
     A new page will load that has the font categories and styles.  
     For this particular demo, I chose the Script or Brush category and I have 
     selected the Lobster Two font style.
3.  Proceed to customize your title font by choosing the fill style and font colors, modifying the size, 
     ticking on Bold or Italics boxes for more emphasis.
4.  Set how thick the Outline should be as well as the color.  
5.  Select Shadow type and other Render effects.
6.  You can see how the blog title (Line 1) will look like.  Just scroll up the page to see the preview.
7.  If you have a sub-title or a byline for your blog, do the same with Line 2.  Otherwise, leave the box 
     blank (remove the default text).
8.  All set?  If you are already satisfied with the image preview, click the Render Logo button.

You will be directed to a new window / page where you can see how the title image looks like, in actual size if I'm not mistaken.  You can now save the image on your PC by clicking on the Download Image link.  You can also edit it further or get the HTML code.
Just a few more steps.

Installing the Header Image for Blogger:

1.  In the Dashboard, select Layout.
2.  Click on the Edit link on the Header widget / gadget.  This pop-up (see image below) should appear.
3.  Upload the saved image.
4.  Make sure to tick the Placement option indicated below.
5.  Save and see how your new header looks.

There you have it.  Don't forget to put a link somewhere in your blog as a show of gratitude for free use of this service from Cool Text.


  1. Hi Ms. A, I'm currently redesigning my blog. Managed to delete my old header and I hope I can make a new one from Cool Text. It's nice to know that I can have something as lovely as your header without paying anything. :-) Damo nga salamat.

  2. Waray sapayan, Ms. Rhodora. I already saw your blog...new look! Like the color...heheheh partial to blue :-)

  3. Omo! Imma try this one when my pc got fixed na. Thanks for the idea Ate A! ♥ You already!