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

这是万文俊同学为荣海财富设计的首页改版效果。 网页设计着重体现了金融服务行业特点和荣海财富的公司文化，专业、严谨、不浮夸，首页围绕着三个板块：理财、借款、加盟，进行设计。版式条理清晰，颜色简洁明快。白色和红色的搭配干净利落并且充满热情。 首先，先用手绘的方式绘制出版面布局的草图。如图。然后再使用PS软件进行设计制作。 一、页头部分设计制作 1.根据设计需要，首先确定好页面尺寸和分辨率，打开标尺工具，根据布局草图在页面上拖拽出辅助线，将布局的基本效果确定如图1所示。 2.将素材拷贝至banner位置，效果如图2所示。 图1图2 3.将荣海财富的logo图片拷贝至页头位置，调整大小及位置，效果如图3所示。 4.新建图层，设置前景色为#a62129,激活工具箱中的直线工具，在其属性栏上点击“填充像素”按钮，绘制一条1像素的水平线并放置在logo的下方，效果如图4所示。 图3图4 5.激活工具箱中的文字工具，选择字体为FZQJW GB1 0，选择颜色为#404040，输入文字“全国加盟咨询服务热线”，效果如图5所示。 6.新建图层，激活工具箱中的圆角矩形工具，在其属性栏上点击“填充像素”按钮，选择颜色为#a62129，圆角半径设置为10像素，绘制一个圆角矩形，效果如图6所示。 图5图6 7.激活工具箱中的文字工具，选择字体为FZQJW GB1 0，选择颜色为#ffffff，输入文本“400-066-0608”，如图7所示。调整各个图层的位置，在图层面板上新建文件夹命名为“LOGO部分”，将logo部分的图层拖拽到 “LOGO部分”文件夹中。 图7图8 二、主导航栏制作 页头的主导航栏部分，设计内容由三层导航组成，黑色导航条、子导航和页头最上方的导航文本。这一部分的导航是在子页面的设计中始终保持不变。 1.新建图层，命名为图层，激活工具箱中的圆角矩形工具，在其属性栏上点击“填充像素”按钮，前景色设置为#202020，设置圆角半径为50，绘制如图8所示黑色导航条。 2.双击该图层，打开图层样式面板，勾选“投影”选项，颜色设置为#000000，模式为“正常”，不透明度设置为64%，角度为90度，距离设置为7像素，大小为10像素，扩展为0%，单击“确定”，如图9所示，给黑色导航条制作一个投影效果。 图9 3.激活工具箱中的文字工具，选择字体为FZQJW GB1 0，选择颜色为#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，在黑色导航条的下方输入文本“News Center”，效果如图18所示。 图18 10.在图层面板上新建文件夹，命名为“第一导航”，将制作页头导航部分的图层拖拽到文件夹中，整个页头部分效果如图19所示。 图19 三、banner上的导航制作 1.新建图层，激活工具箱中的圆角矩形工具，半径设置为20像素，绘制一个圆角矩形，打开图层样式面板，选择“渐变叠加”选项，设置渐变色#616161至#a2a2a2颜色。然后选择“描边”选项，设置颜色为#959595，宽度为3像素。单击“确定”，给圆角矩形设置一个灰色描边，效果如图20所示。 图20 2.继续打开图层样式面板，如图21所示，勾选“投影”选项。混合模式设置为“