Photoshop for Web Design: How to Use a Grid System


show more Using a grid system provides you with in-depth training on Web. Taught by Justin Seeley as part of the Photoshop CS6 for Web Design (2012) show less
please wait ...

Using a grid system

When it comes to creating mockups inside of Photoshop, one of the best ways to create a mockup is to utilize something called a grid system. There are a ton of different grid systems available that you can download templates for online. The most notable is probably the 960 grid system, which you can go to by going to www.960.gs in your web browser. You can download a template there which will give you a Fireworks, Illustrator, Photoshop template. There are all kinds of different ways that you can utilize that design. However, the 960 grid template can be somewhat confusing for some people.

Because it uses a width of 960 pixels, it doesn't lend itself well to things like responsive design. Therefore, in my workflow, I've actually adopted something called the Responsive Grid which was developed by a web designer named Elliot Jay Stocks and you can visit his web site by going to the following address: eliotjaystocks.com. And inside of the document that I have open here,...

Using a grid system
Video duration: 8m 28s 4h 56m Appropriate for all Updated Oct 04, 2013

Viewers:

Using a grid system provides you with in-depth training on Web. Taught by Justin Seeley as part of the Photoshop CS6 for Web Design (2012)

Subject:
Web
Software:
Photoshop
Author:
please wait ...