Search the web
Sign In
New User? Sign Up
ydn-patterns · Yahoo! Design Pattern Discussion Group
? Already a member? Sign in to Yahoo!

Yahoo! Groups Tips

Did you know...
Want to share photos of your group with the world? Add a group photo to Flickr.

Best of Y! Groups

   Check them out and nominate your group.
Having problems with message search? Fill out this form to ensure your group is one of the first to be migrated to the new message search system.

Messages

  Messages Help
Advanced
How to Create Fluid Horizontal Navigation in Photoshop   Message List  
Reply | Forward Message #149 of 202 |
I've always wanted to do this the right way, mainly because I've always beat my head against the wall trying to come up with an effective way of creating fluid horizontal navigation in my design comps. I've always just eyeballed it or tried (and failed) to use the Justify all setting in the Paragraph palette... and even using the distribute layers with even worse results.

So I decided to sit down and really think about it (without the deadline of the project itself breathing down my neck) and I have worked out a solution which (in my mind) works well.

Take a look at this JPG to have a grasp as to what's going on here:








The first things you need to find out are:
•The Total Width of the Nav Bar
•The Sum of Nav Element Widths
*These values are your foundation


You should know the width of the nav bar - in this case it's = 720.

To get the sum of the nav element widths - you simply command click each text layer to create a selection and check your Info palete to find out the width of the selection. You do this for each element (write them down) and then you add them up, like so:
Home : "36" + News : "33" + Products : "53" + About : "37" + Contact : "49" = 208

Now you can find out the total available margin space by subtracting the sum of the nav element widths from the total width of the nav bar, like so:
720 - 208 = 512

To determine how much margin space must be inbetween each nav element we divide the total from the last step and divide it by the total number of nav elements, like so:
512 / 5 = 102

Now you can nudge each nav element exactly 102 pixels apart from eachother.

Next you need to add the dividers inbetween each nav element, you get this number by simply dividing the space inbetween each nav element if half, like so:
102 / 2 = 51

This number will also be used on each side of the nav bar.

These numbers that were produced in this particular tutorial are specific to my design comp. In order to layout your own, you just have to follow the formula provided in the example JPG.

Code:
(Total Width of Nav Bar - (Sum of Nav Element Widths)) = Total Available Margin Space

(Total Available Margin Space / Number of Nav Elements) = Space Inbetween Nav Elements

(Space Inbetween Nav Elements / Half) = Space Inbetween Dividers


I'd like to see something like this added to the "Horizontal Bar" section of "Navigate".

I would also like to see something like this done with javascript or something - on the front end of a site.

Feedback is welcome :)

Thu Mar 22, 2007 7:33 pm

aaronguiles
Offline Offline
Send Email Send Email

Forward
Message #149 of 202 |
Expand Messages Author Sort by Date

I've always wanted to do this the right way, mainly because I've always beat my head against the wall trying to come up with an effective way of creating fluid...
aaronguiles
Offline Send Email
Apr 4, 2007
5:38 pm
Advanced

Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Guidelines - Help