文档介绍：实验九网页设计与ImageReady的应用
一、实验目的:能基本了解如何切片和优化网页图片,以及如何制作Web画廊和GIF动画等。
二、实验准备:
系统配置要求:
操作系统:WINDOWS 98/2000/XP
CPU:Pentium Ⅲ以上的处理器
内存:64M以上
硬盘:建议40G以上
显存:16M以上
输入输出设备:键盘、鼠标、光驱等
安装软件:Adobe
提供必要的素材
三、实验指导
实例1:制作一个介绍图形图像的个人主页,,并存入以自己班级、姓名命名的文件夹当中。
制作步骤:
设计标题栏
启动Photoshop,创建一个新的图像文件。
单击【好】按钮。在【图层】面板中,新增【图层1】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为【固定大小】,【宽度】为“770像素”,【高度】为“100像素”,在【图层1】中创建一个选区,如图所示。
3、按Ctrl+R键,打开标尺,用鼠标从横向标尺上拉出一条参考线,如图所示。
按Ctrl+R键,隐藏标尺,设置前景色为白色,按Alt+Delete键,用前景色填充选区。按Ctrl+D键,取消选择,在【路径】面板中新增【路径1】,用【钢笔工具】绘制出路径,如图所示。
在【路径】面板中新增【路径2】,用【钢笔工具】绘制出路径,如图
新增【图层3】,按住Ctrl键,在【路径】面板中单击【路径2】,将路径转变为选区。选择工具箱中的【渐变工具】,在【选项】栏中单击【点按可编辑渐变】按钮,打开【渐变编辑器】对话框,在渐变色条下,保持左端色标的颜色不变,设置右端色标颜色的RGB值为(170,204,248),单击【好】按钮。
按住Shift键,用鼠标从选区的上端拖拉到选区的下端,创建渐变效果。在【图层】面板中,将【图层3】调整到【图层2】的下面,按Ctrl+D键,取消选择,效果如图
选择工具箱中的【减淡工具】,在工具【选项】栏中,设置参数如图所示。
用鼠标涂抹过渡不自然的区域,润饰图像,效果如图所示。
选择工具箱中的【横排文字工具】,在【选项】栏中设置文字颜色为黑色,输入文字,如图所示。
执行【图层】|【图层样式】|【渐变叠加】命令,单击【点按可编辑渐变】按钮,打开【渐变编辑器】对话框,设置左端色标的RGB值为(20,91,210),右端色标的RGB值为(255,255,255),如图所示。
选择【描边】选项,设置【大小】为“2像素”,【颜色】的RGB值为(187,214,247),其它参数设置如图所示。
设置完后,单击【好】,效果如图所示。
14、单击【横排文字工具】,输入网址,如图所示。
15、打开“”文件,如图所示。
将打开的图像复制到“”文件中,在【图层】面板中自动创建了【图层4】。在图层组【title】中,把【图层4】调整到【图层2】的上方,调整图形位置,效果如图所示。
在工具箱中选择【横排文字工具】,输入文字,设置文字颜色为白色,如图所示。
在【图层】面板中新增【图层5】,选择工具箱中的【矩形选框工具】,在【选项】栏中设置【样式】为【固定大小】,【宽度】为“770像素”,【高度】为“25像素”,在参考线顶部创建一个选区,如图所示。
执行【视图】|【显示】|【参考线】命令,去掉【参考线】命令右边的小勾,隐藏参考线。选择工具箱中的【渐变工具】,在【选项】栏上单击【点按可编辑渐变】按钮,打开【渐变编辑器】对话框,在渐变条下方,添加两个渐变色标,分别设置它们的【位置】为“45%”和“80%”,从左到右,分别设置四个色标的RGB值为(123,158,186)、(198,220,233)、(225,241,255)、(123,150,169),如图所示。
设置完后,单击【好】按钮。
按住Shift键,用鼠标从选区的上端拖到下端,对选区进行渐变填充,按Ctrl+D键,取消选择,效果如图所示。
选择【横排文字工具】,输入栏目名称,如图所示。
执行【图层】|【图层样式】|【描边】命令,在弹出的【图层样式】对话框中设置【大小】为“1像素”,【颜色】为白色,如图所示。
设计页面
创建一个选区
24、执行【视图】|【显示】|【参考线】命令,显示参考线,用上面学过的方法,在选区的顶部和底部创建两条参考线。
25、在工具箱中设置前景色为白色,按Alt+Delete键,用前景色填充选区。按Ctrl+D键,取消选择,。
制作分隔线
26、接下来制作分隔线。在【图层】面板中单击图层组【title】和图层【背景】左面的眼睛图标,将它们隐藏起来。
在【图层】面板中,选择图层组【bo