Post by Pug' on Apr 5, 2007 17:27:18 GMT 1
ok, so i thought as some of you might be interested in designing websites in the near future, a little bit of grids and guides knowledge couldn't do you any harm...
I just built a 960px grid for 1024 aspect ratio. This is the perfect size for the average website now in 2007. Being that not many people go under 1024 under the age of 40, this is perfect. It also matter what audience you are appealing to. This size is actually used universally through the EA.com site
ok so, where to start.
First off you need to create yourself a Photoshop document. The sizes I use now to start a document off is:
Width 1160px -
This allows for enough room to show background. Which clients want to see.(They can get very picky)
Height: 760px -
This hight can (being on how much information you need on the page) change, but keep in mind, that you cant judge what addons n shite people are going to have on their browsers, so a fold will occur... The fold, from my guess will being about 400px from the top of your document, so using the guides(ctrl+r) just bring that down 400 pixels and keep any important information you want the user to see above that line as best as you possibly can.
Ok, so I'm assuming your still with me on this, I hope so anyhow. Forgive me if it makes no sense at all. Haha, I try.
You now should have your document set up for a complete size of 1160 x 760px? If so, perfect.
now to build your guides!!!
ok, so now, its time to work out how you are going to divide 940 into 5 columns. Remember that your going to want a 10 pixel spacing, So make sure 40 is taken off the final out come. Use a calculator.
the out come would be.... 180px for each column with a 10 pixel spacing.
Create a 180 pixel box on a new layer. Make sure the box snaps to the left side guide that you placed there earlier on. Now just create a 10px box on a new layer(this will be your spacing)
going back to the 180px box drag the a guide out and let it snap to the other side of the 180px box. then get the 10px layer and snap that to the guide and drag another guide out. You now have your first coulmn.
Basically now all you need to do, is repeat the process another 4 times.
once thats done. Just use the 10px layer u created and add a guide on the outside of each left and right guide. you then have your 960px guide complete and ready to rock!!!!!
ok, so if you found this complete impossible to read, please please tell me and i will start to adjust things. Its my first try at writing a tutorial of this size.
Hope it helps in so way!!
I just built a 960px grid for 1024 aspect ratio. This is the perfect size for the average website now in 2007. Being that not many people go under 1024 under the age of 40, this is perfect. It also matter what audience you are appealing to. This size is actually used universally through the EA.com site
ok so, where to start.
First off you need to create yourself a Photoshop document. The sizes I use now to start a document off is:
Width 1160px -
This allows for enough room to show background. Which clients want to see.(They can get very picky)
Height: 760px -
This hight can (being on how much information you need on the page) change, but keep in mind, that you cant judge what addons n shite people are going to have on their browsers, so a fold will occur... The fold, from my guess will being about 400px from the top of your document, so using the guides(ctrl+r) just bring that down 400 pixels and keep any important information you want the user to see above that line as best as you possibly can.
Ok, so I'm assuming your still with me on this, I hope so anyhow. Forgive me if it makes no sense at all. Haha, I try.
You now should have your document set up for a complete size of 1160 x 760px? If so, perfect.
now to build your guides!!!
- Start of by filling the background white. It dont matter, but i like white.
- Now create a new layer and create a box 940px wide!!
- Turn rulers on(ctrl+r) then drag the the gudes untill the snap to either side of the 940px box!!
ok, so now, its time to work out how you are going to divide 940 into 5 columns. Remember that your going to want a 10 pixel spacing, So make sure 40 is taken off the final out come. Use a calculator.
the out come would be.... 180px for each column with a 10 pixel spacing.
Create a 180 pixel box on a new layer. Make sure the box snaps to the left side guide that you placed there earlier on. Now just create a 10px box on a new layer(this will be your spacing)
going back to the 180px box drag the a guide out and let it snap to the other side of the 180px box. then get the 10px layer and snap that to the guide and drag another guide out. You now have your first coulmn.
Basically now all you need to do, is repeat the process another 4 times.
once thats done. Just use the 10px layer u created and add a guide on the outside of each left and right guide. you then have your 960px guide complete and ready to rock!!!!!
ok, so if you found this complete impossible to read, please please tell me and i will start to adjust things. Its my first try at writing a tutorial of this size.
Hope it helps in so way!!
