这里一段题外话，为何第一个矩形的两条直线的颜色要修正？原因是原来的颜色不协调，看看下面的两个图，左边是修正后的效果，右图是原来的颜色
很明显，右边原来的颜色是不协调的。
那是怎么修正的呢？看下面的分析过程
首先把矩形和两条直线的颜色都转换为HSV模式，相关内容参看我的“计算机中的颜色 ”系列文章
第一个矩形：
矩形：#a1b7ba，HSV：（187，13，73）
深线：#b2bdbf，HSV：（189，7，75）
浅线：#d3dbdc，HSV：（187，4，86）
第二个矩形：
矩形：#c1c7b0，HSV：（76，12，78）
深线：#abb09f，HSV：（78，10，69）
浅线：#e0e5d1，HSV：（75，9，90）
第三个矩形：
矩形：#c2afaf，HSV：（0，10，76）
深线：#b09fa0，HSV：（356，10，69）
浅线：#e3d4d5，HSV：（356，7，89）
后面两个矩形的直线的颜色还是协调的，于是分析后面两条直线的颜色
可以看出
深线的H分量和矩形的H分量差不多，S分量也差不多，V的分量少了10左右
浅线的H分量和矩形的H分量差不多，S分量略微少一点，V的分量多了10左右
注：H分量表示颜色的色相，色相是环状的，0也就是360，所以0和356相差是4，也就是差不多
于是，按照上面的规律发现第一个矩形的直线的颜色是不协调的，按照上面的规律进行调整
深线的颜色调整为：#93a1a3，HSV：（189，10，64）
浅线的颜色调整为：#c8d9a6，HSV：（187，9，83）
之前看过一篇文章，出处忘记了，说是如何快速制作类似的分割线
深线基于底色，H分量和S分量不动，H分量减少10%左右
浅色基于底色，H分量个S分量不动，H分量增加10%左右
浅色紧挨着深色，浅色在深色的下方
Next with Type Tool I will add some text and from Premium Files I will use “Weather Vector Icons” and ” Vector Trees Icons” .
接下来用 文字工具 添加一些文本，从Premium Files中，将使用Weather Vector Icons和Vector Trees Icons。
Here’s my result
这是我的结果
Step 4 Creating the content area and the Footer
步骤4：创建内容区域和页脚
To create the content area, select first Rectangle Tool and create a similar shape:
要创建内容区域，选择 矩形工具 ，创建一个矩形 （38，658，944，426），颜色：白色 ：
和之前的添加阴影的操作一样，先用 椭圆工具 创建一个椭圆（38，1076，944，8），在点击： 滤镜 > 模糊 > 高斯模糊 ，半径：7px
Having Rectangle Tool selected create another shape at the bottom of the previous shape. This one it will be used for footer
用 矩形工具 在刚才的矩形的底部创建另一个矩形 （0，1038，1020，112），颜色： #efefef 。这个矩形就是用来做页脚部分
在底部添加三个矩形：
矩形（0，1147，340，3），颜色： #3fadbf
矩形（340，1147，340，3），颜色： #a3b76b
矩形（680，1147，340，3），颜色： #bf7678
Next I will select Ellipse Tool and I will create this shape
接下来用 椭圆工具 创建如下的椭圆 （664，670，12，400）
Then I will apply a gaussian blur (Filter>Blur>Gaussian Blur) with a radius of 50 px. I will select Rectangular Marque Tool and I will make this selection
添加高斯模糊（点击： 滤镜 > 模糊 > 高斯模糊 ），半径为50px。选择 矩形选择工具 ，创建如下的选区
I will hit Delete on my keyboard than I will push Ctrl + D (to unload the selection)
按键盘上的Delete键，然后按Ctrl + D（取消选区）
Then with Type Tool I will add some text, I will create some buttons in the same way I have do it for the Featured Area
用 文字工具 添加一些文本，创建一些按钮，用和在Featured Area中的按钮的方法一致。
此步骤写得极为简略，故在此补充的相对完善一些
用 矩形工具 添加矩形（62，684，561，41），颜色： #c1bbbb，和矩形（700，684，251，41），颜色： #abbec2
并添加相应的文本
添加一张图片，添加如下的描边图层样式，描边颜色： #d4d4d4
在图片的下方添加一些文字，并在右侧的矩形下方也添加一些文字
在右侧的文字下方，添加三个矩形，分别是（707，876，142，25）、（707，913，142，25）、（707，948，228，84），图层样式复制Featured Area中的的三角形的图层样式，并添加相应的文字
用 矩形工具 添加两个矩形，分别是（527，1042，93，25）、（843，1042，93，25），图层样式复制Featured Area中的按钮的图层样式，并添加相应的文字
最后，在左下角添加版权信息
最终的结果如下：
后记：
本教程采用的是柔和的颜色，实际上选用了红绿蓝三色，三种颜色的柔和颜色都选得不错。可以为日后做个参考。
更多PS网页设计教程XI——在PS中创建柔和的绿色环保的网页布局 相关文章请关注PHP中文网！
查看更多关于PS网页设计教程XI——在PS中创建柔和的绿色环保的网页布局的详细内容...