《电脑美术》第17章网页设计与ImageReady的应用

1、电脑美术第17章网页设 计与ImageReady的应用 2 17.117.1利用利用PhotoshopPhotoshop设计网页设计网页 17.217.2ImageReadyImageReady快速入门快速入门 17.317.3网页网页bannerbanner动画制作动画制作 第第17章章 网页设计与网页设计与ImageReady的应用的应用 3 网页设计已经逐渐成为一个热门的话题，而网页设计已经逐渐成为一个热门的话题，而 PhotoshopPhotoshop又是设计页面的重要工具。通过前面的学习，又是设计页面的重要工具。通过前面的学习， 相信大家利用相信大家利用PhotoshopPhotos

2、hop来制作网页的页面已经不是什来制作网页的页面已经不是什 么问题了，本章的主要目标是讲解如何切片和优化网么问题了，本章的主要目标是讲解如何切片和优化网 页图片，以及如何制作页图片，以及如何制作WebWeb画廊和画廊和GIFGIF动画等。动画等。 本章目标本章目标 第17章 网页设计与ImageReady的应用 4 制作一个介绍图形图像的个人主页。在实例中，主色调选用了蓝 色，蓝色能给人一种平静、理智、永恒、博大的感觉。同时，运用白 色、蓝色和其它颜色的搭配，使网页显得典雅、温馨。 制作个人主页制作个人主页 17.1 利用Photoshop制作个人主页 5 创建新的图像文件 n启动Photos

3、hop，执行【文件】【新建】命令，创建一个新的 图像文件，如图所示。设置完后，单击【好】按钮。 创建参考线 n执行【图层】【新建】【图层组】命令，弹出【新图层组】 对话框，设置【名称】为“title” 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 6 创建一个矩形选区 创建参考线 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 新增【图层1】，选择工具箱中的 【矩形选框工具】，在【选项】栏 中设置【样式】为【固定大小】， 【宽度】为“770像素”，【高度】 为“100像素”，在【图层1】中 创建一个选区，如图所示。 按Ctrl+R键，打开标尺，用鼠标从

4、 横向标尺上拉出一条参考线，如图 所示。 7 绘制出路径1 绘制出路径2 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 制作背景图案 按Ctrl+R键，隐藏标尺，设置前景 色为白色，按Alt+Delete键，用前 景色填充选区。按Ctrl+D键，取消 选择，在【路径】面板中新增【路 径1】，用【钢笔工具】绘制出路 径，如图所示。 在【路径】面板中新增【路径2】， 用【钢笔工具】绘制出路径，如 图 。 8 设置渐变色 从上到下的渐变效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 在【图层】面板中，新增【图层2】。 按住Ctrl键，单击【路径】面板中

5、的 【路径1】，将路径转化为选区。选 择工具箱中的【渐变工具】，在【选 项】栏中单击【点按可编辑渐变】按 钮，弹出【渐变编辑器】对话框，在 渐变色条下，设置左端色标的RGB值 为（235，241，246），右端色标的 RGB值为（135，185，248），其它 参数设置如图所示。 设置完后，单击【好】按钮。按住 Shift键，用鼠标从选区的顶端拖拉到 底端，创建渐变，按Ctrl+D键，取消 选区，如图所示。 9 渐变填充效果 设置【减淡工具】的参数 润饰图像后的效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 新增【图层3】，按住Ctrl键，在【路径】 面板中单击【路径

6、2】，将路径转变为 选区。选择工具箱中的【渐变工具】， 在【选项】栏中单击【点按可编辑渐变】 按钮，打开【渐变编辑器】对话框，在 渐变色条下，保持左端色标的颜色不变， 设置右端色标颜色的RGB值为（170， 204，248），单击【好】按钮。 按住Shift键，用鼠标从选区的上端拖拉 到选区的下端，创建渐变效果。在【图 层】面板中，将【图层3】调整到【图 层2】的下面，按Ctrl+D键，取消选择， 效果如图 选择工具箱中的【减淡工具】，在工具 【选项】栏中，设置参数如图所示。 用鼠标涂抹过渡不自然的区域，润饰图 像，效果如图所示。 10 输入“图像爱好者天堂” 设置渐变色 设计标题栏设计标题栏

7、 17.1 利用Photoshop制作个人主页 制作LOGO文字 选择工具箱中的【横排文字工具】， 在【选项】栏中设置文字颜色为黑 色，输入文字，如图所示。 执行【图层】【图层样式】 【渐变叠加】命令，单击【点按可 编辑渐变】按钮，打开【渐变编辑 器】对话框，设置左端色标的RGB 值为（20，91，210），右端色标 的RGB值为（255，255，255）， 如图所示。 11 设置描边参数 设置图层样式后的效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 选择【描边】选项，设置【大小】 为“2像素”，【颜色】的RGB值 为（187，214，247），其它参数 设置如图所

8、示。 设置完后，单击【好】，效果如图 所示。 12 n单击【横排文字工具】，输入网址，如图所示。 制作图标 n打开“网页图标.psd”文件，如图所示。 n将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【title】中， 把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。 输入网址 打开“网页图标.psd” 导入的图片效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 13 n在工具箱中选择【横排文字工具】，输入文字，设置文字颜色为白色，如图所示。 制作导航栏 n在【图层】面板中新增【图层5】，选择工具箱中的【矩形

9、选框工具】，在【选项】栏中设置【样式】为 【固定大小】，【宽度】为“770像素”，【高度】为“25像素”，在参考线顶部创建一个选区，如图所示。 输入文字 创建一个选区 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 14 n执行【视图】【显示】【参考线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中 的【渐变工具】，在【选项】栏上单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变条下 方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”，从左到右，分别设置四个色标的 RGB值为（123，158，186）、（198，220，233）、（

10、225，241，255）、（123，150，169），如图所 示。 n设置完后，单击【好】按钮。 n按住Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。 设置编辑色 对选区进行渐变填充 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 15 n选择【横排文字工具】，输入栏目名称，如图所示。 n执行【图层】【图层样式】【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”， 【颜色】为白色，如图所示。 输入栏目名称 设置描边参数 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 16 n设置完

11、后，单击【好】按钮。 n在【图层】面板中选择【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为 【固定大小】，【宽度】为“2像素”，【高度】为“18像素”，设置完成后创建一个选区，如图所示。 n执行【图像】【调整】【色阶】命令，在弹出的【色阶】对话框中设置参数如图所示。 创建一个选区 设置色阶参数 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 17 n设置完后，单击【好】按钮。 n执行【滤镜】【模糊】【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径】为“1.0像 素”，如图所示。 n单击【好】，按Ctrl+D键，取消选择，效果如图所示。 设置

12、高斯模糊参数 设置高斯模糊后的效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 18 n用同样的方法，制作出其它分隔条，如图所示。 分隔条效果 设计标题栏设计标题栏 17.1 利用Photoshop制作个人主页 19 创建新图层组 n在【图层】面板中，单击图层组【title】左边的小三角箭头，隐藏图层组中的子图层，执行【图层】【新 建】【图层组】命令，在【新图层组】对话框中，输入【名称】为“body”，单击【好】按钮。 n在图层组【body】中，新增【图层6】。选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】 为【固定大小】，【宽度】为“770像素”，【高度】

13、为“420像素”，创建一个选区，如图所示。 创建一个选区 设计页面设计页面 17.1 利用Photoshop制作个人主页 20 n执行【视图】【显示】【参考线】命令，显示参考线，用上面学过的方法，在选区的顶部和底部创建两 条参考线。 n在工具箱中设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，效果如图 11.32所示。 制作分隔线 n接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标，将它们隐藏起 来。 n在【图层】面板中，选择图层组【body】中的【图层6】，按下【锁定】中的【锁定透明像素】按钮，如图 所示。 创建

14、参考线并填充选区 设计页面设计页面 17.1 利用Photoshop制作个人主页 21 n创建两条垂直的参考线，如图所示。 n在工具箱中选择【单列选框工具】，在左边的垂直参考线上单击，创建一个单列选区，如图所示。 n在【图层】面板上新增【图层7】，在工具箱中设置前景色的RGB值为（0，72，101），按Alt+Delete键， 用前景色填充选区。 n用同样的方法，在右侧的参考线上创建单列选区，再填充前景色，删除透明区域中的填充色，效果如图所示。 实际操作中，由于参考线的遮挡，看不到单列填充效果，按Ctrl+H键，可将参考线隐藏起来，看完效果后， 再按一下Ctrl+H键，显示出参考线。 n创建一

15、条水平参考线，选择工具箱中的【单行选框工具】，在水平参考线上创建一个水平单列选区，按 Alt+Delete键，在选区中填充前景色，如图所示。 创建两条垂直的参考线 在参考线上创建单列选区 填充单列选区后的效果 制作出单行选区并填充 设计页面设计页面 17.1 利用Photoshop制作个人主页 22 n单击工具箱中的【矩形选框工具】，在【选项】栏中，设置【样式】为“正常”，设置完后，创建一个选区， 如图所示，设置背景色为白色，按Ctrl+Delete键，用背景色填充选区。 n用上述方法，细心地制作出其它分隔线，隐藏参考线后，效果如图所示。 制作图像特效 n按Ctrl+H键，隐藏参考线，在【图层

16、】面板中，使图层组【title】和图层【背景】显示出来。 n选择图层组【body】中的【图层7】，打开图片“网页图片.jpg”，如图所示。 创建选区并填充 创建其它分隔线 打开“网页图片.jpg” 设计页面设计页面 17.1 利用Photoshop制作个人主页 23 n将打开的图片复制到“个人主页.psd”文件中，如图所示。 n执行【编辑】【变换】【水平翻转】命令，将图片水平翻转。按Ctrl+T键，调整图片的大小和位置，效 果如图所示。 导入图片 调整图片的大小和位置 设计页面设计页面 17.1 利用Photoshop制作个人主页 24 n按回车键，退出图片变换操作。在图层组【body】中新增

17、【图层9】，然后把【图层9】调整到【图层8】的 下面，用【矩形选框工具】创建选区，如图所示。 n选择工具箱中的【渐变工具】，在【选项】栏中，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话 框，设置左边色标颜色的RGB值为（135，185，248），右边色标颜色的RGB值为（255，255，255），如 图所示。 创建选区 渐变编辑器对话框 设计页面设计页面 17.1 利用Photoshop制作个人主页 25 n设置完后，单击【好】按钮。 n按住Shift键，用鼠标从选区的左端拖拉到右端，对选区进行渐变填充，如图。 n选择【图层8】，按住Ctrl键，单击【图层8】，执行【图层】【添加图层蒙版

18、】【显示选区】命令。 n选择【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在【预置】 中选择【黑色、白色】渐变，如图所示。 渐变填充后的效果 选择【黑色、白色】渐变 设计页面设计页面 17.1 利用Photoshop制作个人主页 26 n设置完后，单击【好】按钮。 n回到【图层8】，按住Shift键，用鼠标从图像的右边缘拖拉到左边缘，如图 图像渐变后的效果 设计页面设计页面 17.1 利用Photoshop制作个人主页 27 制作抽线图 n执行【文件】【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。 n将新建的文件放大到最大。 n选择

19、【矩形选框工具】，选中图像的上半部分，按Ctrl+Delete键，在选区内填充白色。按Ctrl+D键，取消选 择，如图所示。 设置新建的图像文件 创建选区并填充白色 设计页面设计页面 17.1 利用Photoshop制作个人主页 28 n执行【编辑】【定义图案】命令，将图片定义为图案。 n切换到“个人主页.psd”文件，在图层组【body】中新增【图层10】，按住Ctrl键，单击【图层9】，如图所 示。 n执行【编辑】【填充】命令，在【填充】对话框中，设置【使用】为【图案】，在【自定图案】中选择刚 刚建立的图案，如图所示。 载入选区 选择填充图案 设计页面设计页面 17.1 利用Photosh

20、op制作个人主页 29 n单击【好】按钮，完成填充后的效果如图所示。 n设置【图层10】的【不透明度】为“40%”，按Ctrl+D键，取消选择，效 果如图所示。 填充后的效果 调节不透明度后的效果 设计页面设计页面 17.1 利用Photoshop制作个人主页 30 制作图标 n打开“图标.psd”文件，如图所示。 n将两个图标分别复制到“个人主页.psd”文件中，调整它们的大小和位置，如图所示。 打开“图标.psd” 调整图片的大小和位置 完成最后的工作完成最后的工作 17.1 利用Photoshop制作个人主页 31 制作文字 n在【图层】面板中，单击图层组【body】左边的三角箭头，隐藏

21、图层组中的子图层。执行【图 层】【新建】【图层组】命令，输入【名称】为“text”，单击【好】按钮。 n在工具箱中设置前景色为黑色，选择【横排文字工具】，输入“Photoshop新闻”。新建【图层 13】，用【直线工具】创建一条宽度为1像素的黑色直线。再输入“News”，如图所示。 输入文本并绘制出直线 完成最后的工作完成最后的工作 17.1 利用Photoshop制作个人主页 32 n用同样的方法，再次输入文本并绘制出直线，如图所示。 n选择【横排文字工具】，输入文字，设置文本颜色的RGB值为（0，72，101），效果如图所示。 n这样，一个简洁、朴实的个人主页就制作完成了。 输入其它文本

22、输入文字后的效果 完成最后的工作完成最后的工作 17.1 利用Photoshop制作个人主页 33 ImageReady简介简介 17.2 ImageReady快速入门 ImageReady ImageReady更提供了包含了大量网页和动画的设计更提供了包含了大量网页和动画的设计 制作工具，功能强大也非常实用。制作工具，功能强大也非常实用。 ImageReadyImageReady为网页设计师提供了最佳解决方案，为网页设计师提供了最佳解决方案， AdobeAdobe公司将它与公司将它与PhotoshopPhotoshop捆绑在一起，便于在捆绑在一起，便于在 photoshopphotoshop

23、中先进行编辑设计，然后再转换到中先进行编辑设计，然后再转换到ImageReadyImageReady 中对图形进行优化，并且添加各种网页元素，如切片、中对图形进行优化，并且添加各种网页元素，如切片、 图像映射、动画和翻转效果等。图像映射、动画和翻转效果等。 34 启动启动ImageReady 17.2 ImageReady快速入门 n 单击单击“开始开始” “程序程序” “Adobe ImageReady Adobe ImageReady CS2CS2” n PC PC中单击工具箱上的中单击工具箱上的“在在ImageReadyImageReady中编辑中编辑”图标图标 35 ImageRead

24、y工作界面工作界面 17.2 ImageReady快速入门 ImageReady ImageReady工作界面和工作界面和PSPS基本相同。只是在基本相同。只是在PSPS的基的基 础上添加和删除了一些功能。添加了优化面板、切片面础上添加和删除了一些功能。添加了优化面板、切片面 板、板、WebWeb内容面板、图像映射面板和图像映射工具等。内容面板、图像映射面板和图像映射工具等。 在在ImageReadyImageReady中制作的图像文件，可以不必关闭，中制作的图像文件，可以不必关闭， 只要单击工具箱上的只要单击工具箱上的“在在PhotoshopPhotoshop中编辑中编辑”图标，就可图标，就

25、可 以返回到以返回到PhotoshopPhotoshop中继续进行图像处理。中继续进行图像处理。 36 动画控制面板动画控制面板 17.2 ImageReady快速入门 n单击单击“窗口窗口” “动画动画” ，显示或隐藏动画面板，显示或隐藏动画面板 选择 循环 选项 选择 第一 帧 选择 前一 帧 选择 后一 帧 动画 帧过 渡 删除 选中 的帧 复制 选中 的帧 播 放 动 画 37 动画面板动画面板 17.2 ImageReady快速入门 n单击【过渡】按钮，将弹出如图 所示的对话框。 l过渡：设置插入帧的起始帧位置 l要添加的帧：设置插入帧的数目 n 在动画面板中，单击每一图像框 的右下角的【选择帧延时间】可以 为每一幅设定好的过程图像设置时 间延迟 38 网页网页banner制作制作 17.3 网页banner制作 39 在在PS中制作全部画面中制作全部画面 17.3 网页banner制作 制作光照效果制作光照效果 打开背景文件打开背景文件 设置背景色为白色，新建图层设置背景色为白色，新建图层1 1，用多边形套索工具，用多边形套索工具， 绘制多边形选区，并填充前景色。绘制多边形选区，并填充前景色。 1.1.设定图层设定图层1 1的的“不透明度不透明度”为为