With our first large-scale responsive Omega-based website close to launching, and the second project about to start, it was time to refine the graphic design process and make it Omega-friendly.  Some important numbers to get started:

Table 1: Default Alpha grid sizing for Omega theme

The world of responsive is great, but what happens when you have a fixed element?  You can make images responsive, but we have to include DART ads on these sites which sit at a stagnant 300px regardless of how responsive everything else is.

On the first project, we had to do some pretty nasty width overrides which defeated a lot of the benefits a grid provides to get our ad-laden sidebar to be 300px.  This time around we decided to plan ahead and pick the closest columns that can match 300px.  To do this, I looked through the CSS files of each layout (wide, normal, etc.) and at each number of columns checked how many columns was >300px.  Here were the results:

Table 2: Number of columns 300px or greater

PSD Files for Omega

To make life easy for our graphic designer - and in turn ensure we get a design that works well with Omega-sized columns - we built out these PSDs based on the Wide, Normal, and Narrow grids Omega uses.  I've added 30px on either side of the PSDs similar to the ones included in the 960.gs PSDs.

Table 3: PSD Files

Or you can download them all (12 and 16 Col)... and 24 Col zip here.

A couple notes on the PSDs:

• I didn't make the 24 Col files, but if you'd like to I'd be glad to post them or link to your site.
• For the Fluid I just used the percentages divided against 320px width.  No 30px of space right and left on these as the width is 100%.
• To build the guide lines I used the super-handy (and free) GuideGuide extension.

Steps to build them (using 720, 12 Col as example) Instead of following the steps below, check out the handy gridcalculator.dk - it can even generate the PSD guides for you (no filled in semi-transparent red columns, but close enough!):

1. File > New
2. Width: 720 + 60 = 780px | Height: 780px | Resolution: 72ppi
3. Open GuideGuide extension (assuming you've installed it)
4. left margin: 40 | number of columns: 12 | column width: 40 | column gutter: 20 - click the GG circle to generate
5. Drag rogue first guide line at far left of image off the image to remove it
6. Rectangle Tool set to black, draw over first column, select Vector Mask on rectangle shape, switch to Add to shape area mode, draw over rest of columns
7. Change shape color to #ff0000, Opacity to 10%
8. Open GuideGuide extension (creating lines between margins)
9. left margin: 30 | number of columns: 6 | column width: 60 | column gutter: 60 - click the GG
10. Drag the rogue first guide line to far right 10px after last guide line (or delete it and numerically add a new guide line at 750px)
11. Voila!