How To Use Photoshop's Guide Layout Feature

of 08

Getting Started

Grids make layout a snap.

I was participating in a podcast this week called “The Mothership”. It is a weekly panel discussionaround all things Adobe and at the end of the discussion we go around the table and talk about something in one of the apps that caught our eye that week. One of the moderators happened to mention he stumbled across a “Grid Feature” in Photoshop that he had completely overlooked and made his life tremendously less complicated.

One of the major “beefs” with using Photoshop to create comps for a variety of web layouts ranging from desktop to mobile is creating the grids and columns for the comps is a somewhat manual process. No longer. These things can be created right in Photoshop using the New Guide Layout Dialogue Box.

Here’s how.

of 08

Start With "Mobile First"

Choose your mobile device.

Let’s assume we are developing an project destined for an iPhone 6, an iPad Mini and desktop use. We first open a New Photoshop document using File>New. When the New dialog box opens, select Mobile app design from the Preset pop down. Next, you open the Size pop down and select iPhone 6 from the choices.

Don’t pay much attention to the Width,Height and Resolution values. Our primary concern is creating the mockup from a grid.

Click OK.

of 08

Select View> New Guide Layout

The New Guide layout dialog box.

This nifty dialog box is a godsend because it gives designers the ability to create custom grids that allow for the precise placement of content on the page.

The first stop is the Preset pop down menu. Here you can choose between 8,12,16 and 24-column layouts. In our case none of these are workable due to the page dimensions. Instead I selected Custom and decided that 2 columns and 8 rows was what I needed. I also decided that 20 pixels for the Column and Row gutters worked best for this particular project. In order to keep the content somewhat orderly I also decided to add 10 pixels of margin to the top and bottom of the page and 20 pixels would work for the Left and Right margins.

of 08

Creating A Non-Uniform Grid

Creating a non uniform grid.

You can also set custom width and heights for Guide Layouts. For example, I could choose to set the Column Width to 300 px and the Row Height to 150 px. In this case a little caution icon will appear under the Preview check box.  This alert is telling me the Row layout is too large. Do the math. The sum of the gutter and the height is 170 px. This means the active area should be 1360 pixels . Toss in the 10-pixel top and bottom margin values and the value changes to 1380 pixels. Seeing as how the page is 1334 pixels high, it makes sense for Photoshop to kick out an alert.

I changed the Row Height to 100 px and even though the Alert disappeared the grid is totally off balance.  A quick solution is to select the Centre Columns check box at the bottom of the dialog box.

Once you are satisfied, Click OK.

of 08

Create The Tablet Guide Layout

Next up is the iPad Mini.

 Open a New document ,choose the Mobile app design preset and, in the Size pop Down choose iPad Mini. Name the Document iPadMini_Portrait. Remember, in a responsive universe, you have no control over the orientation of the device. In this case we are going to create a guides for the mini in portrait mode.

Click OK.

of 08

Add The New Guide Layout

Creating a grid for portrait view.

In this case I decided to go with 6 Columns and 6 Rows with 20 pixels for both the Column and Row Gutters. I also added 20 pixels of margin all around.

Click OK and Save the document.

of 08

Create The Landscape Grid

Don't overlook Landscape orientation.

Open a New Ipad Mini document but this time switch the Width and Height values to 1024 pixels and 728 pixels and name the document iPadMini_Landscape.

Open View> New Guide Layout and change the number of columns to 8 and the Row Count to 6. I’ll leave the Gutter and Margin values to you.

Save the Document.

of 08

Lay In The Content

The grid facilitates placement of content.

 As you can see in the above image, the grid resulting from the Guide Layout dialog box allows you to lay in the content in a clean and balanced manner without having to “fiddle” with the position of the content.