• How To Create 12 Column Grid In Photoshop

Learn how to use the 960 Grid System to design a website template in Photoshop. You will be practicing layer styles to for effects and positioning elements based on the 960 Grid System.Preview of Final ResultsDesign a Web Template using the “960 Grid System” Photoshop TutorialStep 1Whenever I’m mocking up a web template in Photoshop I use a generic grid called the ‘960 Grid System’. This grid system has become very popular in web design, however I still believe that grid systems like this shouldn’t be followed too strictly so the main reason I use this system is because the PSD files come with lots of guides set up already which saves a lot of time. So I’d advise downloading the grid system free from. Once you’ve downloaded it open the 12 column PSD file in Photoshop and you should have something that looks like the image below.Step 2Try turning the guides on if they aren’t already; do this by going ViewShowGuides and ViewSnapToGuides.

Below you’ll see that I’ve drawn a rectangle showing the container where all the content will go, you don’t need to draw this rectangle as the background will be whit anyway but if it helps then go for it.Step 3Create a new layer then select the gradient tool and choose a gradient going from white to black. Holding shift drag horizontally to get a gradient looking like the image below, you may have to try a few times to get it right.Step 4Select the rectangular marquee tool and drag from the top left corner down to the bottom and snapping to guide which was at the left side of the box shown in step 2. Now go LayerLayer MaskReveal Selection and you should be left with something that resembles the image below.Step 5Repeat the last two step again for the other side and make sure its symmetrical.Step 6Create a new layer group by clicking the folder icon in the layers panel. Then drag both these gradient layers within the group then change the opacity of the group to 10%.Step 7Next I added some rectangles that look a bit like stitches, If you were doing this in CSS then you could use a dashed border so you don’t really need to do this step too accurately. I’ve got a good tip for doing this; first create a new layer then make one small rectangle then duplicate this layer. Now hit Ctrl+T and move the rectangle down slightly then just hit Ctrl+Shift+Alt+T a few times.

How To Create 12 Column Grid In Photoshop

What this does is remembers the first transformation then the key combination mentioned duplicates the layer then applies the same transformation. If this seems a bit complicated then just create each one manually. Afterwards merge all the rectangle layers by selecting them then hitting Ctrl+E.

You can now just duplicate this layer then move each layer to either side.Step 8Now add a title and a tagline, the one that I’ve used was created using only text and the font, ‘Rockwell’. I used the same blue here as the stitches and if you are familiar with swatches then a good idea would be to set a blue and grey swatch that you can use again.Step 9Now create the menu by using a sans serif font like Helvetica or Tahoma. Now just type a few words in uppercase using the same blue color. Another thing that I tend to do especially when using all uppercase is to increase the tracking (horizontal letter spacing) of the letters, to do this go WindowCharacter then highlight the word and change the tracking. I did each of the menu items in a different layer.