荣海财富 网页首页设计 完整ps教程.pdfVIP

这是万文俊同学为荣海财富设计的首页改版效果。

网页设计着重体现了金融服务行业特点和荣海财富的公司文化，专业、严谨、不浮夸，

首页围绕着三个板块：理财、借款、加盟，进行设计。版式条理清晰，颜色简洁明快。白色

和红色的搭配干净利落并且充满热情。

首先，先用手绘的方式绘制出版面布局的草图。如图。然后再使用PS软件进行设计制

作。

一、页头部分设计制作

1.根据设计需要，首先确定好页面尺寸和分辨率，打开标尺工具，根据布局草图在页面

上拖拽出辅助线，将布局的基本效果确定如图1所示。

2.将素材拷贝至banner位置，效果如图2所示。

图1图2

3.将荣海财富的logo图片拷贝至页头位置，调整大小及位置，效果如图3所示。

4.新建图层，设置前景色为#a62129,激活工具箱中的直线工具，在其属性栏上点击“填

充像素”按钮，绘制一条1像素的水平线并放置在logo的下方，效果如图4所示。

图3图4

5.激活工具箱中的文字工具，选择字体为FZQJWGB10，选择颜色为#404040，输入文字

“全国加盟咨询服务热线”，效果如图5所示。

6.新建图层，激活工具箱中的圆角矩形工具，在其属性栏上点击“填充像素”按钮，选

择颜色为#a62129，圆角半径设置为10像素，绘制一个圆角矩形，效果如图6所示。

图5图6

7.激活工具箱中的文字工具，选择字体为FZQJWGB10，选择颜色为#ffffff，输入文本

“400-066-0608”，如图7所示。调整各个图层的位置，在图层面板上新建文件夹命名为“LOGO

部分”，将logo部分的图层拖拽到“LOGO部分”文件夹中。

图7图8

二、主导航栏制作

页头的主导航栏部分，设计内容由三层导航组成，黑色导航条、子导航和页头最上方的

导航文本。这一部分的导航是在子页面的设计中始终保持不变。

1.新建图层，命名为图层，激活工具箱中的圆角矩形工具，在其属性栏上点击“填充像

素”按钮，前景色设置为#202020，设置圆角半径为50，绘制如图8所示黑色导航条。

2.双击该图层，打开图层样式面板，勾选“投影”选项，颜色设置为#000000，模式为“正

常”，不透明度设置为64%，角度为90度，距离设置为7像素，大小为10像素，扩展为

0%，单击“确定”，如图9所示，给黑色导航条制作一个投影效果。

图9

3.激活工具箱中的文字工具，选择字体为FZQJWGB10，选择颜色为#ffffff，输入文本“首

页”等文字，调整文字大小，效果如图10所示。

图10

4.下面制作黑色导航条中的分割线。新建图层，激活画笔工具，前景色设置为#ffffff，

点击快捷键F5，打开画笔预设面板，如图11所示，调整笔尖形状和大小，调整间距在200%

以上，按住shift键绘制一条垂直虚线，效果如图12所示。

图11图12

5.选中该图层，点击鼠标右键，复制该图层四次，将复制的分割线调整至合适的位置。

效果如图13所示。

图13

6.下面制作导航栏的鼠标悬停效果。激活工具箱中的文字工具，选择字体为黑体，设置

颜色为#4e4e4e，在导航栏“新闻中心”的下方输入文本，“企业新闻、政策法规、贷款新

闻”，调整文字大小，效果如图14所示。

图14

7.激活铅笔工具，在文字的前绘制一条1像素，颜色为#4e4e4e的虚线；前景色设置为

#424242，在黑色导航条的下方水平绘制一条黑色直线；激活工具箱中的椭圆选择框工具，

按住shift键，在文本“企业新闻”前绘制一个圆形选区并填充颜色#333333。效果如图15

所示。

图15

9.激活工具箱中的文字工具，设置字体为黑体，颜色为#343333，在黑色导航条的上方

输入导航文本“设为首页、加入我们、联系我们”，效果如图16所示。

图16

9.新建图层，激活工具箱中的铅笔工具，前景色设置为#6c6c6c，按住shift键，绘制垂

直短线，作为导航文本“设为首页、加入我们，联系我们”的分割线，效果如图17所示。

图17

10.激活工具箱中的文本工具，设置字体为hzgb，颜色设置为#424242，在黑色导航条的

下方输入文本“NewsCenter”，效果如图18所示。

图18

10.在图层面