In this tutorial you’ll learn how to make a background for the horizontal navigation bar on your site. You are also shown how to customize the color.

These are the ones that we’re going to be making:

Although the colors in this tutorial are blue, at the end of this tutorial, you’re instructed on using custom colors as well. Also make sure you check out this tutorial to learn how to make horizontal navigation menus.

We’ll start by creating a new image 500px wide and 50px in height with a transparent background. However, you can use whatever height you prefer.

Now pick FG and BG colors. In this tutorial I’m going to use #0000ff as the FG #00c6ff for the BG: 

Select the Gradient tool(press L) and make sure your gradient is the one called “FG to BG (RGB)”, click and drag from halfway in the height of the image all the way to the bottom while pressing CTRL to keep a straight line. The result should be something like this:

Create a new layer and name it “white”, make sure you have it selected for the next step.

Now change your FG color to white and pick the gradient called “FG to Transparent”. Click and drag a straight line from top to bottom of the image while holding CTRL.

Adjust the opacity of the white layer to 60 % and select the background layer. Create a new layer and name it “sides”. Select the background layer again.

Select a little 35px wide box at the left side of the image with the Rectangle Select tool(R):

Having done that, press SHIFT + S on your keyboard. Adjust the Shear Magnitude Y to 25px(or ½ of whatever height you’re using for the image) and click OK. You’ll see this now:

This new layer created is a floating one. Press CTRL + C on your keyboard and then delete this layer. Select the layer called “sides”. Press M and then press CTRL + V. The layer you deleted will show up again as a pasted layer. Click and drag it to the correct place in the side of the image like this:

Anchor the floating layer. There is a color problem at the contact point of the side and the rest of the image. We’ll fix this by selecting a small (22px high) amount of the rest of the image with the Rectangle Select tool (make sure you’re working on the background layer):

Press CTRL + C and then select the “sides” layer. Press M and then CTRL + V. Move the pasted layer to where it’s demonstrated in the image:

Now, anchor the layer and you can see we got a much smoother transition. Select the 35px wide box with the on the left side of the image again (working on the “sides” layer with the Rectangle Select tool):

Copy by pressing CTRL + C. Still using the Rectangle selection tool, drag the selection(the selection itself, not its contents) with your mouse to the other side of the image. Now, make sure you’re working on the background layer and then press the DELETE key. You should now see empty space on the background layer. Press CTRL + V and a copy of the other side will show up. Drag it to the right place (right side) and then go to “Layers –> Transform –> Flip Horizontally”.

Anchor the layer. Select the “white” layer and change the layer mode to “Screen”. Right-click on any layer in the layer dialog and click on “Merge Visible Layers”. Press SHIFT + O, uncheck the box “Select Transparent Areas” in the toolbox, adjust the Threshold to max and then click on anywhere in the image. Go to “Image –> Crop to Selection”.

This is the result:

So how do you add different colors? Simple. In the stage where you haven’t yet merged all your layers together, do this:

Select the layer called “sides” and then create a new layer, name it “color”. Pick #ff5900 as your FG and then press” CTRL + ,”. Adjust the mode of the current layer to “Screen”. You’ll have this pink navigation bar:

Set the mode to “Difference”, set layer opacity to 60 % and you’ll have a purple one:

And if you’re a Xbox fanatic , set the mode to “Darken Only” with full opacity:

Now change the FG to #24ff00 and press “CTRL + ,” again. Set the layer mode to “Hue” and opacity to 60 %. Enjoy your green navigation:

Let’s look at a different effect now, select the pattern “Granite” in the patterns dialog and then press “CTRL + SHIFT + ,”. Adjust the opacity to 50 % and use “Multiply” as the layer mode:

I don't know what this is, but oh well...

Use the pattern “Paper”, press “CTRL + SHIFT + ,” and set the mode to “Lighten only” with full opacity:

You can do a lot of things. Try out different colors, patterns and blending modes! You can also try adding a drop shadow to these: “Filters –> Light and Shadow –> Drop Shadow”. Download a sample XCF file here.

All images here are free to use and modify by anyone as long as you don’t sell the images directly or claim that you created them. You may not publish this tutorial on another site.