第11章网页设计与ImageReady的应用

Presentation on theme: "第11章网页设计与ImageReady的应用"— Presentation transcript:

1 第11章网页设计与ImageReady的应用

2 教学目标 网页设计已经逐渐成为一个热门的话题，而Photoshop又是设计页面的重要工具。通过前面的学习，相信大家利用Photoshop来制作网页的页面已经不是什么问题了，本章的主要目标是讲解如何切片和优化网页图片，以及如何制作Web画廊和GIF动画等。

3 重点与难点 ◆ 图像的切片与优化 ◆ 熟悉ImageReady，初步掌握制作动画的方法 ◆ GIF动画制作 ◆ Web页的输出

4 11.1 利用Photoshop制作个人主页 本节利用Photoshop，制作一个介绍图形图像的个人主页。在实例中，主色调选用了蓝色，蓝色能给人一种平静、理智、永恒、博大的感觉。同时，运用白色、蓝色和其它颜色的搭配，使网页显得典雅、温馨。 个人主页效果

5 11.1.1 设计标题栏 创建新的图像文件 创建参考线 设置新建的图像文件 设置新图层组
11.1.1 设计标题栏 创建新的图像文件 启动Photoshop，执行【文件】｜【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。 创建参考线 执行【图层】｜【新建】｜【图层组】命令，弹出【新图层组】对话框，设置【名称】为“title”，如图所示。 设置新建的图像文件 设置新图层组

6 单击【好】按钮。在【图层】面板中，新增【图层1】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“100像素”，在【图层1】中创建一个选区，如图所示。 按Ctrl+R键，打开标尺，用鼠标从横向标尺上拉出一条参考线，如图所示。 创建一个矩形选区 创建参考线

7 制作背景图案 按Ctrl+R键，隐藏标尺，设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，在【路径】面板中新增【路径1】，用【钢笔工具】绘制出路径，如图所示。 在【路径】面板中新增【路径2】，用【钢笔工具】绘制出路径，如图 。 绘制出路径1 绘制出路径2

8 在【图层】面板中，新增【图层2】。按住Ctrl键，单击【路径】面板中的【路径1】，将路径转化为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，在渐变色条下，设置左端色标的RGB值为（235，241，246），右端色标的RGB值为（135，185，248），其它参数设置如图所示。 设置完后，单击【好】按钮。按住Shift键，用鼠标从选区的顶端拖拉到底端，创建渐变，按Ctrl+D键，取消选区，如图所示。 设置渐变色 从上到下的渐变效果

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

10 制作LOGO文字 输入“图像爱好者天堂” 设置渐变色 选择工具箱中的【横排文字工具】，在【选项】栏中设置文字颜色为黑色，输入文字，如图所示。
执行【图层】｜【图层样式】｜【渐变叠加】命令，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左端色标的RGB值为（20，91，210），右端色标的RGB值为（255，255，255），如图所示。 输入“图像爱好者天堂” 设置渐变色

11 选择【描边】选项，设置【大小】为“2像素”，【颜色】的RGB值为（187，214，247），其它参数设置如图所示。
设置完后，单击【好】，效果如图所示。 设置描边参数 设置图层样式后的效果

12 输入网址 打开“网页图标.psd” 导入的图片效果 制作图标 单击【横排文字工具】，输入网址，如图所示。
将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【title】中，把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。 输入网址 打开“网页图标.psd” 导入的图片效果

13 制作导航栏 输入文字 创建一个选区 在工具箱中选择【横排文字工具】，输入文字，设置文字颜色为白色，如图所示。
在【图层】面板中新增【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“25像素”，在参考线顶部创建一个选区，如图所示。 输入文字 创建一个选区

14 执行【视图】｜【显示】｜【参考线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中的【渐变工具】，在【选项】栏上单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变条下方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”，从左到右，分别设置四个色标的RGB值为（123，158，186）、（198，220，233）、（225，241，255）、（123，150，169），如图所示。 设置完后，单击【好】按钮。 按住Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。 设置编辑色 对选区进行渐变填充

15 输入栏目名称 设置描边参数 选择【横排文字工具】，输入栏目名称，如图所示。
执行【图层】｜【图层样式】｜【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”，【颜色】为白色，如图所示。 输入栏目名称 设置描边参数

16 创建一个选区 设置色阶参数 设置完后，单击【好】按钮。
在【图层】面板中选择【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“2像素”，【高度】为“18像素”，设置完成后创建一个选区，如图所示。 执行【图像】｜【调整】｜【色阶】命令，在弹出的【色阶】对话框中设置参数如图所示。 创建一个选区 设置色阶参数

17 设置高斯模糊参数 设置高斯模糊后的效果 设置完后，单击【好】按钮。
执行【滤镜】｜【模糊】｜【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径】为“1.0像素”，如图所示。 单击【好】，按Ctrl+D键，取消选择，效果如图所示。 设置高斯模糊参数 设置高斯模糊后的效果

18 11.1.2. 设计页面 创建新图层组 分隔条效果 创建一个选区 用同样的方法，制作出其它分隔条，如图所示。
在【图层】面板中，单击图层组【title】左边的小三角箭头，隐藏图层组中的子图层，执行【图层】｜【新建】｜【图层组】命令，在【新图层组】对话框中，输入【名称】为“body”，单击【好】按钮。 在图层组【body】中，新增【图层6】。选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“420像素”，创建一个选区，如图所示。 分隔条效果 创建一个选区

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

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

21 制作图像特效 创建选区并填充 创建其它分隔线 打开“网页图片.jpg”
单击工具箱中的【矩形选框工具】，在【选项】栏中，设置【样式】为“正常”，设置完后，创建一个选区，如图所示，设置背景色为白色，按Ctrl+Delete键，用背景色填充选区。 用上述方法，细心地制作出其它分隔线，隐藏参考线后，效果如图所示。 制作图像特效 按Ctrl+H键，隐藏参考线，在【图层】面板中，使图层组【title】和图层【背景】显示出来。 选择图层组【body】中的【图层7】，打开图片“网页图片.jpg”，如图所示。 创建选区并填充 创建其它分隔线 打开“网页图片.jpg”

22 导入图片 调整图片的大小和位置 将打开的图片复制到“个人主页.psd”文件中，如图所示。
执行【编辑】｜【变换】｜【水平翻转】命令，将图片水平翻转。按Ctrl+T键，调整图片的大小和位置，效果如图所示。 导入图片 调整图片的大小和位置

23 按回车键，退出图片变换操作。在图层组【body】中新增【图层9】，然后把【图层9】调整到【图层8】的下面，用【矩形选框工具】创建选区，如图所示。
选择工具箱中的【渐变工具】，在【选项】栏中，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左边色标颜色的RGB值为（135，185，248），右边色标颜色的RGB值为（255，255，255），如图所示。 创建选区 渐变编辑器对话框

24 渐变填充后的效果 选择【黑色、白色】渐变 设置完后，单击【好】按钮。
按住Shift键，用鼠标从选区的左端拖拉到右端，对选区进行渐变填充，如图。 选择【图层8】，按住Ctrl键，单击【图层8】，执行【图层】｜【添加图层蒙版】｜【显示选区】命令。 选择【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在【预置】中选择【黑色、白色】渐变，如图所示。 渐变填充后的效果 选择【黑色、白色】渐变

25 设置完后，单击【好】按钮。 回到【图层8】，按住Shift键，用鼠标从图像的右边缘拖拉到左边缘，如图 图像渐变后的效果

26 制作抽线图 设置新建的图像文件 创建选区并填充白色 执行【文件】｜【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。
将新建的文件放大到最大。 选择【矩形选框工具】，选中图像的上半部分，按Ctrl+Delete键，在选区内填充白色。按Ctrl+D键，取消选择，如图所示。 设置新建的图像文件 创建选区并填充白色

27 载入选区 选择填充图案 执行【编辑】｜【定义图案】命令，将图片定义为图案。
切换到“个人主页.psd”文件，在图层组【body】中新增【图层10】，按住Ctrl键，单击【图层9】，如图所示。 执行【编辑】｜【填充】命令，在【填充】对话框中，设置【使用】为【图案】，在【自定图案】中选择刚刚建立的图案，如图所示。 载入选区 选择填充图案

28 填充后的效果 调节不透明度后的效果 单击【好】按钮，完成填充后的效果如图所示。
设置【图层10】的【不透明度】为“40%”，按Ctrl+D键，取消选择，效果如图所示。 填充后的效果 调节不透明度后的效果

29 11.1.3 完成最后的工作 制作图标 打开“图标.psd” 调整图片的大小和位置 打开“图标.psd”文件，如图所示。

30 制作文字 在【图层】面板中，单击图层组【body】左边的三角箭头，隐藏图层组中的子图层。执行【图层】｜【新建】｜【图层组】命令，输入【名称】为“text”，单击【好】按钮。 在工具箱中设置前景色为黑色，选择【横排文字工具】，输入“Photoshop新闻”。新建【图层13】，用【直线工具】创建一条宽度为1像素的黑色直线。再输入“News”，如图所示。 输入文本并绘制出直线

31 输入其它文本 输入文字后的效果 用同样的方法，再次输入文本并绘制出直线，如图所示。
选择【横排文字工具】，输入文字，设置文本颜色的RGB值为（0，72，101），效果如图所示。 这样，一个简洁、朴实的个人主页就制作完成了。 输入其它文本 输入文字后的效果

32 11.2 ImageReady快速入门 11.2.1 ImageReady简介
Adobe ImageReady刚诞生时是作为一个独立的动画编辑软件发布的，直到Photoshop升级到5.5版本的时候，Adobe公司才将升级到2.0版本的ImageReady捆绑在一起，搭配销售，弥补Photoshop在动画编辑以及网页制作方面的不足。ImageReady具备Photoshop中常用的图像编辑功能，同时ImageReady更提供了包含了大量网页和动画的设计制作工具，功能强大也非常实用。 Photoshop7.0发布的时候，ImageReady就同步升级到了7.0，目前Adobe CS2套件发布，ImageReady也就一同升级成为崭新的ImageReady CS2。 ImageReady的优点主要在设计稿切割成网页与动画制作方面，新版本增加的新工具、Web 内容面板、表面板以及切片面板都在加强其网页设计制作功能，为网页设计人员更多的方便。 利用ImageReady可以将Photoshop的图像操作进行优化，使其更适合网页设计，也可以通过分割图像自动制作HTML文档，还可以制作简单的GIF动画。但ImageReady不支持CMYK色彩模式，无法进行与印刷相关的图像操作，它是专门的网络图像处理工具

33 11.2.2 ImageReady启动 Adobe ImageReady CS2的工作界面
单击“开始”按钮，在“程序”的下一级菜单中选择“Adobe ImageReady CS2”，出现如图所示的窗口，即为Adobe ImageReady CS2的工作界面。也可以在Photoshop CS2中单击工具箱上的“在ImageReady中编辑”图标，将直接转换到Adobe ImageReady CS2的界面。 使用ImageReady可以像Photoshop一样进行图层及滤镜的效果制作，也可以进行动画制作，并将其应用到网页中。而且ImageReady在图像制作过程中可以随时使用Photoshop的效果，非常方便。 在ImageReady中制作的图像文件，可以不必关闭，只要单击工具箱上的“在Photoshop中编辑”图标，就可以返回到Photoshop中继续进行图像处理。 Adobe ImageReady CS2的工作界面

34 11.3 GIF动画制作实例 11.3.1 动画控制面板 【动画】调板
默认时，动画面板并没有显示出来，只要执行【窗口】→【动画】命令，即可显示该面板，如图所示。 单击【永远】按钮，将弹出一个子菜单，其中包括一次、永远和其他三个选项。 ◆一次：选择此选项后，动画只播放一次。 ◆永远：选择此选项后，动画将不停地连续播放。 ◆其他：选择此选项后，将弹出如图所示的对话框，用户可以自定义动画的播放次数。 【动画】调板

35 设置循环次数 过渡对话框 设置时间设定键 单击【过渡】按钮，将弹出如图所示的对话框。
在该对话框中，【过渡】下拉列表框且来设置插入帧的起始帧位置，【要添加的帧】文本框用于设置插入帧的数目。 在动画面板中，单击每一图像框的右下角的【选择帧延时间】键，此时在弹出的列表中可以为每一幅设定好的过程图像设置时间延迟，如图所示。 动作制作完成后，单击面板中的播放动画按钮，动画就开始播放。 设置循环次数 过渡对话框 设置时间设定键

36 GIF实例制作 我们可以使用分层的Photoshop或ImageReady图像在ImageReady中创建简单的动画。动画其实是由一系列图像帧组成的，通过使每一帧与下一帧都有稍微的不同，就可以使人产生一种运动的错觉。相对于Photoshop，ImageReady的使用就简单多了。 （1）先在Photoshop中创建需要呈现动画效果的图像。但需要注意的是，静态元素不能与动态元素放置在同一层中，而必须单独创建一个图层。运动的元素可以放在不同的多个图层中，并且用于运动元素的每个图层应代表它在不同时间点的位置。 （2）存储文件，然后执行【文件】→【在ImageReady中编辑】命令，ImageReady应用程序将打开并显示该图像。接着在ImageReady中进行下面的操作。 （3）单击【动画】选项卡使【动画】调板出现在前面。如果该调板未打开，可通过【窗口】→【动画】命令来打开。 （4）单击【图层】选项卡使【图层】调板出现在前面。如果该调板未打开，可以通过【窗口】→【图层】命令打开。调整【图层】调板和【动画】调板的位置，以便看到文档窗口的一部分以及这两个调板，如图所示。接着对动画的相关设置就很简单了，通过【动画】调板就可以完成，如图所示。 对话框的布局 动画面板

37 （5）在【图层】调板中确保对于第一帧正确地显示或隐藏了各个图层。单击眼睛图标可以隐藏某个图层（再次单击眼睛图标所在的位置可以显示某个图层）。
（6）单击【动画】调板底部的【复制当前帧】按钮 添加下一帧。在【图层】调板中，根据这一帧的需要调整各个图层的可见性。继续添加新的帧，并根据需要隐藏或显示各个图层。 （7）创建完所有的动画帧后，单击【动画】调板底部的【播放】按钮 预览动画。单击【停止】按钮 可停止播放。 （8）如果动画的变换速度过快，请选中要调整其显示时间的特定帧，或选中所有帧来统一改变它们的显示时间。选择好帧后，单击帧底部【0秒】旁边的箭头，并从弹出式菜单中选择所需的时间（连续的动画一般可以设置为0.2或0.5秒）。 如果要设置动画循环的次数，可以从【动画】调板左下角的弹出式菜单中选取【其它】（默认为【一直有效】），然后输入一个值以指定【播放】次数，然后单击【好】按钮。 获得满意的动画效果后，存储文件。请先用Photoshop格式存储文件，这一点很重要。Photoshop格式会保留图像的所有组件，并允许以后根据需要进行更改。将图像存储为PSD格式后，可以针对Web使用优化动画，并将优化结果存储为GIF格式，这样一个GIF动画的制作就完成了。

38 11.4 网页图像的切片 动画控制面板 通过前面的学习，相信大家利用Photoshop来设计一个网页的页面已经不再是一个难题了。下面我们就重点讲解一下图像切片和优化等问题。 图像的切片 切片是指图像的一块矩形区域，可用于在产生的Web页中创建链接、翻转和动画。通过将图像划分成切片，可以更好地对功能进行控制，并对图像文件大小进行优化，以提高浏览网页时图片的下载速度。 处理包含不同数据类型的图像时，切片也很有用。例如，如果需要以GIF格式优化图像的某一区域以便支持动画，而图像的其余部分以JPEG格式优化更好时，就可以使用切片来实现。 （1）先打开已经设计好的网页图像，接着从工具箱中选择【切片工具】按钮。 （2）选取选项栏中的样式设置：【正常】选项通过拖移确定切片比例；【固定长宽比】选项设置高度与宽度的比例，输入整数或小数作为长宽比，例如，若要创建一个宽度是高度3倍的切片，则输入宽度3和高度1即可；【固定大小】选项指定切片的高度和宽度，输入整数像素值。 （3）在要创建切片的区域上拖移鼠标。按住Shift键并拖移可将切片限制为正方形。按住Alt键拖移可从中心绘制。切片后的情况如图所示，其中，图中切片左上角的数字为切片的编号。

39 切片后的图像 切片的选择和修改 先从工具箱中选择【切片选择工具】（按住Ctrl键可以在【切片工具】和【切片选择工具】间切换），然后单击图像中的切片，即可选中切片。 选中切片后拖动鼠标，即可移动切片的位置。拖动切片旁边的编辑点，可以改变切片区域的大小。选中切片后，按键盘上的Delete键可以删除切片。

40 11.5 网页图像优化和Web页输出 11.5.1 图像优化 优化对话框
在该对话框中，左边为原始图的效果，右边为应用了相应的设置后的预览效果。 （2）先从对话框左边的工具箱中选择【切片选择工具】，然后在右边预览图中单击选中切片（按住Shift单击切片，则可以同时选中多个切片）。 （3）选中切片后，通过调整最右边参数框中的相关参数（包括图片格式、品质和模糊度等），并注意观察切片的效果和预览图底部的文件大小变化。 在这里，我们可以给每个切片都设置不同的品质或文件格式。通过参数的不断调整，直到找到合适的参数。 优化对话框

41 Web页输出 设置完切片的参数后，直接单击【存储为Web所用格式】对话框上的【存储】按钮打开【将优化结果存储为】对话框，如图13.3所示。 在【保存类型】下拉列表中选择“HTML和图像”选项，在【切片】下拉列表中选择“所有切片”，【设置】用“默认设置”，在【文件名】文本框中给HTML取个名称（如index.html），然后单击【保存】按钮。 保存后将得到一个HTML文件和一个存放切片的“images”文件夹。用Dreamweaver或FrontPage打开该HTML文件就可以进行编辑处理了。

42 11.6 本章小结 Photoshop在网页设计方面有着非常强大的功能，只要善于应用，将能制作出非常专业和漂亮的网页。ImageReady是集成在Photoshop中的一个应用程序，它在网页图像制作和优化方面非常便捷，通过本章的学习，希望大家能掌握制作动画的基本方法。

43 11.7 习题与上机操作 1. 选择题 （1）【切片工具】或【切片选取工具】的快捷键是（ ），按（ ）可以在【切片工具】和【切片选取工具】间切换选择。 A. T B. K C. Shift+K D. B E. Ctrl+K （2）在使用【切片工具】切片时，若按下（ ）键可以得到正方形切片；若按下（ ）键则可以以单击位置为中心点向外产生矩形切片；若按下（ ）键则可以以单击位置为中心点向外产生正方形切片。 A. Shift B. Alt C. Ctrl D. Ctrl+Alt E. Shift+Alt （3）Photoshop提供了对网络图像设计的支持，这主要表现在（ ）方面。 A. 提供多种文件格式 B. 支持图像的优化输出 C. 能够轻松制作动画 D. 强大的切片功能 （4）在Photoshop中，制作“切片”的目的是（ ）。 A. 分割大图像 B. 实现网页之间的跳转 C. 将大图片划分成切片便于在网上传输 D. 切除图像中不需要的部分 （5）目前在体积与逼真两方面相对来说比较好的有JPG、GIF和PNG三种文件格式，但在网上真正流行的只有（ ）格式。 A. JPG B. GIF C. PNG D. TIF

44 2.上机操作 （1）制作一个长486像素、高60像素的GIF广告条幅。广告的宣传内容可以自己设计，或参考网站 （2）制作如下图所示的艺术网站。