Photoshop : Free Plugin For Dealing With Grids

photoshop

Take a moment and think about creating a multi-column grid in a Photoshop comp. Some designers just estimate and drag guides arbitrarily onto the stage. Others draw vector shapes, duplicate them to represent columns, then stretch them to fit their design.

How to calculate grid (formula) :

(siteWidth – (gutterWidth × (numberOfColumns – 1) ) ÷ numberOfColumns = columnWidth

COLUMNS AND ROWS

Designing a site that needs multiple columns and gutters? GuideGuide has your back.

photoshop grid

 

 

MIDPOINTS

GuideGuide makes finding the midpoint of items within your design a breeze. Simply draw a selection or  + click (ctrlclick on Windows) to create a selection around the item you want to find the midpoint of. To find its midpoint, click one of the midpoint buttons.

photoshop midpoint

 

GuideGuide places a guide at the midpoint of the selection. Now you can easily center align elements under the original item.

MEASURE NAVIGATION

  1. Make a selection the width of your site
  2. Enter your info, thinking of the columns field as the number of navigation items and the gutter field as the space you want between each item (if you want it).

ELEMENT PADDING

  1.  + click (ctrl + click on Windows) the item to make a selection around it.
  2. Enter a negative margin in one of GuideGuide’s margin fields, and click the icon next to it. GuideGuide will fill that value into all the margin fields.
  3. Use the newly placed guides to draw your box.

BASELINE GRID

Using GuideGuide’s explicit row height, you can easily create a baseline grid for your design.

  1. Enter your desired line height in the row height field.
  2. Align your type and other elements to your new baseline grid.