A crucial element of web site design is ease of navigation. When you design your own web page, you will want to make the main sections of your site easily reachable. Tabbed menus are a popular way of doing this

This tutorial was inspired by a nice tutorial that I came across for Macromedia Fireworks.

Open GIMP and create a new image 700x216. Create a new layer called "tabBar". Using the rectangular select tool make a selection of 468x28 in the middle of the canvas and fill it with #0D74F3. Make another selection of the same size directly above the first. You may wish to use a guide so the selections line up. To use a guide click and drag from the left or top ruler in the image window to where you want it.

Apply a gradient with #ECECEC for the foreground and #F4F4F4 for the background from top to bottom of the selection.

Make a 1px tall selection across the top of the gradient and fill with #B8B8B8.

Create a new layer called "temp". Make a 220x114 selection in the middle of the canvas then go Select > Rounded Rectangle and set the radius to 38%. Fill the selection with #0D74F3. Click to select the perspective tool, move the bottom left handle to the left and the bottom right handle to the right, then click transform.

The reason for making the tab over sized and then scaling it down is so that we get nice smooth edges. If we were to make the tab actual size to begin with we would have jagged edges.

Use the scale tool (make sure "Keep aspect" is checked in the tool options) and scale it so the height is set to 68px. Once you click scale, your layer will become a floating layer. Click the create new layer icon; this will anchor it to the new layer. Call the new layer "tab".

Notice there are some odd curved marks on the canvas; to remove them delete the "temp" layer. Using the move tool position the tab in-line with the tabBar.

When your happy with the placement, right-click the tab layer and choose "Alpha to Selection"; this will select the tab. Now go Select > Shrink and shrink by 2px. Create a new layer called "highlight", apply a white to transparent gradient, then lower the layer opacity to 80%.

Add your text and your done. I used a font called zero hour at 16px.

Here's the final result. Enjoy!

discuss this topic to forum