《《电脑美术》第17章网页设计与ImageReady的应用》由会员分享，可在线阅读，更多相关《《电脑美术》第17章网页设计与ImageReady的应用（45页珍藏版）》请在金锄头文库上搜索。
1、1,2,17.1利用Photoshop设计网页17.2ImageReady快速入门17.3网页banner动画制作,第17章 网页设计与ImageReady的应用,3,网页设计已经逐渐成为一个热门的话题，而Photoshop又是设计页面的重要工具。通过前面的学习，相信大家利用Photoshop来制作网页的页面已经不是什么问题了，本章的主要目标是讲解如何切片和优化网页图片，以及如何制作Web画廊和GIF动画等。,本章目标,第17章 网页设计与ImageReady的应用,4,制作一个介绍图形图像的个人主页。在实例中，主色调选用了蓝色，蓝色能给人一种平静、理智、永恒、博大的感觉。同时，运用白色、蓝色
2、和其它颜色的搭配，使网页显得典雅、温馨。,制作个人主页,17.1 利用Photoshop制作个人主页,5,创建新的图像文件启动Photoshop，执行【文件】【新建】命令，创建一个新的图像文件，如图所示。设置完后，单击【好】按钮。创建参考线 执行【图层】【新建】【图层组】命令，弹出【新图层组】对话框，设置【名称】为“title”,设计标题栏,17.1 利用Photoshop制作个人主页,6,创建一个矩形选区,创建参考线,设计标题栏,17.1 利用Photoshop制作个人主页,新增【图层1】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【
3、高度】为“100像素”，在【图层1】中创建一个选区，如图所示。按Ctrl+R键，打开标尺，用鼠标从横向标尺上拉出一条参考线，如图所示。,7,绘制出路径1,绘制出路径2,设计标题栏,17.1 利用Photoshop制作个人主页,制作背景图案 按Ctrl+R键，隐藏标尺，设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，在【路径】面板中新增【路径1】，用【钢笔工具】绘制出路径，如图所示。 在【路径】面板中新增【路径2】，用【钢笔工具】绘制出路径，如图 。,8,设置渐变色,从上到下的渐变效果,设计标题栏,17.1 利用Photoshop制作个人主页,在【图层】
4、面板中，新增【图层2】。按住Ctrl键，单击【路径】面板中的【路径1】，将路径转化为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，弹出【渐变编辑器】对话框，在渐变色条下，设置左端色标的RGB值为（235，241，246），右端色标的RGB值为（135，185，248），其它参数设置如图所示。设置完后，单击【好】按钮。按住Shift键，用鼠标从选区的顶端拖拉到底端，创建渐变，按Ctrl+D键，取消选区，如图所示。,9,渐变填充效果,设置【减淡工具】的参数,润饰图像后的效果,设计标题栏,17.1 利用Photoshop制作个人主页,新增【图层3】，按住Ctrl键，在【
5、路径】面板中单击【路径2】，将路径转变为选区。选择工具箱中的【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变色条下，保持左端色标的颜色不变，设置右端色标颜色的RGB值为（170，204，248），单击【好】按钮。按住Shift键，用鼠标从选区的上端拖拉到选区的下端，创建渐变效果。在【图层】面板中，将【图层3】调整到【图层2】的下面，按Ctrl+D键，取消选择，效果如图 选择工具箱中的【减淡工具】，在工具【选项】栏中，设置参数如图所示。 用鼠标涂抹过渡不自然的区域，润饰图像，效果如图所示。,10,输入“图像爱好者天堂”,设置渐变色,设计标题栏,17.1 利
6、用Photoshop制作个人主页,制作LOGO文字 选择工具箱中的【横排文字工具】，在【选项】栏中设置文字颜色为黑色，输入文字，如图所示。 执行【图层】【图层样式】【渐变叠加】命令，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左端色标的RGB值为（20，91，210），右端色标的RGB值为（255，255，255），如图所示。,11,设置描边参数,设置图层样式后的效果,设计标题栏,17.1 利用Photoshop制作个人主页,选择【描边】选项，设置【大小】为“2像素”，【颜色】的RGB值为（187，214，247），其它参数设置如图所示。 设置完后，单击【好】，效果如图所示。,1
7、2,单击【横排文字工具】，输入网址，如图所示。 制作图标打开“网页图标.psd”文件，如图所示。将打开的图像复制到“个人主页.psd”文件中，在【图层】面板中自动创建了【图层4】。在图层组【title】中，把【图层4】调整到【图层2】的上方，调整图形位置，效果如图所示。,输入网址,打开“网页图标.psd”,导入的图片效果,设计标题栏,17.1 利用Photoshop制作个人主页,13,在工具箱中选择【横排文字工具】，输入文字，设置文字颜色为白色，如图所示。 制作导航栏 在【图层】面板中新增【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像
8、素”，【高度】为“25像素”，在参考线顶部创建一个选区，如图所示。,输入文字,创建一个选区,设计标题栏,17.1 利用Photoshop制作个人主页,14,执行【视图】【显示】【参考线】命令，去掉【参考线】命令右边的小勾，隐藏参考线。选择工具箱中的【渐变工具】，在【选项】栏上单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在渐变条下方，添加两个渐变色标，分别设置它们的【位置】为“45%”和“80%”，从左到右，分别设置四个色标的RGB值为（123，158，186）、（198，220，233）、（225，241，255）、（123，150，169），如图所示。设置完后，单击【好】按钮。按住
9、Shift键，用鼠标从选区的上端拖到下端，对选区进行渐变填充，按Ctrl+D键，取消选择，效果如图所示。,设置编辑色,对选区进行渐变填充,设计标题栏,17.1 利用Photoshop制作个人主页,15,选择【横排文字工具】，输入栏目名称，如图所示。 执行【图层】【图层样式】【描边】命令，在弹出的【图层样式】对话框中设置【大小】为“1像素”，【颜色】为白色，如图所示。,输入栏目名称,设置描边参数,设计标题栏,17.1 利用Photoshop制作个人主页,16,设置完后，单击【好】按钮。在【图层】面板中选择【图层5】，选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度
10、】为“2像素”，【高度】为“18像素”，设置完成后创建一个选区，如图所示。 执行【图像】【调整】【色阶】命令，在弹出的【色阶】对话框中设置参数如图所示。,创建一个选区,设置色阶参数,设计标题栏,17.1 利用Photoshop制作个人主页,17,设置完后，单击【好】按钮。执行【滤镜】【模糊】【高斯模糊】命令，在弹出的【高斯模糊】对话框中设置【半径】为“1.0像素”，如图所示。 单击【好】，按Ctrl+D键，取消选择，效果如图所示。,设置高斯模糊参数,设置高斯模糊后的效果,设计标题栏,17.1 利用Photoshop制作个人主页,18,用同样的方法，制作出其它分隔条，如图所示。,分隔条效果,设计
11、标题栏,17.1 利用Photoshop制作个人主页,19,创建新图层组 在【图层】面板中，单击图层组【title】左边的小三角箭头，隐藏图层组中的子图层，执行【图层】【新建】【图层组】命令，在【新图层组】对话框中，输入【名称】为“body”，单击【好】按钮。在图层组【body】中，新增【图层6】。选择工具箱中的【矩形选框工具】，在【选项】栏中设置【样式】为【固定大小】，【宽度】为“770像素”，【高度】为“420像素”，创建一个选区，如图所示。,创建一个选区,设计页面,17.1 利用Photoshop制作个人主页,20,执行【视图】【显示】【参考线】命令，显示参考线，用上面学过的方法，在选区
12、的顶部和底部创建两条参考线。在工具箱中设置前景色为白色，按Alt+Delete键，用前景色填充选区。按Ctrl+D键，取消选择，效果如图11.32所示。 制作分隔线 接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标，将它们隐藏起来。在【图层】面板中，选择图层组【body】中的【图层6】，按下【锁定】中的【锁定透明像素】按钮，如图所示。,创建参考线并填充选区,设计页面,17.1 利用Photoshop制作个人主页,21,创建两条垂直的参考线，如图所示。在工具箱中选择【单列选框工具】，在左边的垂直参考线上单击，创建一个单列选区，如图所示。在【图层】面板上新增【
13、图层7】，在工具箱中设置前景色的RGB值为（0，72，101），按Alt+Delete键，用前景色填充选区。用同样的方法，在右侧的参考线上创建单列选区，再填充前景色，删除透明区域中的填充色，效果如图所示。实际操作中，由于参考线的遮挡，看不到单列填充效果，按Ctrl+H键，可将参考线隐藏起来，看完效果后，再按一下Ctrl+H键，显示出参考线。创建一条水平参考线，选择工具箱中的【单行选框工具】，在水平参考线上创建一个水平单列选区，按Alt+Delete键，在选区中填充前景色，如图所示。,创建两条垂直的参考线,在参考线上创建单列选区,填充单列选区后的效果,制作出单行选区并填充,设计页面,17.1 利
14、用Photoshop制作个人主页,22,单击工具箱中的【矩形选框工具】，在【选项】栏中，设置【样式】为“正常”，设置完后，创建一个选区，如图所示，设置背景色为白色，按Ctrl+Delete键，用背景色填充选区。用上述方法，细心地制作出其它分隔线，隐藏参考线后，效果如图所示。 制作图像特效 按Ctrl+H键，隐藏参考线，在【图层】面板中，使图层组【title】和图层【背景】显示出来。选择图层组【body】中的【图层7】，打开图片“网页图片.jpg”，如图所示。,创建选区并填充,创建其它分隔线,打开“网页图片.jpg”,设计页面,17.1 利用Photoshop制作个人主页,23,将打开的图片复制
15、到“个人主页.psd”文件中，如图所示。执行【编辑】【变换】【水平翻转】命令，将图片水平翻转。按Ctrl+T键，调整图片的大小和位置，效果如图所示。,导入图片,调整图片的大小和位置,设计页面,17.1 利用Photoshop制作个人主页,24,按回车键，退出图片变换操作。在图层组【body】中新增【图层9】，然后把【图层9】调整到【图层8】的下面，用【矩形选框工具】创建选区，如图所示。 选择工具箱中的【渐变工具】，在【选项】栏中，单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，设置左边色标颜色的RGB值为（135，185，248），右边色标颜色的RGB值为（255，255，255），如图所示。,创建选区,渐变编辑器对话框,设计页面,17.1 利用Photoshop制作个人主页,25,设置完后，单击【好】按钮。按住Shift键，用鼠标从选区的左端拖拉到右端，对选区进行渐变填充，如图。选择【图层8】，按住Ctrl键，单击【图层8】，执行【图层】【添加图层蒙版】【显示选区】命令。选择【渐变工具】，在【选项】栏中单击【点按可编辑渐变】按钮，打开【渐变编辑器】对话框，在【预置】中选择【黑色、白色】渐变，如图所示。,
