How To Create a Baseline Grid Pattern in Photoshop

by Jake Rocheleau
on June 24, 2015

The best designers will admit that grids are vital to any project. Whether you’re designing for print or the web, grids offer structure that can either be followed or ignored. Most people think of grid systems like 960GS where you create long columns across the full width of the page.

But there is another grid related to typography known as the baseline. It typically adds a new grid line every X number of pixels based on the website’s line height. As you can imagine, this would be exhausting to manually create by hand.

baseline typography style

Instead it’s better to create a pattern for your baseline and fill it onto a new layer. In this guide I’ll show you how to create a quick baseline pattern and apply it to your own mockup.

1. Define your Grid

First you need to plan out how much space should be available for typography. On the web it’s common to use a metric from your paragraph text.

At first you may not know exactly what to use, so you might have to guess and update later if needed. For this example let’s say you’re using 12px font with a 16px line height. This means every 16 pixels we need to have another grid line.

photoshop character palette spacing

With this in mind create a new PSD document or grab a screenshot from your favorite website. Leave this open for later use.

2. Creating the Pattern

Make another new document with 1px width and 16px height.

Grab the pencil tool and set the brush size at 1px. Change your foreground to a bright color(I’ve chosen green) and make a mark at the very bottom of your 1x16px document. It should look something like this:

repeat pattern create photoshop

Now go up to Edit > Define Pattern. Give it any name you want and hit OK.

define pattern photoshop baseline

We have our baseline created but we need to add it into the mockup. So jump back over to your website document and make a new grid layer.

3. Adding the Baseline

With a new layer created move it on top of everything else in the mockup. You can always hide the baseline layer when it’s not needed, but when it is needed it should be visible on top of everything.

fill pattern photoshop baseline

Go up to Edit > Fill and choose your recently created pattern.

In the end you should have something that looks like this:

baseline completed screenshot

I actually pulled a screenshot from Smashing Magazine and recreated their baseline. You can see it fits nicely with the paragraphs and flows evenly down the page.

If you want to lower the baseline opacity just edit the Fill value found in the layers palette.

fill opacity layers photoshop

And if you ever want to change the color just CTRL/CMD+Click on the baseline layer to select all of the lines at once. Then you can change your background color and use CTRL/CMD+Backspace to fill the selection.

About Jake Rocheleau

Jake is a freelance writer, designer, and illustrator. He currently writes articles on user experience design for web & mobile. You can see more work on his portfolio site and follow his tweets @jakerocheleau.

Top