photoshop-grids's Introduction

Photoshop Grids

A collection of grid template PSDs for various screen sizes. Currently includes templates for: iPad, iPhone, and Desktop screens.

View the Project Page

Quick overview

All grids based on 12 columns
Gutters are on the large size, ranging from 44% - 57% of column width
Outer gutters built in. (1024px-wide iPad landscape grid has a content area of 968px)

Looks like this

Details

iPad

Landscape

1024x768
Columns: 55px
Gutters: 28px

Portrait

768x1024
Columns: 38px
Gutters: 22px

iPhone

Portrait

640x960
Columns: 36px
Gutters: 16px

Desktop

Standard

972px wide
Columns: 55px
Gutters: 24px

Widescreen

1144px wide
Columns: 65px
Gutters: 28px

IAB-Friendly (and slightly wide)

1100px
Columns: 65px
Gutters: 20px

Email

Standard

8 Columns
640px wide
Columns: 60px
Gutters: 20px

Help make it better

Feedback, criticism, ideas, and contributions are more than welcome!

Changelog

v0.1 - 11/15/2011 - Initial release

photoshop-grids's People

Contributors

Stargazers

Watchers

photoshop-grids's Issues

Wrong documentation

Hi,

I think that the readme is wrong. Gutter width in the iPad portrait grid is 24px, not 22px.

Should have various iPhone versions

Is this project still alive? There should be different grids for multiple iPhone versions

Is there a css grid that goes with this?

A designer I work with sent me some PSDs using your grids. I'm supposed to create a theme for a website out of them, but as far as I can tell, there is no css grid system that lines up with the widths and gutters you have? What system should I be using? Can this info be added?

Recommend Projects