Designing a Navigation  bar with themed graphics

A drawback with the themed graphics is the inability to directly alter the text size, the text being artistic resizes with the buttons and although one can change the font one cannot specify - say Arial 12 pt.   

However as its possible to set the text font, so one can choose a font (it doesn’t need to be web safe) which is closer to the size, for example Arial narrow instead of Arial normal.  OK with that limitation in mind lets have a look at some design options.

Starting with one called Ahead

Because the themed graphics are pre-programmed the style chosen obviously affect what the finished design will look like.  For Ahead there are two distinct sections, Normal + Over for the top band, and background for the main body, the background is static, in that it doesn’t change colour when hovered over, which is fine for this example.

Normal colour (top horizontal band)

Background colour (main body)

Over colour (top horizontal band)

Below is the same button after alteration via the Edit themed graphic dialog box, hover over to see the effect

See pages of how it was done

Or see the rest of the navbuttons

Ahead has a rectangle with an outer glow, it has a gradient fill from scheme colour 3 with -80% tint to white

On top is a narrow rectangle at scheme colour 3 +40% tint

In the edit themed graphic dialog box, Back colour changes the larger rectangle, normal and over changes the narrow top band,