easiest way to create tab navigation bars?

[emma matthews]

I am regularly designing tabbed navigation bar sites(like amazon) for clients. It takes me ages to create each bar in photoshop, as I have to make each tab individually.

Is there an easier way? Perhaps an onoine generator, that lets you specify the text and font, and tab colour and style, and then genrate the appropriate sized finished tagged.

I know I'm being lazy, but with the number of tabs I have to create for the bars every week, it would save me hours every week, if there was one!

[BlobFisk]

One solution could be to create the tab with no text and use it as a background. Then use CSS to style the text for the tab label.

That way you only need to create 2 tabs, one general and one (if applicable) for the tab if it's the active page.

[emma matthews]

Thanks BlobFisk. However, the only problem with that would be all the tabs would be of the same size. I really want the tabs to be the exact size of the text. I am forever resizing tabs to fit the text. Surely, there must be a simpler way to auto generate tabs that fit the text in them?

[grahamstewart]

In that case you need three graphics: a left tab edge, a middle and a right tab edge.

Use the middle one as a horizontally repeating background for the text. And position the other ones in the appropriate place.

[henry0]

what's about letting PHP dynamicaly creating the Tabs design, color etc...
with something like: if text =... then tab = etc....

I still do it by hand :) but I did read many chapters about the tech

look around for a good tutorials or a book such as PHP4
cheers

[Birdman]

I like blobfisk's and grahamstewart's idea. It's win-win because you get a quicker page load and real anchor text which help in SEO.

[Robert Charlton]

...and real anchor text which help in SEO...

Unless, of course, the tab text won't help in SEO. Sometimes, I'll give the client whatever they want in graphics as long as I can influence the text links... So, if they want to call a navbar link "Welcome to Our Product Page" or "About Us" or whatever, that's fine, as long as these links are graphics. I then build global text links with good anchor text for the footer section, and also add text links to other positions on the page.

[dmorison]

Hi Emma,

Can you sticky me a URL to a demo page of the kind of tabs you wish to create?

I have built a PHP library for dynamically generating various graphical navigation controls (complete with smooth "pseudo" anti-aliased rounded corners :) and might be able to help.

Cheers.

[henry0]

HEllo Dmorison,
as I mentioned I dev in PHP
but do not have the graphic side knowledge
would you please share with me some "how to"
by advance

thank you

cheers

Henry

[dmorison]

Hi Henry,

It basically involves the use of PHP's image creation capabilities. The reference guide is here:

[uk.php.net...]

The process is quite simple...

- Create a new image with imagecreate() and get a handle to the image (the canvas)

- Create a colour palette with imagecolorallocate()

...and then plot individual pixels, shapes, text, lines etc. etc. onto the canvas to create whatever effect you want...

- Get the image stream with imagepng() (for a .png)

- Send the output of imagepng() to client

You can even have a PHP script as the src='' attribute of an <img> tag. For example:

<img src='tabletop.php?fg=ffffff&bg=000000&width=300'>

The first line of tabletop.php is then something like:

header ("Content-type: image/png");

The output is then a .png that can form the top of a table with nice anti-aliased smooth corners.

Using this technique, you can easily experiment with different colour schemes without having to go into Photoshop every time. I only actually do this on my development server. When i'm happy with a colour scheme I run a script to go through all my "dynamic" img src's and convert them to actual .png files for publishing.

Hope this helps!

[henry0]

Hi Dmorison
thank you for typing a long primer
this is opening some nice perspective
Henry