PS教程:绘制清新的色彩生动的网页布局[图]

第十五步：创建蓝色高光

1、新建图层，放置在“分隔线”下，选取矩形选框工具（M）创建像下图一样的选区

2、以颜色#35423e填充该选区，按ctrl+d撤消选框，右击，在下拉菜单中选择“转换为智能对象”

3、去往菜单　滤镜>模糊>高斯模糊，并设置半径为4px

4、再次 滤镜>杂色>添加杂色，数量为0.7%，属性为第一个选项，像第十步那样设置

5、设置图层透明度为60%，命名为“高光”

第十六步：为图层“分隔线”创建图层蒙版

第十八步：为图层“分隔线”，“高光”编组

第十九步：为当前页面创建激活按钮

第二十步：创建搜索框

最终效果图：

第二十一步：新建蓝色矩形

在组“导航”下新建组（图层>新建>组），组命名为“案例”，再新建组放置在“案例”中，并命名为“背景”

选取矩形工具（U），颜色设置为#219aad，创建宽度为983px，高度为273px的蓝色矩形，（提示：打开(按

 

F8

)信息面板，查看宽度和高度），设置此图层的透明度为55%，命名为“bg4”

蒙版缩略图以选中此蒙版5.　新建图层，放在“bg3”上方，命名为“bg2”，选取渐变工具（G），画一个颜色#56b8e5到透明的渐变，方向是从选区底部到选区头部，然后按ctrl+d撤消选区6、新建图层，放在图层“bg2”上方，命名为“bg1”，选取矩形选框工具（M），像下图一样创建选区，宽度为983px，高度43px7、选取渐变工具（G），画一个颜色#0f2b42到颜色

#2a607f的渐变，

方向是从选区底部到选区头部，然后按ctrl+d撤消选区

第二十二步：“注册”与“了解更多”

新建组“注册按钮”，放在组“背景”上方，选取圆角矩形工具（U），设置半径2px，像下图一样新建圆角矩形（82*38），并设置如下图一样的图层样式（注意：shap2图层的透明度是100%）

创

第二十三步：

第二十四步：

1.　在组“案例”中新建组，命名为“图片”，在组里放置一张小图片，双击图层，设置如下图的图层样式“外发光”

第二十五步：创建内容区

1.　新建组，放在组“案例”下面，命名为“内容”，在此组里再新建一组“阴影”，选取矩形工具（U），创建一白色矩形（983*181），图层命名为“白色形状”，透明度为90%

。

3.　新建图层，选取矩形选框工具（M）像下图一样新建选区（273*180）。选取渐变工具（G）画一个颜色#8f8f8f到透明的渐变，然后取消选区，以下图为参考。

4.　添加图层蒙版（图层>图层蒙版>显示全部），使用大一点的黑色软笔刷（我用的是27px），涂在阴影中间部分上面，设置图层透明度为30%，命名为“垂直阴影1”，复制（ctrl+j）图层“垂直阴影1”，移动至右边，重命名为“垂直阴影2”。

5.　选取线条工具（U），新建重1px，颜色为#aebcc7的水平线，将图层转换为智能对象（右击图层，在下拉菜单中选择“转换为智能对象”）图层命名为“水平线”。

6.　选取字体工具（T），编辑网站内容，您也可以使用图片或别的来替换

第二十六步：创建网站底部内容

1.　新建组“底部”，并新建图层，选取矩形选框工具（M），新建选区（982*88）。

2.　设置前景色为#555555，选择一大的软笔刷（我选的是100px），沿着选区头部边缘进行涂画，撤消选区，设置图层透明度为50%，并命名为“渐变”。

3.　新建图层，选择单行选框工具，新建一选区，并以白色填充。按ctrl+d撤消选区。转到菜单　图层>图层蒙版>显示所有，选取一大点的黑色软笔刷像下图一样遮住图层，以下图为参考。设置图层透明度为15%，命名为“直线”。

4.　添加底部文字说明。