
If your grid calls for sub-pixel measurements, guides will be rendered as closely as possible, with their positions being rounded up to the nearest full pixel. The only advice that I'd offer is that although GuideGuide does a great job of handling all of the necessary math, it has to work within Photoshop's limitiations, namely that guides can only be placed on a full pixel. If you've made it all the way through, good work! You now have all the techniques required to create your own custom baseline grids in Photoshop.


Select the version that matches your Photoshop (CS4+) and save it to an appropriate location on your hard drive. In today's tutorial, I'm going to be using a free extension from Cameron McEfee called - appropriately - GuideGuide. I'll be taking you through each step required to set both a horizontal and vertical baseline grid in Photoshop that is flexible, customizable and dead easy to complete in less than ten minutes. In a similar vein, we're going to be using a Photoshop extension that will do all the heavy lifting for us - a great option, especially if creating your own custom script is a little too ambitious for your needs.
#PHOTOSHOP TYPETOOL BASELINE HOW TO#
In a recent tutorial on Webdesign Tuts+, Amir showed us how to create a Flexible Grid script for Photoshop to take the grunt work out of setting your guides for your layout.

Additionally, during the development phase, using a CSS framework with a compatible baseline grid can make translating design into code far easier. A baseline grid will establish consistent spacing between your page elements, creating harmonious rhythm throughout the page. Setting out a baseline grid for your Photoshop-based designs is an indispensible first step in any new website project.
