Today I decided to recreate my blank web design Photoshop template file that is retina ready – When I say retina ready I mean its basically 200% larger than my original Photoshop file. The reason I have had to re-draw a new retina ready 1200px grid template instead of just upscaling the original file is so I know 100% that all the dimensions are pixel perfect. Photoshop has a knack of anti-aliasing edges even if you snap to point or grid etc – It never works perfectly, the only way to make sure all grid widths and columns are correct is to re-draw them… So I did today. It’s a tediously boring job and a couple of years ago I would rely on all my web designs to fit and snap perfectly to my grid.
I’ve decided to give my Photoshop file away as a download here – Retina Ready 1200px Grid Template Photoshop PSD
The file has 1,2,3,4,5,6,7,8,9,10,11 and 12 column grids for 1200px width layouts as well as a 960px width grid thrown in there with 1,2,3,4,5,6,7,8,9,10,11,12 and 16 column grid layouts.
At the time of writing this article this is the basis Photoshop file we use to design all our web sites at Bamboo. We all work to a set grid and width before a project starts and this file helps the design process. This is not a finished file by any means though… in fact I am already working on anew file with media break grids in there with columns and I may start to group certain widths and columns together with their common responsive counterpart to make the file even more useful.