How to Create a Clean Navigation Menu in Photoshop
|
| ||||||||
| Compare: | Web Design Calculator | Web Design Cost Guidelines |
Are you an E-Commerce Web Designer? Add a Free Listing
In this tutorial I`m going to show you how to create a clean and modern navigation menu in Photoshop. The navigation will have a dropdown menu and a beautiful ribbon as a home button. Along the way, we`ll use different photoshop techniques and layer styles explained in very detailed images to help you following the tutorial with ease.
What we`ll be doing today:
Let`s get started. Open Photoshop, create a new transparent canvas of 600×450px and paint it with a gray color (#e6e6e6). You probably wonder why only 600px in width. Well, I use this dimension to offer you high-quality images so you can see the details better. You can use a normal width of 1280px so you can build a normal menu of 960px in width. Is your choice.
My menu will be composed of 6 boxes, each of 95px in width. The height of the menu will be 55px. So, select the Rounded Rectangle Tool(U) and with a radius of 5px draw a rectangle of 570px( 95*6 ) x 55px.
Now apply the next layer`s styles:
To delimit each button, use the line tool and add 2 vertical lines at every 95px like in the image below. The 2 lines will create a beautiful in-depth effect into the navigation.
Now duplicate the set of lines 4 times and arrange them so you may obtain 6 boxes of 95px each. Then inside the boxes, add the text-navigation.Make sure to leave the first box empty, because the home button will have a different look. I used Georgia font – 13px.
Let`s build the drop-down menu. I chose the Portfolio for the dropdown. Select the Rectangle Tool and draw a rectangle of 94×53px. Use #70939f for the background color and make sure to place the layer above the navigation layer. Move the rectangle at the bottom of the navigation, to hide the bottom stroke. Then select the Custom Shape Tool(U) and add a small arrow near the button or if you want, just import an arrow from the web.
Select the Rounded Rectangle Tool(U) and with a radius of 5px, under the navigation layer, draw a rectangle of 140×150px. Move up the layer so you can obtain rounded corners at the bottom and straight corners at the top. Also, make sure to add a small drop-shadow and to color the layer with the same blue you used on “portfolio” button.
Now add some text into the drop-down and after each item list, draw 2 horizontal lines this time, exactly as you did on the main navigation. With this final touch, the drop-down is ready.
We`re going to build now the home button. This step will test your creativity and dexterity because we`ll create an uncommon shape and will make use of the Pen Tool(P).
Select the Rectangle Tool(U) and draw an yellow shape of 50×70px. Right click on the layer and hit “Rasterize Layer” so we may edit it.
Select the Pen Tool(P) and make sure you`re in Paths Mode. Then create a path at the bottom of the shape like in the image and transform it to selection by right-clicking inside it and selecting “Make selection”.
Delete the selection you just made by pressing the “Delete” key from the keyboard so you may obtain a nice ribbon shape.
With the same Pen Tool(P) but in “Shape Layers” mode this time, draw a gray shape like in the image to create a nice shadow effect:
The button is almost done. I want to show you how to create a seams effect. So, let`s add some seams. Use the Line Tool(U) to add vertical small lines on the right and left side of the button. The image might help you:
Last step, add a small home icon at the middle of the button. Download this Home Icon and add it to the project. Change its color to white and add a small drop-shadow at the top of it:
The button is done, and with this final touch, the entire project is done and the navigation ready to be coded. I thank you for watching the tutorial, hope you`ve learned something today and hope to see you again, next time, for another photoshop lesson. If you have any questions, drop us a comment. Till then, take a look at what we`ve done today!
Related posts:
- How to create a clean and design portfolio layout using Photoshop
- How to Design a Clean and Beautiful Login Form in Photoshop
- How to Design a Clean and Fancy Chat App in Photoshop
Wed, 31 Aug 2011 15:46:12 GMT
Tags: photoshop, Tutorials,
Roanoke E-Commerce | Williamsburg E-Commerce | Naples E-Commerce | Saddle Brook E-Commerce | Bumpass E-Commerce | Eindhoven E-Commerce | Mt Dora E-Commerce | Ann Arbor E-Commerce | Detroit E-Commerce | Sonora E-Commerce |
photoshop
50 Free Photoshop Brush Sets Everyone Should Have
A good and diversified Photoshop brush collection is essential for any designer who respects itself. For this reason, I want to share with you 50 free and high-resolution Photoshop brush sets which will help you in your future projects. Paint Lines Brush
45 Beautiful Photoshop Brush Packs for Light Effects
Photoshop an inevitable tool for the designers and artists and finding out the desired brush pack of Photoshop is like the icing on the cake! Graphic designers make use of effective and high quality light effects in order to give their designs a little bi
A Round-Up of 50 Amazing and Fresh Photoshop Tutorials
Here we come with another designer’s treat – yes, you get me right with another exciting and awe-inspiring collection of Photoshop tutorials. Everyone who belongs to designing arena knows very well that Adobe Photoshop is an indispensable tool of designin
Tutorials
Embed Custom Fonts with Cufón Font Replacement and Google Fonts
Embedding custom fonts on a website has always been a problem, but thanks to Javascript and especially jQuery, things are getting solved one at a time. Cufón Font Replacement is now the most popular way to use custom fonts and appeared as a very efficient
A Set of 10 best Photoshop tutorials for Rock & Stone effects !
I go ahead again with the selection of some of the best tutorials. The three last recent articles published on 2experts, about fire, water and nature got a really good success and it gives me the motivation to continue in this way! Today, you can find a s
5 Things To Consider When You Install a SATA Hard Drive
Hard drives with a Serial ATA (SATA) connector were introduced to replace IDE and Enhanced IDE (Parallel ATA) drives. SATA removes the master-slave relationship between hard drives (parallel), as each drive connects directly to a SATA host adapter or port
Need E-commerce Design? Check out our member profiles:
We deliver advanced and affordable designs for small/mid size-business. Our goal is to bring more businesses for your company and gain popularity to your market. We provide great customer service!
Richland-Kennewick, Washington US
Your trusted partner for website design, graphics design, and search engine optimization (SEO) services for small and mid-sized businesses. Affordable web solutions without compromising on quality.
Atlanta, Georgia US
2Heaven Media is a full service Web Development company that focuses on custom Website creation and E-Commerce Site Development.
Los Angeles, California US
The Internet Agency is a Professional Web Design Company in Sri Lanka, known to deliver best quality web designs that are creative and unique, that meets your styles and needs (Custom Web Design).
Nugegoda, Western Province LK
Twin T Design® use the latest technology to design useful and engaging web sites. We specialize in web design, flash, print design, photography, search engine optimization, and brand identity.
Springville-Mapleton, Utah US
14 East offers a wide range of Internet solutions including advanced web design & development, E-commerce, database programming, search engine optimization and credit card processing.
Fort Lauderdale, Florida US
Professional web site design and e-commerce solutions. Get your web site or store online usually same day. Great US based support and design - no jobs outsourced overseas.
Perrysburg, Ohio US
45 Fractal Artworks with Attractive Colors
The beauty of flowers always creates an immense appeal and nobody can stay uninfluenced by their qua
Is Everyone Ripping Off Apple’s Designs? [Opinion]
Apple s products all have a certain look to them Steve Jobs and Jonathan Ive wouldn t have it any o
7 Of The Strangest Services Offered On Fiverr
I recently found out all about Fiverr a website that offers odd jobs to people for only five bucks
50 Examples of 3D Typography
Here are some examples of 3D typography to start your week off right Enjoy Happy New Year 2011 In
13 Fresh, Exciting iPad Apps Added to the Best iPad Apps Page
Our Best iPad Apps has recently undergone a full overhaul 13 fresh applications have been included
8 Solutions To Loop YouTube Videos & Watch Them Again
It might be a Photoshop tutorial on one hand and Rebecca Black on the other but you shouldn t be sh
The Legendary Steve Jobs Has Passed Away [News]
The co founder of Apple and its long time CEO Steve Jobs died yesterday at the age of 56 Accord
Article Tags
E-commerce Design Articles
Web Apps & Internet (374)
News (291)
Web Apps (129)
Inspiration (128)
Music (119)
iPhone / iPad / iPod (116)
cool web apps (108)
Google Android (101)
Mobile Tips (100)
Announcements (99)
deals (88)
Games & Gaming Tips (84)
Tech Deals (82)
Opinion & Polls (76)
Cool Software Apps (76)
Social Media (66)
iOS (66)
Browser Tips & Tricks (66)
iPhone Apps (59)
Freebies (58)
geeky fun (58)
Photography (58)
iphone (55)
Google (53)
troubleshoot (53)
android (52)
Photoshop (52)
Graphics (51)
facebook (50)
How-To Articles (50)
Friends:
E-Commerce Website Pricing
Web Design Quote
Website Design
Graphic Designers
