SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Drawing Techniques Iphone Inspired Menu/Navigation

Iphone Inspired Menu/Navigation

Apple hit the nail on the head with their awesome Iphone/Ipad graphical user interface, its sleek, easy to read and works well. In this tutorial I'll be showing you how to create your very own Iphone inspired menu/navigation.

What We'll Be Creating

img

Resources Used In This Tutorial

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.

img

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.

img

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

img

img

img

You should have something like this.

img

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.

img

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.

img

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

img

img

img

Your three white rectangles should now look like this.

img

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

img

img

img

Your blue rectangles should now look something like this.

img

Finally add the following layer styles to the pink rectangle.

img

img

img

Your menu should now look like this.

img

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.

img

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.

img

Finally inside each small rectangle add some notification text.

img

That's it all done.

   

ABOUT THE AUTHOR

Richard Carpenter Hi! Im Richard Carpenter and Im a Freelance Web and Graphics Designer from England. I am also a Regular Blogger, Tutorial Writer, and owner of Photoshop Plus. Photoshop Plus is his 2nd personal blog about all things photoshop. On a weekly basis he write tutorials, articles and freebies.
subscribe to newsletter