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 :)