《《电脑美术》第17章网页设计与ImageReady的应用》由会员分享，可在线阅读，更多相关《《电脑美术》第17章网页设计与ImageReady的应用（45页珍藏版）》请在金锄头文库上搜索。
1、117.117.1利用利用PhotoshopPhotoshop设计网页设计网页17.217.2ImageReadyImageReady快速入门快速入门17.317.3网页网页bannerbanner动画制作动画制作第第17章章 网页设计与网页设计与ImageReady的应用的应用2 网网页页设设计计已已经经逐逐渐渐成成为为一一个个热热门门的的话话题题，而而PhotoshopPhotoshop又又是是设设计计页页面面的的重重要要工工具具。通通过过前前面面的的学学习习，相相信信大大家家利利用用PhotoshopPhotoshop来来制制作作网网页页的的页页面面已已经经不不是是什什么么问问题题了了，
2、本本章章的的主主要要目目标标是是讲讲解解如如何何切切片片和和优优化化网网页图片，以及如何制作页图片，以及如何制作WebWeb画廊和画廊和GIFGIF动画等。动画等。本章目标本章目标第17章 网页设计与ImageReady的应用3 制作一个介绍图形图像的个人主页。在实例中，主色调选用了蓝色，蓝色能给人一种平静、理智、永恒、博大的感觉。同时，运用白色、蓝色和其它颜色的搭配，使网页显得典雅、温馨。 制作个人主页制作个人主页17.1 利用Photoshop制作个人主页4创建新的图像文件n启动Photoshop，执行【文件】【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。创建参考
3、线 n执行【图层】【新建】【图层组】命令，弹出【新图层组】对话框，设置【名称】为“title”设计标题栏设计标题栏17.1 利用Photoshop制作个人主页5 创建一个矩形选区 创建参考线 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页新增【图层1】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“100像素”，在【图层1】中创建一个选区，如图所示。按Ctrl+R键，打开标尺，用鼠标从横向标尺上拉出一条参考线，如图所示。 6 绘制出路径1 绘制出路径2 设计标题栏设计标题栏17.1 利用Photoshop制作个
4、人主页制作背景图案 按Ctrl+R键，隐藏标尺，设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，在【路径】面板中新增【路径1】，用【钢笔工具】绘制出路径，如图所示。 在【路径】面板中新增【路径2】，用【钢笔工具】绘制出路径，如图 。7 设置渐变色 从上到下的渐变效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页在【图层】面板中，新增【图层2】。按住Ctrl键，单击【路径】面板中的【路径1】，将路径转化为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，在渐变色条下，设置左端色标的R
5、GB值为（235，241，246），右端色标的RGB值为（135，185，248），其它参数设置如图所示。设置完后，单击【好】按钮。按住Shift键，用鼠标从选区的顶端拖拉到底端，创建渐变，按Ctrl+D键，取消选区，如图所示。 8 渐变填充效果 设置【减淡工具】的参数 润饰图像后的效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页新增【图层3】，按住Ctrl键，在【路径】面板中单击【路径2】，将路径转变为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变色条下，保持左端色标的颜色不变，设置右端色标颜色的RGB值为（
6、170，204，248），单击【好】按钮。按住Shift键，用鼠标从选区的上端拖拉到选区的下端，创建渐变效果。在【图层】面板中，将【图层3】调整到【图层2】的下面，按Ctrl+D键，取消选择，效果如图 选择工具箱中的【减淡工具】，在工具【选项】栏中，设置参数如图所示。 用鼠标涂抹过渡不自然的区域，润饰图像，效果如图所示。 9 输入“图像爱好者天堂” 设置渐变色 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页制作LOGO文字 选择工具箱中的【横排文字工具】，在【选项】栏中设置文字颜色为黑色，输入文字，如图所示。 执行【图层】【图层样式】【渐变叠加】命令，单击【点按可编辑渐变】按
7、钮，打开【渐变编辑器】对话框，设置左端色标的RGB值为（20，91，210），右端色标的RGB值为（255，255，255），如图所示。 10 设置描边参数 设置图层样式后的效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页选择【描边】选项，设置【大小】为“2像素”，【颜色】的RGB值为（187，214，247），其它参数设置如图所示。 设置完后，单击【好】，效果如图所示。 11n单击【横排文字工具】，输入网址，如图所示。 制作图标n打开“网页图标.psd”文件，如图所示。n将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【tit
8、le】中，把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。 输入网址 打开“网页图标.psd” 导入的图片效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页12n在工具箱中选择【横排文字工具】，输入文字，设置文字颜色为白色，如图所示。 制作导航栏 n在【图层】面板中新增【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“25像素”，在参考线顶部创建一个选区，如图所示。 输入文字 创建一个选区 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页13n执行【视图】【显示】【参考
9、线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中的【渐变工具】，在【选项】栏上单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变条下方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”，从左到右，分别设置四个色标的RGB值为（123，158，186）、（198，220，233）、（225，241，255）、（123，150，169），如图所示。n设置完后，单击【好】按钮。n按住Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。 设置编辑色 对选区进行渐变填充 设计标题栏设计标题栏17.1 利用Pho
10、toshop制作个人主页14n选择【横排文字工具】，输入栏目名称，如图所示。 n执行【图层】【图层样式】【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”，【颜色】为白色，如图所示。 输入栏目名称 设置描边参数 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页15n设置完后，单击【好】按钮。n在【图层】面板中选择【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“2像素”，【高度】为“18像素”，设置完成后创建一个选区，如图所示。 n执行【图像】【调整】【色阶】命令，在弹出的【色阶】对话框中设置参数如图所示。 创建一
11、个选区 设置色阶参数 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页16n设置完后，单击【好】按钮。n执行【滤镜】【模糊】【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径】为“1.0像素”，如图所示。 n单击【好】，按Ctrl+D键，取消选择，效果如图所示。 设置高斯模糊参数 设置高斯模糊后的效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页17n用同样的方法，制作出其它分隔条，如图所示。 分隔条效果 设计标题栏设计标题栏17.1 利用Photoshop制作个人主页18创建新图层组 n在【图层】面板中，单击图层组【title】左边的小三角箭头，隐藏
12、图层组中的子图层，执行【图层】【新建】【图层组】命令，在【新图层组】对话框中，输入【名称】为“body”，单击【好】按钮。n在图层组【body】中，新增【图层6】。选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“420像素”，创建一个选区，如图所示。 创建一个选区 设计页面设计页面17.1 利用Photoshop制作个人主页19n执行【视图】【显示】【参考线】命令，显示参考线，用上面学过的方法，在选区的顶部和底部创建两条参考线。n在工具箱中设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，效
13、果如图11.32所示。 制作分隔线 n接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标，将它们隐藏起来。n在【图层】面板中，选择图层组【body】中的【图层6】，按下【锁定】中的【锁定透明像素】按钮，如图所示。 创建参考线并填充选区 设计页面设计页面17.1 利用Photoshop制作个人主页20n创建两条垂直的参考线，如图所示。n在工具箱中选择【单列选框工具】，在左边的垂直参考线上单击，创建一个单列选区，如图所示。n在【图层】面板上新增【图层7】，在工具箱中设置前景色的RGB值为（0，72，101），按Alt+Delete键，用前景色填充选区。n用同样的
14、方法，在右侧的参考线上创建单列选区，再填充前景色，删除透明区域中的填充色，效果如图所示。实际操作中，由于参考线的遮挡，看不到单列填充效果，按Ctrl+H键，可将参考线隐藏起来，看完效果后，再按一下Ctrl+H键，显示出参考线。n创建一条水平参考线，选择工具箱中的【单行选框工具】，在水平参考线上创建一个水平单列选区，按Alt+Delete键，在选区中填充前景色，如图所示。 创建两条垂直的参考线 在参考线上创建单列选区 填充单列选区后的效果 制作出单行选区并填充 设计页面设计页面17.1 利用Photoshop制作个人主页21n单击工具箱中的【矩形选框工具】，在【选项】栏中，设置【样式】为“正常”
15、，设置完后，创建一个选区，如图所示，设置背景色为白色，按Ctrl+Delete键，用背景色填充选区。n用上述方法，细心地制作出其它分隔线，隐藏参考线后，效果如图所示。 制作图像特效 n按Ctrl+H键，隐藏参考线，在【图层】面板中，使图层组【title】和图层【背景】显示出来。n选择图层组【body】中的【图层7】，打开图片“网页图片.jpg”，如图所示。 创建选区并填充 创建其它分隔线 打开“网页图片.jpg” 设计页面设计页面17.1 利用Photoshop制作个人主页22n将打开的图片复制到“个人主页.psd”文件中，如图所示。n执行【编辑】【变换】【水平翻转】命令，将图片水平翻转。按C
16、trl+T键，调整图片的大小和位置，效果如图所示。 导入图片 调整图片的大小和位置 设计页面设计页面17.1 利用Photoshop制作个人主页23n按回车键，退出图片变换操作。在图层组【body】中新增【图层9】，然后把【图层9】调整到【图层8】的下面，用【矩形选框工具】创建选区，如图所示。 n选择工具箱中的【渐变工具】，在【选项】栏中，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左边色标颜色的RGB值为（135，185，248），右边色标颜色的RGB值为（255，255，255），如图所示。 创建选区 渐变编辑器对话框 设计页面设计页面17.1 利用Photoshop制作个人
17、主页24n设置完后，单击【好】按钮。n按住Shift键，用鼠标从选区的左端拖拉到右端，对选区进行渐变填充，如图。n选择【图层8】，按住Ctrl键，单击【图层8】，执行【图层】【添加图层蒙版】【显示选区】命令。n选择【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在【预置】中选择【黑色、白色】渐变，如图所示。 渐变填充后的效果 选择【黑色、白色】渐变 设计页面设计页面17.1 利用Photoshop制作个人主页25n设置完后，单击【好】按钮。n回到【图层8】，按住Shift键，用鼠标从图像的右边缘拖拉到左边缘，如图 图像渐变后的效果 设计页面设计页面17.1 利
18、用Photoshop制作个人主页26制作抽线图 n执行【文件】【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。n将新建的文件放大到最大。n选择【矩形选框工具】，选中图像的上半部分，按Ctrl+Delete键，在选区内填充白色。按Ctrl+D键，取消选择，如图所示。 设置新建的图像文件 创建选区并填充白色 设计页面设计页面17.1 利用Photoshop制作个人主页27n执行【编辑】【定义图案】命令，将图片定义为图案。n切换到“个人主页.psd”文件，在图层组【body】中新增【图层10】，按住Ctrl键，单击【图层9】，如图所示。n执行【编辑】【填充】命令，在【填充】对
19、话框中，设置【使用】为【图案】，在【自定图案】中选择刚刚建立的图案，如图所示。 载入选区 选择填充图案 设计页面设计页面17.1 利用Photoshop制作个人主页28n单击【好】按钮，完成填充后的效果如图所示。n设置【图层10】的【不透明度】为“40%”，按Ctrl+D键，取消选择，效果如图所示。 填充后的效果 调节不透明度后的效果 设计页面设计页面17.1 利用Photoshop制作个人主页29制作图标 n打开“图标.psd”文件，如图所示。 n将两个图标分别复制到“个人主页.psd”文件中，调整它们的大小和位置，如图所示。 打开“图标.psd” 调整图片的大小和位置 完成最后的工作完成最
20、后的工作17.1 利用Photoshop制作个人主页30制作文字n在【图层】面板中，单击图层组【body】左边的三角箭头，隐藏图层组中的子图层。执行【图层】【新建】【图层组】命令，输入【名称】为“text”，单击【好】按钮。n在工具箱中设置前景色为黑色，选择【横排文字工具】，输入“Photoshop新闻”。新建【图层13】，用【直线工具】创建一条宽度为1像素的黑色直线。再输入“News”，如图所示。 输入文本并绘制出直线 完成最后的工作完成最后的工作17.1 利用Photoshop制作个人主页31n用同样的方法，再次输入文本并绘制出直线，如图所示。n选择【横排文字工具】，输入文字，设置文本颜色
21、的RGB值为（0，72，101），效果如图所示。n这样，一个简洁、朴实的个人主页就制作完成了。 输入其它文本 输入文字后的效果 完成最后的工作完成最后的工作17.1 利用Photoshop制作个人主页32ImageReady简介简介17.2 ImageReady快速入门 ImageReadyImageReady更更提提供供了了包包含含了了大大量量网网页页和和动动画画的的设设计计制制作工具，功能强大也非常实用。作工具，功能强大也非常实用。 ImageReadyImageReady为为网网页页设设计计师师提提供供了了最最佳佳解解决决方方案案，AdobeAdobe公公 司司 将将 它它 与与 Pho
22、toshopPhotoshop捆捆 绑绑 在在 一一 起起 ， 便便 于于 在在photoshopphotoshop中中先先进进行行编编辑辑设设计计，然然后后再再转转换换到到ImageReadyImageReady中中对对图图形形进进行行优优化化，并并且且添添加加各各种种网网页页元元素素，如如切切片片、图图像映射、动画和翻转效果像映射、动画和翻转效果等。等。33启动启动ImageReady17.2 ImageReady快速入门 n 单单击击“开开始始” ” “程程序序” ” “Adobe “Adobe ImageReady ImageReady CS2”CS2”n PC PC中单击工具箱上的中
23、单击工具箱上的“在在ImageReadyImageReady中编辑中编辑”图标图标 34ImageReady工作界面工作界面17.2 ImageReady快速入门 ImageReadyImageReady工工作作界界面面和和PSPS基基本本相相同同。只只是是在在PSPS的的基基础础上上添添加加和和删删除除了了一一些些功功能能。添添加加了了优优化化面面板板、切切片片面面板板、WebWeb内容面板、图像映射面板和图像映射工具等。内容面板、图像映射面板和图像映射工具等。 在在ImageReadyImageReady中中制制作作的的图图像像文文件件，可可以以不不必必关关闭闭，只只要要单单击击工工具具箱
24、箱上上的的“在在PhotoshopPhotoshop中中编编辑辑”图图标标，就就可可以以返回到返回到PhotoshopPhotoshop中继续进行图像处理。中继续进行图像处理。 35动画控制面板动画控制面板 17.2 ImageReady快速入门 n单击单击“窗口窗口” “动画动画” ，显示或隐藏动画面板，显示或隐藏动画面板选择循环选项选择第一帧选择前一帧选择后一帧动画帧过渡 删除选中的帧复制选中的帧播放动画36动画面动画面板板 17.2 ImageReady快速入门 n单击【过渡】按钮，将弹出如图所示的对话框。l过渡：设置插入帧的起始帧位置l要添加的帧：设置插入帧的数目n 在动画面板中，单击
25、每一图像框的右下角的【选择帧延时间】可以为每一幅设定好的过程图像设置时间延迟37网页网页banner制作制作17.3 网页banner制作38在在PS中制作全部画面中制作全部画面17.3 网页banner制作制作光照效果制作光照效果1.1.打开背景文件打开背景文件2.2. 设设置置背背景景色色为为白白色色，新新建建图图层层1 1，用用多多边边形形套套索索工工具具，绘制多边形选区，并填充前景色。绘制多边形选区，并填充前景色。3.3.设定图层设定图层1 1的的“不透明度不透明度”为为50%50%39在在PS中制作全部画面中制作全部画面17.3 网页banner制作制作光照效果制作光照效果4.4.新
26、新建建图图层层2 2，仿仿照照步步骤骤2 2、3 3绘绘制制光光照照效效果果，填填充充颜颜色色（R:84,G:255,B:0R:84,G:255,B:0）, ,5.5.新新建建图图层层3 3，仿仿照照步步骤骤2 2、3 3绘绘制制光光照照效效果果，填填充充颜颜色色（R:255,G:138,B:0R:255,G:138,B:0）, ,40在在PS中制作全部画面中制作全部画面17.3 网页banner制作添加文字添加文字1.1.使用文字工具，添加文字。使用文字工具，添加文字。2.2.设置文字图层的样式（描边、投影）。设置文字图层的样式（描边、投影）。41在在Imageready中制作动画中制作动画
27、17.3 网页banner制作添加帧添加帧1.1.在在psps中单击中单击“在在ImageReadyImageReady中编辑中编辑”按钮，切换到按钮，切换到ImageReadyImageReady中。中。2.2.打打开开“动动画画”面面板板，面面板板中中有有一一帧帧，在在“图图层层”面面板板中中隐隐藏藏除除“背景背景”图层外的所有图层。图层外的所有图层。42在在Imageready中制作动画中制作动画17.3 网页banner制作添加帧添加帧3.3.单击单击“复制帧复制帧”按钮，复制一帧，同时显示图层按钮，复制一帧，同时显示图层1 1。4.4.按步骤按步骤3 3的方法，复制帧依次显示图层的方
28、法，复制帧依次显示图层2 2、图层、图层3 3、文字层。、文字层。43在在Imageready中制作动画中制作动画17.3 网页banner制作添加过渡帧添加过渡帧1.1.点击第点击第5 5帧下方的延迟时间，将其修改为帧下方的延迟时间，将其修改为2 2秒。秒。2.2.选择第选择第5 5帧，点击帧，点击“过渡过渡”按钮，添加按钮，添加2 2个过渡帧。个过渡帧。44在在Imageready中制作动画中制作动画17.3 网页banner制作导出动画和网页导出动画和网页1.1.点击点击“文件文件”-“-“将优化结果存储为将优化结果存储为”。2.2.保存类型可以选择：保存类型可以选择：HTMLHTML和图像、仅限图像、仅限和图像、仅限图像、仅限HTMLHTML。45
