TechnoMono

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 is what we’ll be making:

Open GIMP and create a new image 700×216. Create a new layer (Layer > New Layer) called ‘tabBar’. Using the rectangular select tool (R) make a selection of 468×28 in the middle of the canvas and fill it (SHIFT+B or CTRL+,) 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 (L) 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.

Now we’ll make the tab, we’ll make it large then scale it down to size. 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.

Create a new layer called ‘temp’, make a 220×114 selection in the middle of the canvas then go Select > Rounded Rectangle and set the radius to 38%. Fill the selection with #0D74F3.

Drag some guides onto the canvas and position like so:

The left and right guides are 32px from the tab; the guides move in 1px increments, so zoom in 400% or 800% (View > Zoom > 400%) to move them accurately. The bottom guide lines up with the bottom of the tab.

Select the perspective tool (SHIFT+P), make sure ‘Supersampling’ is checked in the tool options:

Move the bottom left handle to the left guide and the bottom right handle to the right guide (making sure they are in line with the bottom guide), then click transform.

Use the scale tool (SHIFT+T), make sure ‘Supersampling’ and ‘Keep aspect’ are checked in the tool options (below the tools box). Scale it so the height is set to 68px. Once you click scale, your layer will become a floating layer. Create a new layer (Layer > New Layer); 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 (Layer > Delete Layer). Using the move tool (M) 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 (L):

Then lower the layer opacity to 80% (top right of the layer stack).

Add your text (T) and your done. I used a font called zero hour at 14px.

Enjoy!