Become a designer with five skills! The second trick ~ ~

Thank you for continuing to pay attention to this series of articles, today, the wings of the small series to teach you, is to become the UI field of the small prince of the second skills ~ ~ Network! Skill Two   --  Grid

Sketching is the most basic page design skill, and the use of grids (or grid systems) is overlooked by many designers. Also as one of the most important tools of graphic design, as early as 1629, King Louis XIV 14 ordered the creation of a Royal Special Committee for the management of printing, led by mathematician Nicolas Gazon (Nicolas jaugeon). The Commission has proposed a new font design proposal: Based on basic, using squares as the basis for design, each font box is divided into 64 basic square units, each square unit is divided into 36 small lattice, so that a printed layout is composed of 2,304 small lattice. It was the first scientific experiment on typography and typography in the world. is also the embryonic form of the grid system ().

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/D0/wKiom1WI74fB-tQXAAQre9SuFAo227.jpg "title=" 2-1. JPG "alt=" wkiom1wi74fb-tqxaaqre9sufao227.jpg "/>

Sketching is the most basic page design skill, and the use of grids (or grid systems) is overlooked by many designers. Also as one of the most important tools of graphic design, as early as 1629, King Louis XIV 14 ordered the creation of a Royal Special Committee for the management of printing, led by mathematician Nicolas Gazon (Nicolas jaugeon). The Commission has proposed a new font design proposal: Based on basic, using squares as the basis for design, each font box is divided into 64 basic square units, each square unit is divided into 36 small lattice, so that a printed layout is composed of 2,304 small lattice. It was the first scientific experiment on typography and typography in the world. is also the embryonic form of the grid system ().

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/D0/wKiom1WI8Pygtn5NAAFQRoNvjh0195.jpg "title=" 2-2. JPG "alt=" wkiom1wi8pygtn5naafqronvjh0195.jpg "/>

The other is a more familiar vertical grid, also known as the grid system (such as), because of the popularity of the 960.gs and other front-end frameworks, the Grid System is now more common, most designers understand the use of Vertical grid planning page structure.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/CD/wKioL1WI8sbQ4aDJAAItWV3LOz0963.jpg "title=" 2-3. JPG "alt=" wkiol1wi8sbq4adjaaitwv3loz0963.jpg "/>

And the true specification of the page design also consider the vertical page grid and the vertical rhythm, whether you use Photoshop or sketch can be more convenient to generate horizontal and vertical two direction of the auxiliary lines, Photoshop CC 2014 as an example, Using plug-in guideguide, you can quickly build a custom page grid system, such as:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/D0/wKiom1WI8RzzHYI-AAa7uBPx29Q204.jpg "title=" 2-4. JPG "alt=" wkiom1wi8rzzhyi-aaa7ubpx29q204.jpg "/>

When we look at the details, the left edge of each page element is aligned with the longitudinal guides, while the height of the element, the line height of the font, the gap between elements, and the spacing between the paragraphs are regulated by a horizontal grid, guaranteeing a height of 8 integer multiples, and a longitudinal centering, as well as:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6E/CD/wKioL1WI8uixwzaJAAKQ7v-KCjg029.jpg "title=" 2-5. JPG "alt=" wkiol1wi8uixwzajaakq7v-kcjg029.jpg "/>

It is worth reminding that the use of such a large-scale grid system, a page to do the eyes are not disabled and half blind, I am particularly thoughtful (so intimate is not so you want to work with me particularly?) ) to tell you that you can change the color of the grid in the global settings, the default cyan blue Basic deceptive, and then change the artboard background color to light gray:

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/6E/D0/wKiom1WI8UWTZS_PAAMim-57JVE787.jpg "style=" float: none; "title=" 2-6-1.jpg "alt=" Wkiom1wi8uwtzs_paamim-57jve787.jpg "/>

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/6E/CD/wKioL1WI8v7xPLg8AAFCDMDRsuA263.jpg "style=" float: none; "title=" 2-6-2.jpg "alt=" Wkiol1wi8v7xplg8aafcdmdrsua263.jpg "/>

The last operating interface looks much more comfortable, so thoughtful.

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/6E/CD/wKioL1WI81jDdG6oAAZ1Eb2op24990.jpg "title=" 2-7. JPG "alt=" wkiol1wi81jddg6oaaz1eb2op24990.jpg "/>

Of course, the most important shortcut is Cmd+h, which helps you quickly toggle whether or not to display the grid.

Using grids is a habit, and its basic logic is that beauty may need some talent and feeling, but the alignment of this thing can be done through hard work and careful and some tools.

Well, today's second skill is introduced here, the Excellence Wing looks forward to working with you to progress. We'll talk about the remaining skills next time.

Http://blog.sina.com.cn/s/blog_b44225550102w84y.html

Become a designer's five skills! The second trick ~ ~