Design concise Web sites using 960 grid systems

Design concise Web sites using 960 grid systems

Tutorial we will learn how to design a Web interface using 960 grid systems. The grid system optimizes the Web site design process.

Final Effect Preview

1. New Document

Parameters: Width 1680px, high 1100px, background bright Gray (#F9F9F9)

2. Add a Grid

There are many grid systems available for download, which is the best reference for us to build our own grid system. If you have not used a grid system before, this article is a simple introduction. It makes your job easier and more rule-based, and it's the most effective assistant to the prototype layout.

Download 960 grid system, address http://960.gs/

When the download is complete, come to the Templates folder and use Photoshop to open the 960pix wide, 12-column grid.

Below we will import the grid into our working document. Select the 12 column grid layer Group, flatten the layer groups, and copy and paste them into the working document.

Now we need a benchmark grid. The Datum grid is an important reference for the element to stay white and to take a higher value. First, create a new file, the width of all 24px, delete the background, a new 1px height of a single line, placed at the bottom of the canvas. Definition pattern: Edit-Define pattern, give the pattern an easy to remember name.

Return to working document, new layer, fill pattern: edit-fill, fill with just defined pattern.

Finally, we'll use a guide to mark our work area. New guides: View-New guides, select vertical, and new guides in 360px, 840px, 1320px.