Sunday, January 18, 2009

Photoshop: Blue Navigation Bar

In this tutorial you'll learn how to create a simple blue navigation bar.
This is the result:

  1. Open a new document 700x150 pixels and fill the background with #1a1a1a.
  2. Create a new layer and select the Rectangular Marquee Tool and use these settings:
  3. Make a selection like this:
  4. Select #2575c4 as your foreground color and #1f5f9f as your background color, then grab the Gradient Tool. Fill the selection with a gradient from top to bottom.
  5. Create a new layer and then select the Rectangular Marquee Tool. Use the same settings as before but change the height to 25px. Now make a selection of the top half of the navigation bar.
  6. Fill the selection with white and then change the opacity of the layer to 5%.
  7. Create a new layer and select the Pencil Tool with a diameter of 1 px. Select #133c64 as your foreground color and then draw a line like the image show:
  8. Now draw a line next to it with the color #2d8be8.
  9. Duplicate and move the layer several times so you get this:
  10. Now you are almost done. Just add some text to the buttons, I used the font Verdana. Result:


  1. Wow I wasnt veru proficient in GIMP but from these easy tutorials I now know many tools to make awesome stuff easily

  2. This is a simple yet classy navigation bar that my bro can use for his website design project. I'll share this with him. Thanks for sharing!

  3. Great tutorial. I've been searching the web for one of these and this's one of the best.
    Thanks a lot for sharing.