Photoshop美工教程：设计清新高雅的网页布局(3)

接下来添加图片描述，在图层面板，按住cmd/ctrl，点击图片图层的缩略图，创建一个自动选区，新建图层，并以黑色填充选区，然后使用圆角矩形选框工具(M)，选取新建的黑色矩形的上部分并删除。

降低图层透明度到75%，添加简单的文字说明

8、在展示区底部添加分隔线

像步骤2一样在展示区底部添加一条灰色、水平分隔线，不同在于还要添加’内阴影’的样式：

设计的主内容区的时间到了!

9、给主内容区添加背景

就像预览图一样，主内容区分布为三列，选取矩形选框工具(M)，生成画布宽的选区，用颜色(#FBF5EA)进行填充。

主内容区的设计其实相当简单，但是要让人看出很简单也要花一定时间完成。我们将从左边开始，放置服务列表。

10、添加列标题

对于我们的列标题，从Mono图标挑选一个象征符号，并放在标题左边，使用字体”Georgia“和颜色(#323232)编辑标题文本。下一步，在文本底部添加弧线边界，这就要用到钢笔工具(P)了，像下图一样创建一条路径。

为了给路径描边，设置前景色为文本颜色(#323232)，然后选择一个较硬的画笔工具，大小大约为3px。接着打开”路径”面板(窗口>路径)，点击面板下方的”用画笔给路径描边”。

下面为曲线添加一点渐变，设置”渐变叠加”的图层样式：

复制曲线图层，离原图层下方4或5px处，降低透明度到24%。

11、为左栏添加内容

设置标题颜色为深灰(#323232)，文本内容颜色为一种可读性的灰色(例如：#2A2A2A)。像创建”About us “一样创建”Read More”按钮，对于中间这行，我改变了颜色，一种纯灰色(#484848)用于激活状态下的颜色。

12、为中栏添加内容

像左栏一样，添加标题和图标(另外合适的图标)。使用圆角矩形工具(U)，设置半径3px，前景色为白色，生成一小型的圆角矩形，在矩形下方添加一些文本和描述。

接着为圆角矩形设置图层样式：

‘外发光’/'描边’：

然后，在圆角矩形内添加与描述相配的图片。