Photoshop Grids

Photoshop grid templates for various screen sizes and common constraints.

768x1024 iPad portrait mode

What's this?

It's a collection of PSDs with predetermined grids for common design scenarios. Each template contains a columnar grid defined with guides and overlays.

All of the templates use a 12-unit grid, except for the email template, which uses an 8-unit grid. Imitating responsive layouts, units and gutters increase in size (approximately) as the canvas gets bigger.

Gutters are on the large side to offer a little more space for touch interfaces. For better display on mobile and tablet devices, which have fixed viewports and hard screen edges, the outer gutters (container padding) are the same width as the inner gutters.

Some of the widths for the desktop grids might seem weird. Instead of focusing too much on the size of the screen I built these grids from the content out.

Tablet, mobile, & email

iPad: 1024x768 Landscape orientation

iPad: 768x1024 Portrait orientation

iPhone: 640x960 Portrait orientation

Email: 640px

Desktop environments

Standard: 972px

Widescreen: 1144px

IAB-Friendly: 1000px (Allows for a 320px-wide sidebar that can house a 300x250 unit with 10px of padding.)