Iphone Inspired Menu/Navigation

Iphone Inspired Menu/Navigation

What We’ll Be Creating

Learn How To Create An Iphone Inspired Menu/Navigation

Resources Used In This Tutorial

Getting Started…

Create a new (Ctrl + N) document 800 x 600 pixels with any style background. I’ve simply created a simple background to showcase my Iphone Inspired Menu/Navigation and it looks like this.

Learn How To Create An Iphone Inspired Menu/Navigation

Select the “Rectangle Tool” (U) then create a white (#ffffff) rectangle in the middle of the canvas, the rectangle itself is about 240 pixels by 270 pixels.

Learn How To Create An Iphone Inspired Menu/Navigation

Once you’ve created the rectangle set the layers fill opacity to around 5%, then add the following layer styles.

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

You should have something like this.

Learn How To Create An Iphone Inspired Menu/Navigation

Drafting Out The Menu/Navigation

Select the “Rectangle Tool” (U) then drag out a rectangle using the color #5b6573 inside of the box we created previously.

Learn How To Create An Iphone Inspired Menu/Navigation

Duplicate the rectangle so you have a total of 7 single rectangles, place each rectangle directly underneath each other. Once all the rectangles are in place color the third rectangle down in the color #e30045, then rectangles 4, 5 and 6 color white #ffffff.

Learn How To Create An Iphone Inspired Menu/Navigation

Were now going to add layer styles to each rectangle starting with the three white rectangles.

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Your three white rectangles should now look like this.

Learn How To Create An Iphone Inspired Menu/Navigation

Now add the following layer styles to the three blue rectangles.

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Your blue rectangles should now look something like this.

Learn How To Create An Iphone Inspired Menu/Navigation

Finally add the following layer styles to the pink rectangle.

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Learn How To Create An Iphone Inspired Menu/Navigation

Your menu should now look like this.

Learn How To Create An Iphone Inspired Menu/Navigation

Adding The Menu Labels And Icons

Download the Pixelated Icon Set from the link below, then choose your desired icons and add them to the menu on the left side of the rectangles. Once you’ve added the icons begin to label your rectangles.

Learn How To Create An Iphone Inspired Menu/Navigation

Creating Notifications

On each menu item there’s a little notification box on the right side of the rectangle. Select the “Rectangle Tool” (U) then create a small rectangle on the right big enough for some small text. Color the rectangle in the color #33373d.

Learn How To Create An Iphone Inspired Menu/Navigation

Finally inside each small rectangle add some notification text.

Learn How To Create An Iphone Inspired Menu/Navigation

That’s it all done.

Conclusion

Thanks for taking part in this tutorial, if you managed to finish this tutorial I’d love to see some of your results. Feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.

Learn How To Create An Iphone Inspired Menu/Navigation

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

6 comments
Paul Weston says

I really enjoyed reading this tutorial. As a new web designer, designing buttons is an area I am spending a lot of time on. I feel that the design of the navigation and buttons can sometimes make or break a site design. This tutorial has been and will be a great resource for me in the future when is comes to how I approach my navigation and button design. I like the subtle gradient techniques you have used on the buttons. It gives the buttons just the right feel, without going over the top.

Great amount of detail when it came to the techniques and how to use the gradients and I look forward to your future tutorials.

Reply
Richard Carpenter says

Thanks for your comment, much appreciated.

You touched on some very important points. Good luck with your future designs.

Reply
Abc says

Good Work :)

Reply
Josh Lake says

I must say that is one nice, easy to follow along tutorial. I would like to thank you for the detailed step by step guide on how to style each section of the navigation since this this going to be a great help to me when it comes to making nice and clean buttons in the future.

I would recommend this tutorial to anybody who may be new to designing and using Photoshop because it includes techniques which are commonly used in most website and interface designs to get that clean, modern professional look.

Reply
Michael says

Really well polished design on this one. Great job

Reply
Ahmed Sami says

Great tutorial as usual :)
Thanks man!

Reply
Add Your Reply

Popular posts

css.php