地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 英语等级考试专题学习网站效果图的设计制作 机械工业出版社 主编：张洪斌 刘万辉 基于工作过程的网页设计与网站开发教程

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 网页的创意 网页设计是一个具有挑战意味的新设计，在网页时代，也许还应该重复。 不要热衷于技术的花样性，而忘记优秀设计和清晰表达的重要性。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作的原则： 先背景 后前景 先上后下 先左后右。 设计效果图 本效果图设计中用到的主要知识： 图像的抠取 辅助线的应用 图层样式与图层混合模式的应用 蒙版的应用

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 1) 打开 Photoshop 软件，新建文件 命名为 “ 英语等级考试专题学习网 ” ， 大小为： 1000 *1000 ，背景色为 “00aae2” ，执行 “ 视图 ”-“ 新建参考线 ” 命令，添加 4 条垂直辅助线（依次为 30pix ， 250 pix ， 610 pix ， 970 pix ），添加 2 条水平辅助线（依次为 20pix ， 980 pix ），然后使用矩形选 框工具选中中间区域，将其填充为 白色，如图 所示。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 2) 打开 “ 图标.jpg” 文件，分别将三个图标拖放到文件的右上角，然后在每个图标的 后面分别输入 “ 学院主页、教务频道、联系我们 ” ，调整位置后，如图所示。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 3) 打开 “ 院标.psd” 文件, 将院标拖放到文档中去，调整其大小，然后添加 “ 全国大 学英语四、六级等级考试专题 ” 和 “ 江苏省大学生英语应用能力 A 、 B 级考试专题 网 ” 两行网站名称，文字大小为 24pix ，如图所示。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 4) 选择刚输入的文字图层，点击 “ 图层 ” 面板下方的 “ 添加涂层样式 ” 按钮 ”, ，文 字增加效果，分别设置 “ 投影 ” 效果， “ 斜面与浮雕 ” 效果、 “ 渐变叠加 ” 效果、 “ 描 边 ” 效果，设置如图所示。 “ 投影 ” 效果设置 “ 渐变叠加 ” 效果设置

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 “ 斜面与浮雕 ” 效果设置 “ 描边 ” 效果设置

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 添加文字图层效果后的文字

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 5) 在 “ 全国大学英语四、六级等级考试专题 ” 和 “ 江苏省大学生英语应用能力 A 、 B 级考试专题网 ” 右方，添加文字 “ 首页 精选汇总 高分突破 考试咨询 试题库 ” 与 “ 考 试动态 在线听力 成绩查询 考试指南 考试论坛 ” 两行文字，效果如图所示。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 6) 添加新图层，使用矩形选框工具选择矩形，并填充颜色为 “54c2e4” ，然后打开 素材 “ 笑美人.jpg” 图片，将其拖入到文档中，然后调整其大小，点击 “ 添加蒙版图 层 ” 按钮, ，对笑美人图层添加蒙版调整后的效果，如图所示。 a) 笑美人图片 b) 笑美人图层的蒙版 c) 添加图层的蒙版后的效果

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 7) 打开素材 “ 教学楼.jpg” ，使用多边形套索工具将教学楼扣出，如图 所示。 扣出教学楼图片

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 8) 复制教学楼到文档中，命名图层为 “ 教学楼 ” ，使用快捷键 [Ctl+T] 调整图层的大小， 然后点击 “ 添加蒙版图层 ” 按钮 ”, 对教学楼图层添加蒙版，调整后的效果如图所示。 填加教学楼图片后的效果

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 9) 用文字工具添加 “ 改革创新 服务教学 ” 文字，颜色设置为： ffffff ，字体大小为 30 像素， 字体为 “ 方正大黑简体 ” （素材文件夹有，复制字体到 C:\WINDOWS\Fonts 目录即可）， 如图所示。 添加 “ 改革创新 服务教学 ” 文字

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 10) 在背景层之上新建一层，命名为 “ 虚线布局 ” ，添加水平辅助线 7 条， 分别为 （ 296pix,334pix,494pix,532pix,692 pix,890pix ）, 然后按住 shift 键，用 “ 单行选框工具 ” 沿着刚建立的辅助 线建立选区，用 “ 单列选框工具 ” 沿 着三条垂直的辅助线选取，然后设 置前景色为 “d7d7d7” ，使用快捷键 Alt+Delete 进行前景色填充，最后 将中间多余的线删除，如图所示。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 11) 新建一层，命名为 ”left1” ，使用 “ 矩形选框工具 ”, 属性的样式设置分别为： 绘制矩形选区，颜色填充为 “74c0dd” ，才会用同样的方法绘制高为 30pix 的矩形选区，颜色填充为 “e1e1e1” ，使用 “ 文字工具 ” 添加文字 “ 公告通知 ” ， 大小为 14pix ，字体为 “ 宋体 ” ，效果如图所示。 “ 公告通知 ” 模块的制作

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 12) 采用上一步同样的方法，绘制宽 358pix ，高 34pix 的矩形，然后设置前景色为 “b7e7f7” 的浅蓝色，使用 “ 渐变工具 ” 使用的线性渐变填充矩形框，效果如图所示。 填充背景渐变色

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 13) 使用 “ 自定义形状工具 ” 绘制形状。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 14) 采用第 12 步所示的方法制作 “ 考试指南 ” 与 “ 模拟试题 ” 模块 ，采用第 13 步所示的方法制作 “ 听力训练 ” 、 “ 经验交流 ” 、 “ 完型、改错、翻译、简答 ” 、 “ 阅读训练 ” 、 “ 写作训练 ” 等模块 。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图制作步骤 15) 版权信息的制作。 注意： “ 混合模式 ” 为 “ 亮光 ” 图像二值化处理

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图的格式转换 网页效果图完成后，就需要进行网页切片，现在介绍两种切片方式： 方法一：选择 “ 切片工具 ” ，在效果图中任意裁切 。任何现有切片自动显示在 文档窗口中。 注意： 首先希望大家将预期的切片设计好，然后进行切片； 为了切片准确，减少误差，在此建议大家尽量放大图片进行切片； 所有切片都有编号，希望所有的编号能够一目了然。 方法二：从参考线创建切片，添加参考线，然后选择 “ 切片工具 ” ，在该工具的属 性栏中点击 按钮即可 。 注意：从参考线创建切片时，通常需要配合切片合并使用。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图的格式转换 1. 执行 “ 文件 ”-“ 存储为 Web 和设备所用格式 ” 命令，在如图所示的面板中 点击 “ 存储 ” 按钮。

地址 : 北京百万庄大街号邮编编辑热线 地址 : 北京百万庄大街 22 号 邮编 : 编辑热线 : (010) 机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社机 械 工 业 出 版 社 CHINA MACHINE PRESS 效果图的格式转换 2 ）然后在弹出的 “ 将优化结果另存为 ” 面板中，设置保存类型为 “HTML 和图像 （ *.html ） ”,slice 设置为 “ 所有切片 ” ，将文件名命名为 “index” 即可，点击 “ 保存 ” 按钮， 然后使用 IE 浏览器打开 index.html 测试，效果如所示。