THE QUICK & EASY GUIDE TO ACHIEVING PIXEL PERFECTION USING BASELINE GRIDS02 Jan 2011
Pixel perfection is a design that has nothing out of place, a design that achieves complete balance and harmony. This design could have the ugliest elements ever created by man but still be pixel perfect. Achieving such perfection can be time consuming without the use of a set of rules to help steer you along. These set of rules begin with the use of a good grid system. Every designer knows the benefits of using grid lines and grid systems like 960 but a baseline grid is equally as important and helpful.
WHAT IS A BASELINE GRID?
Evenly spaced hohttp://vaughanmoffitt.com/wordpress/wp-admin/post.php?post=757&action=edit&message=1rizontal grid lines. They work best when closely bunched together.
WHY USE A BASELINE GRID?
As you know, sticking to a grid helps you balance your designs, which in turn assist you in achieving pixel perfection. Using a baseline grid offers you that extra level of balance and speeds up your design process as it removes the need to experiment with the positioning of elements.
HOW TO USE A BASELINE GRID FOR AN INTERACTIVE DESIGN
You use a baseline grid like you would any other grid; you use it as a guide to align the elements on the page. The true beauty of the baseline grid is noticed when all your elements fall into place next to each other. Text blocks meet up with sub navigation, the bottom of your images meet the bottom of your text even the text inside buttons falls into place with ease.
How to set it up
Most interactive designers create elements using multiples of 5px. For example 55px high navigation bar, 35px high button, 20px gutter so it makes sense to set your baseline grid 5px apart. If you design in multiples of 2px you should just adjust the baseline to be 4px apart.
STEP 1: CREATING A BASELINE GRID
Illustrator seems to cope with using a lot of guides but Photoshop struggles a fair bit so I have found the best method is to use a pattern.
HOW TO CREATE A 5PX BASELINE GRID PATTERN IN PHOTOSHOP
- Create a new 72dpi document 5 x 5px
- Make a new layer and name it ‘baseline’
- Turn off the background layer
- Use your ‘pixel tool brush’ to draw a red 1px line at the bottom of the ‘baseline’ layer
- Make the layer a pattern by selecting ‘Edit’ > ‘Define Pattern’
- Name the pattern ‘5×5 baseline grid’
- Close this document (no need to save it)
STEP 2: IMPLEMENTING A BASELINE GRID
Now you have your baseline grid pattern defined you will need to set it up in Photoshop
HOW TO IMPLEMENT YOUR BASELINE GRID IN PHOTOSHOP
- Select ‘Create New Fill or Adjustment Layer’ > ‘Pattern’ (as shown above)
- Your newly created ‘5×5 baseline grid’ pattern should show up by default
- Select OK
- Name the layer ‘Baseline’ and set the layer to 25% opacity
- Keeping this layer on top of your pallet at all times will enable you to align elements beneath it
- Now lock the layer so you don’t select it all the time
APPLYING TYPOGRAPHY TO A BASELINE GRID
Our print designer ancestors knew a thing or two about typography but unfortunately some of the finer points they developed haven’t found their way into web design. This has been largely due to the past restrictions we faced but modern day front-end development methods give us much more freedom to design some really cool typographic treatments.
WHERE TO ALIGN YOUR FONT
A lot of designers use the ascenders and descenders of the font anatomy to space and align their text with design elements but this can often lead to inconsistencies in the design. When you use a baseline grid you should align the baseline of the font with the baseline grid. When you put this in to practice it can really be a thing of beauty.
SETTING HEADINGS AND BODY COPY
When applying type to a baseline grid its all about the line height, the size of a font doesn’t matter that much. Because our baseline grid is set to 5px our line heights must be multiples of 5. The line height of all the fonts in the below example is 25px. Notice how the text blocks on the right and left align perfectly to the baseline.
APPLYING IMAGES TO A BASELINE GRID
If the baseline is set to 5px then do your best to design all your graphics in multiples of 5. This includes everything from navigation, slideshow images, thumbnails, icons and so on. This might sound a bit restricting but having this rule set in place gives you a guide to base your design on and removes the hassle of experimenting with placement which in turn makes the design process a lot quicker and results in pixel perfection.
WHERE TO ALIGN YOUR GRAPHICS
Just like in typography you should align your graphics baseline with the baseline grid as shown in the magnified example below. Notice how the bottom of the image sit on the baseline but the top of the images sit just below it. This is an important feature as it will cause all your graphics to be multiples of 5px.
BASELINE GRIDS IN PRACTICE
Ok enough of the theory lets see it in action! Below are 5 examples from my portfolio that show the use of a 5px baseline grid. Pixel perfect if I do say so myself.