谈谈网格设计

网格是基本的设计原则之一,不管你用什么样的工具。网格设计也可以用在很多地方,不管是网站设计还是杂志、海报设计,在我们常用的设计软件Illustrator和Photoshop中同样支持网格设计。

比如我们要设计一个三折页。

谈谈网格设计_第1张图片

然后我们可以通过参考线设置好边距和分栏之间的距离。

谈谈网格设计_第2张图片

再进一步标出版心位置。

谈谈网格设计_第3张图片

最后我们就可以对该版面的进行网格设计了。

谈谈网格设计_第4张图片

当然,我们也可以通过另外一种手段来实现对网格布局的设计。

谈谈网格设计_第5张图片

我想,现在你应该对网格布局有一定的了解了,但是还可以更复杂,当然也会更强大。

比如通过下面的这个小图表也可以发现网格的存在,实际上,这是通过网格计算的出来的列和行的宽度。举例来说,| ~ | ~ | ~ |将是一个三列的网格。

谈谈网格设计_第6张图片

如果我们展开观察,在本例中,文档的页边距和装订线是40个像素,则该图标的宽度为60个像素,该段之间的空间为10个像素,并且列的宽度是未知的,但应当是彼此相等。这可以在像这样的网格符号来表示:

| 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px | 60px | 10px | ~ | 40px |

网格加起来有一个明确的值,并减去从可用空间的宽度的命令。然后它将该通配符之间剩余的区域。其结果将是这样的:

谈谈网格设计_第7张图片

我们可以用到更美的数学方式来设计网格。

黄金比率

黄金比例是0.618,黄金比例用百分比表示是38.2%和61.8%。所以,如果输入38.2%的宽度,那么这个分栏就是黄金比例的。

谈谈网格设计_第8张图片

斐波那契序列

后者是前面两个数字之和,并且在100%的斐波值为1%,1%,2%,3%,5%,8%,13%,21%,34%,55%,89 %。虽然这看起来非常简单,我们必须进行调整,以使网格看上去是准确的。通过调整后,斐波那契数网格的比例将是:

| 1% | 1% | 1% | 2% | 3% | 5% | 8% | 13% | 21% | 34% | ( vl )

如果觉得每次设置太麻烦,我们可以存为模板,你可以试试看。

谈谈网格设计_第9张图片

你可能感兴趣的:(谈谈网格设计)