Design a Web Template using the “960 Grid System”

Design a Web Template using the “960 Grid System”

Design a Web Template using the “960 Grid System”

Step 8

Now 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 9

Now 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 Window>Character then highlight the word and change the tracking. I did each of the menu items in a different layer.


Step 10

Now duplicate all these words and change the color of each of them to the grey color. So now you have a set of layers with the menu items in blue and a set of the same menu items in grey. This is just so that you can see what the words would look like if you were to hover over them in the real site. Only make one of each menu item visible at a time.


Step 11

Next I made a custom RSS feed icon which you only really need to add if you were planning to have RSS feeds available on the site. First I drew a rectangle using the blue color then I added the word 'RSS' using the font, 'Rockwell' in white. For the actual feed icon you can download it from here in the 'Developer Kit' and place it into your document. I then put the icon in a new layer group then duplicated the group then changed the blue rectangle to a grey rectangle, again to show what it would look like when hovered over.


Step 12

I thought that a kind of slideshow element would look good on the homepage so to figure out what it would look like I copied in a stock image which matched the color scheme, if you;re interested the image can be downloaded from SXC here. Paste the image into your document then scale it down and position it like so.


Step 13

Select the rectangular marquee tool and drag a selection box over the image (the part which you want to keep) then select the layer with your image in it then go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

Pages: 1 2 3 4

16 comments on “Design a Web Template using the “960 Grid System””

  1. An outstanding share! I have just forwarded this onto a co-worker who was doing a little homework on this.

    And he in fact ordered me lunch due to the fact that I discovered it for him...
    lol. So allow me to reword this.... Thanks for the meal!! But yeah,
    thanks for spending some time to talk about this issue here
    on your internet site.

  2. I love what you guys are usually up too. This kind of
    clever work and coverage! Keep up the fantastic works guys I've included you guys to my blogroll.

  3. This article shows just the basics and is very good if you are new or just learned photoshop and take your skills further. The use of 960 grid is not limited to just setting the width but it is used whenever you need to position anything. Suppose you are positioning an image you can do it easily with the help of the grid.

    You can also do it without it but it becomes much easier by using the grid

  4. We need to know how you use the template to section out all the content in your wrap - not how to make the wrap 12 columns wide...

  5. This article is pointless. You say you're designing using the 960 grid system, but the only time you do anything with it is when you download it and plop the column graphic into your document. You're not telling anyone about HOW you are using the 960 grid system. Who cares what the template looks like? We want to know how you're using 960 grid!

    1. agree.

      author only use the grid at first (only for the width). it didn't help user to know how use the 960gs in photoshop.

    2. The 960 grid system is only used for width purposes, its just a pre-made document with the width pre-made. The only other uses is using the other bars for aligning things.

Leave a Reply

Your email address will not be published. Required fields are marked *