网页美工实训指导书.docx
- 文档编号:23881760
- 上传时间:2023-05-21
- 格式:DOCX
- 页数:14
- 大小:92.03KB
网页美工实训指导书.docx
《网页美工实训指导书.docx》由会员分享,可在线阅读,更多相关《网页美工实训指导书.docx(14页珍藏版)》请在冰豆网上搜索。
网页美工实训指导书
《电子商务网页美工实训》
实
训
指
导
书
编写者:
袁鑫
二〇一〇年五月
《网页美工与图像处理》实训指导书
《网页美工与图像处理》实训指导书
一、总体说明
1、实训目的与要求
随着互联网的快速发展,网页美工设计与图像处理技术进入了一个崭新的阶段。
网页作为网络信息的载体,不再是简单的文字与图片的展示,而是更加强调美观性、交互性,这也是当前网页美工设计与图像处理的发展趋势。
为了加强学生的网页美工设计水平,提高学生的图像处理实际动手能力,同时为了推进我国信息化人才建设的培养,适用将来的社会的需要,提高学生的竞争力,本学期开设了为期一周的《网页美工与图像处理》实训。
该门课程的学习,实践性很强,学生必须通过大量的上机练习,才能够灵活地用它来解决实际的问题,通过集中一段时间利用PHOTOSHOP制作网页导航按钮、网页广告条、网页站点标志、网页图像处理、网站首页制作、网站内容页制作进行综合实训,熟练掌握该软件的各种功能,提高解决实际问题的能力。
2、实训内容
《网页美工与图像处理》
3、参考课时
28课时
4、实训材料准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
5、考核办法
出勤情况:
10分
纪律表现:
10分
实验报告:
10分
实训一网页导航按钮制作篇10
实训二网页广告条制作篇10
实训三网页站点标志制作篇10
实训四网页图像处理篇10
实训五网页首页制作入篇15
实训六网页内容页制作入篇15
6、实训方法与步骤:
实训方法:
学生四人一组,选出一个组长和第二责任人。
在组长的调动下,充分发挥主观能动性和团结精神,根据实训步骤完成网页美工设计。
7、实训范例
实训一网页导航按钮制作篇
1、实训目的与要求
掌握网页按钮以及导航条的制作方法,掌握通道、滤镜的使用方法;掌握对象排列对齐的方法;
2、实训内容
制作几款网页按钮以及导航条
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)制作透明按钮
新建文件,400*400
新建图层1,绘制椭圆选取(200*200),并使用蓝色到深蓝色线性渐变填充
在图层1上添加投影效果
新建图层2,载入图层1的选区,缩放6像素,从上至下,填充白色至透明色的线性渐变。
使用钢笔工具绘制高亮区,选中图层2,载入钢笔工具绘制的选区,删除(删除多余的白色区域),设置透明度78%
新建图层3,在图层中绘制椭圆选区,从下至上,填充白色至透明色的线性渐变。
选择选取工具,羽化4,画椭圆,删除图层3多余的部分,设置透明度78%
绘制图形,如杏叶等
保存文件。
2)制作导航条
将按钮以一定的方式排列组合到一起就形成了导航条。
导航条的制作方法其实就是多个按钮的制作方法,这里就不再重复介绍。
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
如何设置网页导航条?
实训二网页广告条制作篇
1、实训目的与要求
掌握广告条的制作原理,掌握利用ImageReady和Photoshop制作动态、静态广告条的方法;掌握动画制作的方法;
2、实训内容
静态广告条
动态广告条
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)新建文件,确定广告条的尺寸(468*60),如果是通栏尺寸可设置为778*120。
2)通过钢笔工具、文字工具、变形工具等,制作标志中的图形。
3)如果图形会发生变化,则新建图层,将运动路径记录在各个图层中。
3)输入文字,将文字转换为路径,利用选择工具,修改文字的形状,并将修改后的文字放置在不同的图层
4)调整对象的位置。
达到最佳效果
5)制作动画面板,制作动画
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
如何设计网页广告条?
实训三网页站点标志制作篇
1、实训目的与要求
掌握站点标志的制作原理,掌握几款站点标志的制作方法;掌握文字、变形、选取等工具的使用方法
2、实训内容
掌握几款LOGO制作的方法
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)新建文件,确定标志的尺寸(120*90)
2)通过钢笔工具、文字工具、变形工具等,制作标志中的图形。
3)输入文字,将文字转换为路径,利用选择工具,修改锚点,形成特殊文字
4)输入站点URL地址
5)调整对象的位置。
达到最佳效果。
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
制作站点标志的过程?
如果设计网站的站点标志?
实训四网页图像处理篇
1、实训目的与要求
掌握几种背景处理效果;掌握图像抽丝效果的制作;掌握图像颜色调整,掌握几种滤镜效果和图层效果的使用等与图像处理相关的操作。
2、实训内容
1)网页背景图像无缝连接的制作
2)图像抽丝效果
3)浮点效果
4)图像阴影效果
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)网页背景图像无缝连接的制作
2)图像抽丝效果
3)浮点效果
4)图像阴影效果
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
实训五网页首页制作篇
1、实训目的与要求
首页设计历来是网站建设的重要一环,不仅因为“第一印象”至关重要,而且直接关系到网站各频道以下各级栏目首页的风格和框架布局的协调统一等连锁性问题,是整个网站建设的“龙头工程”。
所以说首页编排的优劣,将直接影响到它是否吸引更多网民进入站内浏览。
本例中将学习利用Photoshop和ImageReady制作页面后,使用网页编辑软件Dreamweaver生成最终的Html页面。
2、实训内容
制作一个完整的页面
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)版面整体设计
2)页面尺寸的确定
3)辅助线的创建
4)背景的设置
5)标题的制作
6)主题图像的制作
7)人物的处理
8)导航菜单的制作
9)制作切片
10)优化效果
11)制作翻转效果
12)存储网页文件
13)在Dreamweaver中编辑网页
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
Photoshop制作网页的步骤?
实训六网页内容页制作篇
1、实训目的与要求
掌握使用photoshop制作WEB页面的方法,掌握图像蒙版效果的制作,掌握文字特殊效果的制作,掌握直线的灵活运用,掌握栏式页面的制作方法。
2、实训内容
制作一个完整的网页,对网页进行切片,并导出为HTML。
3、实训准备
硬件:
一个性能较高的机房。
软件:
Windowsxp操作系统;Photoshopcs2完全安装;Flashmx2004;Acdsee。
资料:
《网页美工与图像处理精讲》、《网页美工与图像处理》实验指导书。
4、实验步骤
1)新建文件:
1000*1160,背景为白色
2)背景处理:
此页面背景为全白,不用再进行特殊处理
3)添加参考线:
打开标尺,布局网页,栏间距30像素,第1栏130像素,第2栏430像素,第2栏180像素,广告条高度为70像素,导航条高度为30像素,第一块内容高度为500像素,第二块内容高度为440像素。
4)添加广告条(模幅图像的处理):
a)导入蓝天图像
b)加入石狮图像
c)输入文字,并用黑/白渐变色描边
5)添加导航条:
橙色(eb832e)矩形框,白色文字
6)制作栏目内容区
a)第一行第一列、第一行第二列、第二行第一列添加灰色矩形区域
b)在第一行第一列中添加直线,并等距离分布复制的线条
c)用同样的方法制作其他栏目内容
7)添加页面中所需要的文字
8)切片
9)优化并导出为HTML页面
5、实训方法
机房上机完成所有操作题。
6、考核办法
考核分为四个级别:
即优秀、良好、合格、不合格
优秀:
能在规定时间内完成所有的操作题90%以上
良好:
能在规定时间内完成所有操作题的80%-90%
合格:
能在规定时间内完成所有操作题的60%-80%
不合格:
能在规定时间内完不成所有操作题的60%
7、思考与练习
利用Photoshop制作网页时,如何做好页面的布局?
附录1:
首页制作步骤
版面整体设计
1)新建文件:
800*550,背景白色,RGB色彩模式,文件名为index.psd
2)新建文件:
5*3,前景色为R:
72,G:
72,B:
72,拖出p像素的选择范围,将前景色设为R:
83,G:
83,B:
83,然后填充。
3)定义图案:
选择全部,定义为图案。
并将文件保存为GIF格式,文件名为bg.gif。
在后面制作网页时需要将该文件作为底图进行平铺。
4)填充图案:
打开index.psd,用刚定义的图案填充。
5)选择选框工具,固定尺寸:
776*470,用鼠标在图像窗口中拖动,将选区移到居中的位置,用白色填充选区。
6)建立图层组。
为图层组添加蒙版。
这样作将所有图层放在图层组中,对图层组添加蒙版,限制图层组内图层的显示范围。
7)标题的制作
8)打开素材logo_bigd.jpg,移动图片到合适位置。
并对素材进行比例缩放至合适大小。
9)打开素材栏目按钮.psd,位置至合适位置
10)输入文本
11)绘制参考线。
CTRL+R显示标尽,从标尺处向下搬运两个辅助线,新建图层,前景色R:
200,G:
200,B:
200,按住Shift键在图像窗口上绘制直线。
12)主题图像的制作
13)打开素材风景.tif,移动至适当位置,并用变形工具,对其进行缩放。
14)创建选区。
用矩形选框工具,在风景图上方建立一个矩形选区
15)变形选区。
拖拽上面的控制点至合适位置。
确定操作后,取消选区。
16)建立选区。
使用矩形工具,选区风景图中央位置。
17)设置蒙版属性。
建立快速蒙版。
18)说明:
快速蒙版是建立选区的一种直观、快捷的方法,蒙版编辑的优点是几乎可以使用任何photoshop工具或滤镜进行修改。
而且如果处理正确,它可以制作一些特别精确,而且富有创意的艺术选区效果,并且这些选区是用其他任何一种方法都无法创意的。
19)选择毛笔工具,在红色边缘进行喷绘。
20)人物的处理
21)打开素材文件飞鸽.tif。
使用钢笔工具,进行抠图。
22)翻转图像。
23)建立选区,按住CTRL点击风景图层
24)添加图层蒙版。
选择飞鸽图层,添加蒙版效果
25)添加图层特效。
外发光。
26)导航菜单的制作
27)添加文字
28)对方文字。
使用鼠标选中全部文字,在段落面板中选择左右强迫对齐。
29)添加文字图层特效。
添加投影、描边(大小为1,颜色为0,65,126)
30)选择毛笔工具,在工具选项栏上选择一个蜡笔画效果的笔刷样式,大小为15,将鼠标移至文字周围开始喷绘。
31)修饰边框。
32)制作分割线
33)为边框图层添加投影。
34)添加自定义形状,放置在文字的后面。
35)颜色填充,选择工具箱中的椭圆选框工具,按住SHIFT键在图像窗口上绘制一正圆,用径向渐变填充正圆。
36)复制图标
37)填充颜色。
新建一图层,命名为光晕,用黑色填充,并将该层放在飞鸽图层的下方
38)使用滤镜效果,镜头光晕。
并将光晕图层设置为“screen”
39)制作切片
40)裁切图像。
去掉灰色背景
41)注意:
在photoshop中绘制元素,如背景底纹和文字等,在存储为html时可以不出现,这些内容可以在网页编辑软件中完成。
在photoshop中制作时可以看到整个效果,便于调整。
42)制作切片:
将标志、导航条、功能按钮单独切出。
其余部分按表格样式切出
43)优化图像
44)制作翻转效果
45)打开WEB内容面板,为导航条添加翻转效果(over:
文字颜色变为橙色)
46)添加链接
47)存储网页文件:
存储优化结果
48)在Dreamweaver中编辑网页
49)添加背景
50)添加会员
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 美工 指导书
![提示](https://static.bdocx.com/images/bang_tan.gif)