Photoshop web图像设计.doc

第 11 章 Web 图像设计 教学提示 通过本章的学习，熟练掌握 Web 设计的方式、方法，从切片、翻转，到优化图像、 动画制作，深入了解 Photoshop 在网页设计中的作用，并能够利用其强大的绘画功能，配合 切片设计，制作出精美的网页模板。 教学要求 知 识 要 点 能 力 要 求 关于切片的使用和编辑 熟练掌握切片的方法、切片的编辑 图像的优化设置 Web 照片画廊 动画 掌握图像的优化设置，存储 Web 格式 关 联 知 识 切片工具、切片编辑工具 存储为 Web 所用格式 用【Web 照片画廊】命令创建网页式画廊 Web 照片画廊样式等 利用【动画】调板完成动画设计 【动画】调板、帧等  第 11 章 Web 图像设计 11.1 概 述 Photoshop CS3 中的图形工具简化了大多数 Web 设计任务，用户可以使用文本、绘图 和绘画工具向版面中添加内容，可以设计和制作在 Web 上使用的静态或动态的图像，还可 以使用切片工具将页面版式或复杂图形划分为多个区域，并指定独立的压缩设置(从而获得 较小的文件大小)，可以将图像分为切片、超链接和 HTML 文字、优化切片并将图像存储为一 个 Web 页面。 用户可以使用【动画】调板结合切片组、嵌套表、百分比宽度表以及远程翻转(将鼠标 移到某幅图像上时，另一幅图像发生变化)来创建简单的 Web 动画，逐帧确定动画的外观。 11.2 制作艺术网页 案例说明 制作艺术网页是利用 Photoshop 图像处理相关工具和命令，制作完成艺术网页模板， 再在模板基础上进行切片、优化图像、存储为 Web 格式等制作网页过程，设计制作艺术网 页，完成后的效果如图 11.1 所示。 图 11.1 艺术网页 11.2.1 操作步骤 1．新建文件 新建文件，命名为动漫艺术系主页，其他属性设置如图 11.2 所示。 237  Photoshop CS3 图形图像处理案例教程 图 11.2 新建文件 2．建立标题框 (1) 打开标尺显示，新建图层，命名为标题框，选择工具箱中的【圆角矩形工具】 ，倒角半径设为 10，前景色设为 RGB(245，40，110)，在标题框层上绘制圆角矩 形，如图 11.3 所示。 (2) 按住键盘上的 Ctrl 键单击标题框图层，得到选区，将内部删除，执行【编辑】 |【描边】命令，设置描边宽度为 3 像素，效果如图 11.4 所示。 图 11.3 绘制圆角矩型 图 11.4 绘制标题框 (3) 利用工具箱中的【钢笔工具】 与圆角矩形工具相结合，绘制标题框；再为图层 标题框添加投影图层样式。执行【图层】调板中的【添加图层样式】按钮 中的 【投影】命令，在弹出的样式对话框中设置参数如图 11.5 所示。 (4) 在标题框上添加文字动漫艺术系，最终效果如图 11.6 所示。 图 11.5 【图层样式】对话框 图 11.6 标题框图层效果 238  第 11 章 Web 图像设计 3．添加标题框内容 (1) 打开素材文件作业 5(黑白线稿).bmp，使用【移动工具】 将其添加在标题框 中，生成的图层命名为黑白线稿。 (2) 再打开素材小房子.jpg，将其添加在标题框中，生成的图层命名为小房子； 单击【图层】调板中的【添加矢量蒙版】命令 ，添加图层蒙版。选择工具箱中的【渐变 工具】 ，将渐变颜色设置为由白色到黑色 方绘制渐变，结果如图 11.7 所示。 ，由小房子图层右下方向左上 (3) 为标题框添加文字导航。选择工具箱中的【自定形状工具】 ，在属性栏的【形 状】一项中，设置形状为信封，如图 11.8 所示。 图 11.7 添加标题框内容图 图 11.8 设置形状 (4) 新建图层，命名为联系我们，将前景色定义为标题框颜色，在上面绘制信封 形状，用前面介绍的方式添加投影图层样式，设置如图 11.9 所示。 (5) 建立文字层，输入文字联系我们，结果如图 11.10 所示。 图 11.9 投影设置 图 11.10 联系我们文字导航 (6) 用同样的方法，用【自定形状工具】 选择不同的形状，制作另外两个文字导航 设计论坛和留言板；用【直线工具】 在新建图层上绘制两条竖线，最终结果如 图 11.11 所示。 图 11.11 建立另两个文字导航 239  Photoshop CS