Web标准网页制作实例（01）

来源：本站发布人：管理员点击量：8536

综合实战练习

从本章我们开始进入综合实战练习阶段。通过六个典型的案例，来梳理和应用之前我们学习的知识点。

虽然界面设计不是本书的重点，但是本章的第一个案例，我们还是决定要先介绍一下界面设计的大致方法，起到一个抛砖引玉的作用。

本案例是由我的同事叶凤云MM所写，具体如下：

磐石文化网站界面设计

最终效果如图：

磐石文化效果图完成副本

小提示：

我们在做页面效果图之前就要先有自己的想法，这需要我们有一张大概的草图和准备好的相关素材，如果想到哪做到哪会就做的很慢，也同时容易导致局部设计脱节等情况的哦！

新建文件与图层分组

步骤01：

运行Phtotshop软件，在菜单栏中选择【文件】-【新建】（快捷键Ctrl+N）命令。

弹出【新建】对话框，设置【宽度】为980像素,【高度】为2000像素.，【分辨率】为72像素/英寸，【颜色模式】选择RGB，【背景内容】为白色，之后单击【确定】按钮。

如图所示：

小提示：

网页主体部分常用宽度为960、 980、1000像素（不包括背景宽度）。因为现在的显示器尺寸各不相同，为了要兼容较小的显示器（17寸显示器分辨率为1024X768），就需要我们把页面的主体部分控制在这个大小范围内，不然页面会显示不全。在较大的显示器下网页画面会是居中显示的。

步骤02：

接着！继续在菜单栏中选择【视图】-【标尺】（快捷键Ctrl+R）显示标尺，从左侧标尺中拉【参考线】（蓝绿色的线），【参考线】建立在画布的边缘，告诉我们页面中间的【宽度】是980像素。

如图所示：

小提示：

快捷键Ctrl+H可以切换显示或隐藏参考线，在制作过程中可以根据自己的查看需要进行切换哦。

步骤03：

因为网页是居中显示的，所以我们需要扩展一下画布，因为设计时候页面背景也需要我们考虑进去。

选择菜单栏中【图像】-【画布大小】（快捷键Ctrl+ Alt+C)，在【画布大小】对话框中【背景】选择白色，【宽度】改成1920像素，单击【确定】按钮。

如图所示：

页面头部与背景的制作

步骤04：

在【图层面板】中点击右下角【新建组】按钮对图层提前进行分组。我们根据页面的结构先建立3个组，分别为head、body、foot（如图所示），首先我们先设计页面的头部。

小提示：

这里图层命名中英文都是可以的，自己看着一目了然就是最好的。

接着！我们在相应的组里【新建图层】，在head组中点击【图层面板】中的右下角【新建图层】按钮，然后拉出头部大概高度的参考线：

小提示：

拥有图层分组的好习惯是非常重要的，因为网页设计图层较多，这样以后需要修改的话就要方便多了哦！

步骤05：

在head组中新建组和图层，并分别命名为【顶部注册信息】和【顶部背景】，如下图所示。

小提示：

如果对Photoshop不够熟练找不到相应按钮的话，别着急！因为鼠标移动到按钮和工具上时都会有文字提示。

步骤06：

之后在左侧【工具栏】中选择【矩形选框】工具。

我们在【工具属性栏】中设置【样式】为固定大小，，【宽度】为1920px(像素)，【高度】设置45px（像素）。如下图所示：

之后选择【菜单栏】中【编辑】-【填充】（快捷键Shift+F5）命令,填充【内容】为50%灰色，【混合】中【模式】为正常，【不透明度】为100%，单击【确定】按钮，效果如图。

步骤07：

接着按Ctrl键点击【顶部背景】图层，选中该图层中的元素。

点击【工具栏】处左下角的【前景色】和【背景色】，代码分别为#f6f6f6，#e3e3e3。设置完之后，选择【工具栏】中【渐变工具】，选择【线性渐变】。如下图所示：

选择第一个渐变（浅灰色到灰色），该渐变为由前景色渐变到背景色。

之后按Shift键，沿Y轴拉直线渐变，成下图效果：

小提示：

按快捷键X可以调换前景色和背景色位置，或者点击按钮效果也是一样的！如果按D键就可以把前景色和背景色变成黑色和白色，可以试试看！

之后选择【矩形选框】工具，【样式】为正常，如图所示：

选择这个渐变条的一小半，大约为下半部分的4/10处，拉出【矩形选框】,得到效果如下图：

选择【菜单栏】中【图像】-【调整】-【亮度/对比度】,其中【亮度】改成-5，单击【确定】按钮。呈现的效果如图所示:

步骤08：

接着我们再新建一个图层，让灰色条状背景变得的更有立体感。使用【铅笔】工具，【大小】控制为1像素，按住Shift键不放，绘制一条稍微深一点的直线，再绘制一条浅一点的直线条，放在分界线的中间。

得到的效果如下图：

接着我们再【新建】一个名为【红色线条】的图层，选择略微有些偏深的红色，

利用【矩形选框】工具绘制一个红色的5像素线条。

得到效果如下：

步骤09：

选择【文字】工具，设置文字的【大小】为12点，【字体】为宋体，设置【消除锯齿的方法】为”无”。

打出文字“磐石文化欢迎您的光临！请登录免费注册”（注意：中间有空格。）

(注意:文字先设置为黑色，后面有“登陆”，和“免费注册”有链接，选中这两个词将颜色改为灰色，和之前的文字做出区别。)

步骤10：

选择【圆角矩形】工具，在工具【属性栏】中选择【路径】，选择【半径】为5px。

绘制一个红色圆角矩形。按【快捷键Ctrl+回车】将【路径】转换为【选区】，，如图所示：

之后在【菜单栏】中选择【编辑】-【填充】（快捷键Shift+F5），得到效果：

步骤11：

再增加一些立体感，在左上角做一点圆角的感觉。

使用相同的方法，建立一个【圆角矩形】选区，如图，按delete键，删除选区中的红色边缘。再【选择】-【取消选择】（快捷键Ctrl+D）左下图效果：

然后选择右边，复制右边的圆角,

选择当前图层复制（快捷键Ctrl+C）一次，再粘贴（快捷键Ctrl+V）一次，选择菜单中【编辑】-【变换】-【水平翻转】命令，

把复制的圆角移动到左边对称的位置对齐，并删除原图层中的直角，在【图层面板】中合并这两个图层，如图：

步骤12：

下面我们再加点投影效果。

选择该图层，单击右键，选择【混合选项】：

【不透明度】设置为22%，【角度】设置为-31，【距离】设置为3像素，【扩展】设置为0%，【大小】设置为5像素。

然后点击右上角【确定】按钮。

（注意：我们在做投影的时候不要太过夸张，不然不太美观，还会造成局部过分强调有些脱节。）

效果如下：

小提示：

如果红色圆角框位置不理想，可以再选择当前图层，使用【移动】工具微调。

步骤13：

同样的方法把后面的灰色渐变条也加上投影，如下图：

步骤14：

接着绘制出body的背景，为了看出效果，我们填充一层淡淡的灰色#efefef。

感觉红色圆角部分略有点高大，选择菜单栏中【编辑】-【自由变换】（快捷键Ctrl+T）变换一下，稍微缩小一点。

使用准备好的图标素材，

使用【移动】工具移动到【红色按钮】上，并打上文字“快捷下单”：

然后之前讲到的图层的【混合选项】制作效果，

【投影】的【不透明度】设置为75%，【角度】设置为-31，【距离】设置为0像素，【扩展】设置为20%，【大小】设置为4像素。

【渐变叠加】的【不透明度】设置为100%，【渐变】由黄色渐变到淡黄色，【角度】设置为90，【样式】为线性，【缩放】为10%。

单击【确定】按钮：

将文字也制作同样效果，得到效果如下：

步骤15：

下面我们在body层里新建一个图层，

根据参考线在中间980像素的宽度中【填充】（快捷键Shift+F5）白色，得到效果如图。

另外再新建图层，用【矩形选框】工具给白色背景左右两侧增加两个白色边框，【宽度】为15px，得到效果：

步骤16：

然后回到head组中，我们再使用【矩形选框】工具绘制一个白色方块。

然后选择菜单栏中【编辑】-【自由变换】（快捷键Ctrl+T）命令：

然后在单击右键选择【透视】，如下图：

拉动左上角或者右上角的小方块进行变形，然后得到效果：

感觉有些高，再【编辑】-【自由变换】（快捷键Ctrl+T）一次，得到下图效果

小提示：

【自由变换】不仅有【透视】功能，还有【缩放】、【旋转】、【变形】等功能哦！可以是尝试一下看看呢！

步骤17：

在head图层文件夹中中新建组【LOGO】文件夹，将LOGO素材使用【移动工具】放入左边。

如图

接着复制LOGO图层，选择【编辑】-【自由变换】（Ctrl+T）单击右键选择【扭曲】（和之前使用【透视】的方法相同），把LOGO变形之后，再把图层的透明度改成5%，得到效果：

步骤18：

再新建一个图层组命名为【搜索】，再新建一个图层，使用之前绘制圆角框的方法，绘制一个白色圆角框，【圆角半径】为20px, 加上投影，如图所示：

小提示：

绘制模块的时候都要记住分层哦！如果都绘制在一个图层上修改起来就麻烦了!

关于圆角半径、颜色以及投影样式等具体数值不需要做的完全一样，这里需要掌握的是方法，只要看起来美观都是可以的。

再绘制一个灰色方框，

使用【矩形选框】工具对白色圆角矩形背景的右侧复制粘贴一次，开始制作搜索按钮，复制效果如图：

在该图层上单击右键选择【混合选项】

选择【描边】效果：【大小】为1像素，【位置】为内部，【颜色】为红色#9d0808。

选择【渐变叠加】效果：【前景色】为#770101，【背景色】为#b31c10，【渐变效果】选择第一个（前景色过度背景色），【样式】选线性，【缩放】为10%。

之后单击【确定】按钮。然后将放大镜图标素材放入中间：

然后在搜索条下面加上导航文字和购物车小图标

得到效果：

步骤19

在body图层组中新建组命名为【导航】，

绘制一个【高度】为40像素的【导航背景】，【颜色】为#9d0100，得到效果：

然后用【矩形选框】工具选择下半部分，选择菜单栏中【图像】-【调整】-【亮度/对比度】中的【亮度】为-20。再将红色背景和body中白色部分向下移动4像素，如图：

然后删除导航背景两侧，露出body中的白色边框，做出类似红色导航从中间穿过去的感觉，如图：

步骤20：

再新建图层，使用【矩形选框】工具绘制有一个【宽度】125像素，【高度】40像素的灰色矩形，然后复制该图层。因为这里导航有五个栏目，所以就复制五个，然后让每个按钮中间空1像素。得到效果：

之后打好导航中的文字并对齐，然后在按钮中间的缝隙绘制两条颜色相近的红色竖线（一深一浅的红色线条）,并复制五个，分别放置在每个模块的最右边，效果如图：

拉好每个导航按钮的参考线，隐藏灰色模块背景，效果如图：

然后将灰色按钮图层删除。在【图层】面板中，按Shift键选中五个灰色图层，单击右键【删除图层】。

接着选中红色【导航背景】图层，再新建图层并命名为【按钮发光】。

然后使用【多边形套索】工具，选区为一个梯形，再使用【渐变】工具，前景色为白色，拉出一个渐变效果：

：

然后Ctrl+D取消选择。

滤镜-模糊-动感模糊，然后将改图层的模式改为【线性减淡】

得到效果如下：

然后使用【橡皮擦】工具，擦掉边缘，效果更柔和一些。

在红色【导航背景】图层上使用【矩形选框】工具选出”办公劳保”按钮背景并用【图像】-【调整】-【亮度/对比度】将背景颜色调暗。亮度为-35。

得到效果：

第一屏内容制作

步骤21：

使用【高度】设定为15px的【矩形选框】工具拉出参考线，并在body组里新建组并命名为【第一屏】，在【第一屏】里新建一个组命名为【左边模块】，绘制一个接近黑色到深灰色渐变的矩形，【宽度】为188像素，【高度】为330px。

效果如下：

步骤22：

再新建一个【宽度】188像素，【高度】45像素的红色（#a21313）方块并打上文字；

然后使用【铅笔】工具绘制一个点组成的箭头图案，画笔【大小】为3px.

然后再绘制两条一深一浅的线条效果，制造一点立体感，【颜色】分别为#840a0a，# b72828：

这样还略显单调了，再从LOGO中取材，然后再变换（Ctrl+T）添加一点底纹的效果。

接着使用我们之前学过的方法，添加文字和图片素材，效果如下：

步骤23：

接着新建【焦点图】图层，再拉出了距离左边模块12像素的参考线，制作右边模块。绘制一个【宽度】为780像素。【高度】为287像素的灰色方块，如图；

接着制作灰色渐变圆角的矩形，沿着Y轴由#f8f8f8渐变到#fefefe，圆角【半径】为3px，如图：

之后新建【投影】图层添加投影，使用【椭圆选框】工具拉出个接近条状的椭圆，如图：

【选择】-【修改】-【羽化】(快捷键Ctrl+Alt+D)，【半径】为2px,【编辑】-【填充】黑色，将图层移动到灰色渐变图层下面并调整好位置，效果如图：

然后绘制焦点图中的按钮，如图：

步骤24：

下面继续制作第二屏的内容，拉20像素的参考线，

新建【宽高】为118 像素的灰色正方形，并按住Ctrl键不放，选择【移动】工具拖动复制四个相同的图层依次排列，然后进行对齐，注意每个模块之间空出1像素，效果如图：

步骤25：

绘制类似红色导航背景的圆角矩形，【高度】为36像素,圆角矩形【半径】为2像素，然后将4个灰色的方块向下移动，中间空一像素留白，之后复制4个，效果如图：

步骤26：

接着我们打上文字，做出滑窗的当前窗口特效，去掉其中一个背景颜色，在菜单中选择【图像】-【调整】-【去色】，利用直线工具绘制一个灰色三角形箭头。效果如图：

步骤27：

接着使用【圆角矩形】工具绘制圆角矩形（圆角半径为2px），背景为淡灰色# f0f0f0,【描边】1像素，【颜色】为#d1d1d1。

然后复制背景上半部分制作标题栏，使用【亮度/对比度】调整为深灰色并对齐。接着！点开菜单【图层】-【创建剪贴蒙版】（快捷键Alt+Ctrl+G），效果如左下图。然后在这个圆角矩形背景下面复制一个对称的底部，并利用调成深灰色再【创建剪贴蒙版】（快捷键Alt+Ctrl+G），与之前制作方法相同，效果如右下图：