从零开始教您设计一个华丽高档的网页(4)

第九步

现在这一步打开标尺（按下CTRL+R）绘制一组引导线。分别在50px,320px,610px,900px分别绘制四条线将页面划分为三栏。至少这些是我已经用过的数值。看看我的屏幕截图，我才发现第三条线已经出界了。。。哦！

反正我已经所有元素放入空间里去了。但是如果要做多重页面，可能就按照其他方式用网格。像这样只是设计主页，我打算用一次这三栏——一会儿以后。

第十步

来，现在我们绘制第一个黑色方框。保持标尺和引导线打开状态，新建一个图层从一边到另一边绘制一个方形选取框。用黑色填充，再将透明度设置为80%，右键点击图层选择混合选项。点击“比划”，然后在外边加1px的白色笔画，设置为重叠模式。这样边界看起来更酷，黑色盒子看起来更锐利。

第十一步

现在复制方框所在图层，按CTRL+T调整方框大小，保持宽度不变，高度变短（如下图所示）。这就是我们的浏览框。

将透明度设置为40%，填充设置为50%。这样这个方框看起来更淡，给两个方框添加了一些深度感，让人觉得主次分明，有所侧重。

这种两个方框的对比方式可以很好用来表现元素之间的视觉差异。用户浏览该页面，我们首先想让他们看到大块信息，然后才是浏览栏。将其淡化处理意在告诉用户这部分并不是要想突出的地方，可以稍后再看。