| » Forum Index » Problems and solutions » Topic: Easily dividing/evenly spacing buttons for a website? |
|
Posted on 26/07/07 1:49:52 PM |
|
Atomicfog
Virtual Visualizer Posts: 238 Reply  |
Easily dividing/evenly spacing buttons for a website?
I create quiet a bit of stuff in photoshop involving montages, but when it comes to even and grid-based projects like websites I don't know much about the easy ways to create a layout and/or space things out evenly. My question is: What is the easiest way to divide a long horizontal rectangle into evenly spaced lines (which represent the divider of columns/buttons). Here is an example of what I mean: 
Perfect even spacing: 
I was hoping to be able to create a long horizontal rectangle, and then have a tool that will automatically select spaces evenly on that line for me to fill with a color to divide the buttons or something like that. I tried using the slice tool, which did have some sort of even divider thing that looked like it might work, but it wouldn't let me cut or draw lines on the lines that it had marked except manually... Anyhow, like I said, I just want to know the easiest way to divide a long horizontal rectangle into evenly spaced lines (which represent the divider of columns/buttons). Any help would be much appreciated. _________________ -Atomic |
Posted on 26/07/07 5:27:44 PM |
|
Eggbox
Ovoid Opportunist Posts: 797 Reply  |
Re: Easily dividing/evenly spacing buttons for a website?
Personally, me, myself I would tackle this with a vector programme with my application of choice being Xara Xtreme and save as a TIFF. Trial download http://www.xara.com/downloads Ted |
Posted on 26/07/07 7:56:18 PM |
|
Paul 2007 thru 2010
Lego Legend Posts: 361 Reply |
Re: Easily dividing/evenly spacing buttons for a website?
Use Layer-->Distribute. Draw your own "dividers" each on a layer of their own. Place them on the rectangle you want to divide. Make sure you have one at each end. The position of the others does not matter. Then select all the layers that contain your dividers and do Layer-->Divide and your dividers should be evenly spaced between the two outer ones you placed. It is up to you to actually create areas to colour but at least you can use your now aligned dividers as a reference. |
Posted on 27/07/07 02:44:45 AM |
|
Atomicfog
Virtual Visualizer Posts: 238 Reply |
Re: Easily dividing/evenly spacing buttons for a website?
I may end up having to do that, but I know Photoshop is supposed to be great at making websites, so I'm wondering how other people who use Photoshop for websites get passed this dilemma.
I appreciate the help, but I don't see anything that says "divide" under the layer menu, but it sounds like this technique won't divide a line into sections for me, and getting something perfectly even manually takes alot of time, and usually doesn't come out very great anyway. |
Posted on 27/07/07 03:02:59 AM |
|
Steve Mac
Grunge Genie Posts: 539 Reply  |
Re: Easily dividing/evenly spacing buttons for a website?
If you know how many pixels wide you want to span, divide the number of pixels by four and make your rollovers that size. _________________ Steve Mac |
Posted on 27/07/07 05:54:05 AM |
|
Atomicfog
Virtual Visualizer Posts: 238 Reply |
Re: Easily dividing/evenly spacing buttons for a website?
Well, if there is no other way that is how I would do it, but it doesn't seem like that would be the easiest way. |
Posted on 27/07/07 09:22:33 AM |
|
rufus
Destructive Demon Posts: 243 Reply  |
Re: Easily dividing/evenly spacing buttons for a website?
I would approach it a little differently. Start a new document 600 x 30 px, 600 px/in transparent. Position the 'Rectangular Marquee' set to 'Fixed Size', 100 px by 30 px at the left hand side of the document (ensure snap is on). On a new layer apply a gradient with appropriate colours then deselect. On a new layer position the 'Single Column Marquee' on the right edge of the layer below then fill with an appropriate colour then deselect. Trim this line to 24 px high and centre. Merge down the top two layers. Make five copies (Ctrl-J five times). Move each the five layers progressively to the right until the background is filled. Add text as required and merge down to each button. It looks a bit long winded but it only takes ten minutes, you can of course use your own sizes to suit. rufus 
If you want to stick with your original request of cutting up a horizontal rectangle, you can simply use the 'Rectangular Marquee' set to 'Fixed Size' and then use "Layer/New/Layer Via Cut" (Shift-Ctrl-J), moving along the rectangle with each cut. |