Easily Create An Apple-Inspired Navigation

by TutsArena - Tutorials

Apple’s GUI is simplicity at it’s finest, however, it is as beautiful as it is simple. The design grabs your eye without sluggish, flashy graphics. In this tutorial we’ll show you how to effortlessly create a navigation bar very similar to the one on Apple’s website.

Apple’s Operating System has more than a few bells and whistles. Many people would say it’s plain, however, what makes the GUI so beautiful is it’s simplicity. We will work to recreate Apple’s website navigation bar step-by-step in this Photoshop tutorial.

The Real McCoy

Apple's Navigation Bar

The Not-So-Real-McCoy (Our Version)

Our Apple Navigation

Step 1 – Create The Navigation Bar

For the sake of this tutorial we made our document size 900×80, however, if you plan to make an entire template make your document higher.

  1. Select the Rounded Rectangle Tool and set it’s Radius to 5px
  2. For the color use #d1d1d1, then drag the rectangle to the desired size.  We used 865px by 38px.
  3. You can rasterize the “Shape 1″ layer and rename it or leave it how it is.
  4. Right-click “Shape 1″ and go to Blending Options > Gradient Overlay and set the Blend Mode to Normal, Opacity to 100%.  Click the gradient to open up the Gradient Editor.  Where you see your current gradient, click the bottom left square (the left color stop) and set it’s color to #949494.  For the bottom right square (the right color stop) set it’s color to #d1d1d1 and click OK.  Make sure your angle is set to 90°.

    5. Apple Nav Gradient Overlay
    Apple Nav Gradient Editor

  5. Now it’s time for the Drop Shadow. Under the Drop Shadow Settings set the shadow color to #000000 (black).  Set the Blend Mode to Multiply and the Opacity to 20%.  Ensure the angle is set to 90°.  Set the Distance to 1 and the Spread and Size both to 0.

    6. Apple Nav Drop Shadow

  6. Click OK to accept the layer style.

Step 2 – Adding The Inset Text

This is where you get to add your navigation text such as “Home”, “Portfolio”, “Contact”, etc.   We used the Myriad Pro font with the color #383838 and font size of 14 points.

To give the text an “inset” feeling, we added a Drop Shadow.  Set the Blending Mode to Normal, for the shadow color use #ffffff (white) and set the Opacity to 50% and the angle to 90°.  Set the Distance to 1 and the Spread and Size both to 0.  Click OK.
Apple Nav Text Drop Shadow

Step 3 – Add Line Separators

To add separators to divide the navigation into “buttons” we added 3 lines with the pencil tool.  Every 116px, draw a vertical black line and on each side draw a white line.  For the black line, set it’s Blending Mode to Overlay and it’s Opacity to 20%.  For the white line, set it’s Blending Mode to Overlay and it’s Opacity to 10%.

That’s It!

We also added a very slight inner shadow just to give the text a bit more depth, but it’s really not necessary to achieve the effect.  The arrow was also added using the Custom Shape Tool.

Your outcome should match ours if you followed all of the steps.  If you seem to have messed up or can’t quite get it, feel free to download the PSD file to see exactly how we did it.  Enjoy!

About the author

TutsArena is dedicated to providing the best, free web design tutorials.


Visit TutsArena's Website | All Articles From This Author

14 Comments


Add your comment - (need a gravatar?)

Enable CommentLuv?

Sponsors

Sponsors

Recent tutorials

Sponsors

Write for us!

Write tutorials for us and make money! Check out the details and submit your tutorial.