I have
encountered the 960 grid system before, when modifying pre-designed web templates
for clients in the past. Mostly I have only been exposed to it via a CSS file
called grid.css or 960.css. In the past I did not know what to make of it.
Looking at those CSS files I noticed a series of classes called grid, prefix,
suffix, push and pull; and all of them had derivatives (grid_1, grid_2, etc.).
As it turns out, the 960 grid system is not an actual component or element of
CSS, but a stylesheet created for ease of work.
What the
stylsheet essentially does is offer a designer a pre-built group of classes
that effectively divides a 960 pixel wide block into either 12 or 16 columns. So
I am relieved to now learn it has a presence within the Photoshop Web Design
community. I found a Web Design tutorial that uses this grid and dove in. Going
forward I will be applying this gird to all my designs.
The template
I created, using the 960 grid, is a beast! It is a Layered Photoshop file, weighing
in at 56MB and it has given me some great ideas on how I can modify my other templates
I’ve made. It took me pretty much an entire day and that was only the
layout/template. The content is mostly filler with the exception of the graphic
slider image I made.
High resolution version of the template viewable here:http://psypher101.deviantart.com/art/Portfolio-2-Photoshop-layout-393771255?ga_submit_new=10%253A1376694657
No comments:
Post a Comment