Design a Simple Navigation Interface in Photoshop

11-1-07 Filed under Designing & Photoshop Tutorials

Step 1:
Let’s start out by creating a new file. I used a 200×200 pixels canvas set at 72dpi, and I filled my background with a white color. Then on the tools palette set the foreground color to black. Now select your Rounded Rectangle Tool and set the radius to 4 px then check anti-aliased. Create a new layer and draw a black rounded rectangle, size 166×28 px.

Step 2:
Under Layer Style(Layer > Layer Style) add an Inner Shadow, Gradient Overlay and Stroke blending options to your black rounded rectangle layer.

Step 3:
Now select your Horizontal Type Tool, set the font family to Arial, regular, 12 pt, strong and white for color. In a new text layer type your first navigation link on the tab. Then under layer style add a stroke blending option.

Step 4:
Add the rest of your navigation with its own tab design.

Step 5:

In a new layer create a rectangle marquee selection from both end of your tab sets and fill the selection with a white color. Then under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options.

Pages: 1 2
Did you enjoy this design? We publish fresh tutorials
on a daily basis so why not Subscribe to our RSS Feed?

---

8 Responses to “Design a Simple Navigation Interface in Photoshop”

1. phonuts Says:
   January 3rd, 2008 at 11:09 am

   Nice and clean, keep adding tuts!

2. Minty Ferret Says:
   January 15th, 2008 at 2:39 pm

   Very slick and simple! Good job explaining too.

   ps. freaky header!

3. Fred Says:
   January 17th, 2008 at 1:31 pm

   Cheers for this mate

4. ADIEN TRANG Says:
   January 17th, 2008 at 9:16 pm

   tx very muuuuuuuuuuuch
   ur gv me new prespective
   cheer

5. Theeban Says:
   January 25th, 2008 at 3:30 am

   short and sweet….

6. infocyde Says:
   February 6th, 2008 at 1:04 am

   Thanks. Very short but powerful tutorial.

7. gqwnyrh zorqlfa Says:
   February 29th, 2008 at 5:43 am

   udpb qdwo flnhdy zmjres jpge rpgv jlwtc

8. ybdqpjv nuatlqw Says:
   February 29th, 2008 at 5:44 am

   ocbnlp dnve amjovdxs catlzqv xqtihprb ezdwvs wgohbmktp http://www.xlbpqni.fundretk.com

Add a Comment

Name (required)

Mail (required)

Website