Tip: Spice up your free counter...

[OuTpaTienT]

I recently had a brainstorm on how to improve the boring look of the free counter at my personal web page (http://www.0utpatient.com).

I changed it...
http://0utpatient.home.comcast.net/freecounterspiceup.jpg

So now it fits seemlessly into the theme of my site. And since I made no changes to any of their code, the free counter people should have no problem with this. It still displays exactly as they request I display it.

How's it done? Easy...it's just a little tiny table.
http://0utpatient.home.comcast.net/freecounterspiceup2.jpg

I simply sliced up the graphic into 9 sections and instead of the middle section being part of the graphic I just replaced it with the counter code. That's it. Just make sure all your images have border=0 and the table also has no borders and no cellpadding or cellspacing.

Obviously it helps to begin with a counter that is simple looking and lends itself well to this technique. My counter is from http://www.sitemeter.com/

[fosin]

Neat, looks cool.

I'm a little confused on how you split it up, is each section of the pill on a different layer? Does PS have a function(s) that helps you cut up a pic evenly like that?

Can you just make the whole pill pic the background of the table? I'm guessing it will it not look right in other browsers. If you can get it to look right, you could give the counter a recessed look.

[Mntsnow]

whoohooo nice idea

[OuTpaTienT]

Hey, good thinking about it looking recessed. Thanks.

And yes, Photoshop allows you to define how the image is sliced up and then it will save the slices as individual files and also write the html of the table for you.

Just use the Slice tool to define the slices and when saving use "Save for Web".

[fosin]

Originally posted by OuTpaTienT
And yes, Photoshop allows you to define how the image is sliced up and then it will save the slices as individual files and also write the html of the table for you.

Just use the Slice tool to define the slices and when saving use "Save for Web".

Wow, nice feature. I've got to start using PS more :o