AnimHuT
  • Articles
    • Other Topics
    • Picture Of The Day
    • Review
    • Viral Videos
  • Contest
  • Freebies
    • Brushes
    • Font
    • Icons
    • Infographics
    • Patterns
    • Photoshop PSD
    • Textures
    • VECTORS
    • Wallpaper
  • Inspiration
  • Photography
  • Themes
    • Plug-ins
    • WordPress Themes
  • Tutorial
    • After Effects
    • Codex
    • Flash
    • Illustrator
    • Photoshop
      • Text Effects
    • Quick-Tip
Home » Photoshop » PSD Tutorial: Create a differently shaped navigation bar
Jul14 15
PSD Tutorial: Create a differently shaped navigation bar

PSD Tutorial: Create a differently shaped navigation bar

Posted by Sipi Sagar in Photoshop, Tutorial

email
print

Navigation bars are generally the opening of a website and also carries the links of that website. So, once we make them differently shaped, colorful with some eccentric sense then they really attract the clients and the end users. This tutorial is about one such navigation bar.

Step 1

Open a document of size 900 px X 300 px with 72 ppi.

Step 2

Now drag vertical guides to 50 px and 850 px. Drag another two more horizontal guides at 50 px and 250 px. Draw a rounded rectangle between these guides.

Step 3

Now press ctrl+enter and change it into a selection and fill it with “0090bf”.

Step 4

Now press ctrl+t right-click and choose wrap option in that.

Step 5

Choose bulge option from that and type -10 in the nearby bend option box.


Then you must get this kind of output.

Step 6

Now move it up such that only the bottom half of it is visible or present inside the canvas like this.

Step 7

Now give it a white stroke of size 3 px and center option using the stroke effect available in layer styles. This is how your output will be.

Step 8

Now type the links inside the navigation bar like this.

Corollary

You can add more effects to this using your creativity to produce better results.

One more result.

Bookmark or Share this Tutorial


0

Written By: Sipi Sagar

Currently working as a corporate trainer for various international companies and universities or schools that deal with business, design, advertising and media and now have got settled as a permanent faculty at Arena Animation Academy, Koramangala. Also working as a freelancer in web designing for the past 2 years. Specialized in web designing, flash applications and 3d architecture.

  • http://geniusgeeks.com Ricky @twitter apps

    Wow. It looks great

    • Sipi Sagar

      Thank you ricky. Thanks for your comments.

  • http://www.graphdesign.com Michela Cappelli

    I think it’s pretty basic…very nice however.

    • Sipi Sagar

      Yeah sure, as you told sticking on to the basics with a little bit of creativity will surely create awesome things.

    • http://hardwaremania.org/ Nick

      Yes, but many people are looking for basic stuff. Remember, keep it simple! (http://en.wikipedia.org/wiki/KISS_principle)

  • gc

    Nice tutorial, but why don’t you explain how to get that last result – “One more result”?

    • Sipi Sagar

      I have already explained how to create such shadows in a previous post “Article: Shadows and Highlights in Photoshop”

  • http://www.creadictos.com Luis Lopez

    I like your tutorial, but its true that is really begginers kind. I’m sure you can do better and more complete.

    BTW I think 1px stroke would be better.

    Keep working you’re on the good way

    • Sipi Sagar

      Yeah, this is a tutorial for the beginners, but the output is not for the beginners. Only people who are in web designing atleast for 5 years can do it.

  • David Naeve

    I have to try this. I’ve just been using the traditional rectangular navigation bars. This is a cool way to make one. Thanks for the post!

    • Sipi Sagar

      Thank you David, I am sure that you will be able to produce better results using this. Keep logged in with animhut for more stuffs like this. Also look into older posts.

  • http://www.x-berry.com MK

    thx.I get it.

    • Sipi Sagar

      Thx

  • Pingback: 185+ Breathtaking Collection of Fresh Articles for Web Designers and Developers | tripwire magazine

  • http://www.konccepts.com/blog/ reciprocal link

    Wow! so cool navigation bar — Its fine — If there is a glossy effect it will be superb –Although it is fine and cool –loving it really . thanks for the post

    • Sipi Sagar

      The glossy effect will get highlighted only with the complete template. Here it may get camouflaged.

Our Advertisers :

Subscribe to AnimHuT (it’s Free)

Add Animhut on  Google plus animhut Free  Email Subscription for design updates animhut on twitter Animhut rss subscription for latest Updates Join our Official  Facebook Page Animhut Flickr Pool

Our Facebook Official Page
Follow @animhut

Latest Post From the Blog

  • Blog Article: How to Find the Top Talent for your Start-up
  • 2012 Facebook Update: New Image Slideshow like Google Plus
  • Today’s Google Doodle : Charles Dickens 200th Birthday
  • Inspiration: 2012 Fresh Caricature on Popular Celebrities
  • Inspiration: Mid 1970′s like Illustrations by Jorge Mascarenhas
  • Miniature Wonderland – Creative Macro Photography Inspiration
  • Inspiration: Innovative and Creative Motion Reel by Jimmy Yuvan

Archives

Community News

  • Etched text effect using Photoshop

    Here is a very easy to follow tutorial to help you easily do it for any kind of color booklet…

  • 10 Best Clothing Website Designs

    Clothes were made initially to keep us warm and also function as a form of protection. However, since then it…

  • 35 Charming and Romantic Wallpapers That Make You Fall In Love

    Love is the most important part in ones life. Even today, in these turbulent times, love always finds a way…

  • Computers Arts Collection Vol 1 – Graphic Design

    Computer Arts Collection is brand new annual series of six comprehensive guides coming from the authors of Computer Arts, and…

  • 20 Cool Battery PSD Templates, Icons, Tutorials

    PSD Templates are an important element which contributes to impressive and effective graphic design. Creating an battery icon isn’t easy…

●● We Recommended ●●



● Best Web Hosting Review
● Best Web Host Companies
● Review BlueHost
● China wholesale
● factory
● Free Website Design
● Website builder
●Mactheripper
● Coupon Codes
• Freelance Web Designer
• Direct TV Packages
● InternetPhonePackage.com
•Best WordPress Themes
•iPage Web Hosting
● Web Hosting Services
●Youtube to MP3

Search by Tags

ANIMHUT art history Articles caricature character design Contest Daily Photography Daily photos design history digital painting Flickr Freebies Funny Videos google google doodles graphic design Icons illustration Illustrator InfoGraphics Inspiration Inspriation mascot Patterns Photography Photogrphy Photoshop Photoshop tutorial Poster Project365 Quick-Tip Review roundup sriganesh stock image stress buster Texture Tutorial twitter VECTORS Videos Viral Video Wallpaper Wordpress wordpress theme

Hall of Fame :

Friends

  • AdmixWeb
  • ArtAtm
  • BloggerJet
  • CreativeOverflow
  • DesignModo
  • Designrfix
  • Desizntech
  • Graphik Design Agency
  • Logolitic
  • Orphicpixel
  • premiumpress coupon code
  • Skyje
  • Smashingshare
  • Underworldmagazines
  • Visionwidget
  • Webdesignfan
  • Webexpedition18

Pages

  • DESIGN NEWS
  • Who We are ?
    • Authors
  • | CONTACT |
  • Site Map
  • Follow us
    • Google +
    • Like AnimHuT fan page
    • @animhut (Twitter)
    • StumbleUpon Profile
    • Add me on Facebook

© 2009-2012 AnimHuT | Designed by Elegant Themes | Powered by WordPress| Sherweb