the_grid Ps构图 设计方面.pptx

The Grid System,,,“ The grid system is an aid, not a guarantee.It permits a number of possible uses and eachdesigner can look for a solution appropriate to hispersonal style. But one must learn how to use thegrid; it is an art that requires practice. ”Josef Müller-Brockmann,,,Simple Ratios and Complex Ratios,Ratios are at the core of any well designed grid system ratios are rational, such as 1:2 or 2:3, others are irrational such as the 1:1.414 (the proportion of A4). Look at AI This first part is about how to combine those ratios to create simple, bal­anced grids which in turn will help you create harmonious compositions.,Starting with a Blank Canvas,You know you want the size to be A4. You also know that there are going to be photographs and text, and the photographs will be of varying size. There you have it — your blank canvas.,Starting with a Blank Canvas,The grid system we are going to design is a simple symmetrical grid based on a continuous division of the paper size in the ratio 1:1414. Using the paper size as a guide we can retain the proportion through­out the grid, this will give our ele­ments within the design a relationship to one another, the grid and the paper size.So one of the easiest way to create a balanced grid is by using the SAME ratio.,Using the ratio of 1 to 1:414 to build a grid,Using the ratio of 1 to 1:414 to build a gridWe can now begin to experiment with type areas, shapes and composition.,Villard Diagram,Grids have been in use long before graphic design became a discipline. During the 13th– and 14th-centuries, scribes used the Villard Diagram. Villard de Honnecourt lived in 13th century France and may have been an itinerant master-builder of Picardy in Northern France.,Villard Diagram,Divided into 7 parts.,Villard Diagram,In the 15th-century, Gutenberg and others divided their pages using the Van De Graaf canon.,Villard Diagram,,Tschichold's "golden canon of page construction".,,Tschichold's "golden canon of page construction".,,The Golden Ratio,The Golden Section is a ratio which is evident through­out the universe as the number Phi.Even though it is based in mathematics it will ‘feel’ right.Composition can make things more useful. Let’s look at the theory called ‘Aesthetic Usability Effect’Basically, it states that things which are designed more beautifully are also more useable.Well designed grid systems can make your designs not only more beautiful and legible, but more usable.,The Golden Ratio,Two quantities are in the golden ratio if the ratio of the sum of the quantities to the larger quantity is equal to (=) the ratio of the larger quantity to the smaller one.,The Golden Ratio,Construction of a golden rectangle:1. Construct a unit square (red).2. Draw a line from the midpoint of one side to an opposite corner.3. Use that line as the radius to draw an arc that defines the long dimension of the rectangle.,The Golden Ratio,The Golden Ratio,Shaping the Page,For this grid, we’re going to use the ratio of the page to define the main text, or content, area of the pages.,We now have an area, shown in red, in which to construct the grid.,Applying the Golden Section,The area is divided using Phi which gives us two columns, A and B.,Creating the system,So, we’ve got the columns. First , we extend the lines of the content area and the columns.,Creating Hanging lines,,We need plenty of space on the outside margins for differentiating between content.,Understanding grids for the web design,MeasurementsA fixed grid for web design is so close a translation from the original grid because it uses PIXELS to construct the grid. The designer is using pixels mostly, so everything is fixed in a way.,The Canvas,Print is easy to deal with because the design canvas is determined by the media size: the letter, the envelope, the poster.The size for the designer is determined by the size of the browser. Some people use 800 X 600. Others use 1024 X 768. Let’s use 760 X 410.,,,About Gutters,Gutters are gaps between columns. In web design language, we call them Divs or padding. These are HTML terms for coding. We deal with gutters as part of columns.,Creating the design,You must align items on the grid lines. It seems obvious but you need to step back and remember how to work with the grid.,,,。