Photoshop CS教案 第十章PhotoshopImageready.docx
- 文档编号:23069796
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:35
- 大小:1.61MB
Photoshop CS教案 第十章PhotoshopImageready.docx
《Photoshop CS教案 第十章PhotoshopImageready.docx》由会员分享,可在线阅读,更多相关《Photoshop CS教案 第十章PhotoshopImageready.docx(35页珍藏版)》请在冰豆网上搜索。
PhotoshopCS教案第十章PhotoshopImageready
第10章 Photoshop/Imageready
网页和动态图形
学习要点:
当用AdobePhotoshop和AdobeImageReady设计网页时,请记住每个软件所使用的工具和特性。
在整个网页制作的过程中,它们两个是各司其职的。
Photoshop提供的工具用来创建和制作在web上使用的静态图像,可以将图像分为切片、增加链接和HTML文字,优化切片并将图像存储为一个Web页面。
ImageReady提供了许多和Photoshop相同的图像编辑工具,另外,还包括了一些工具和调板,用来进行高级的web处理和创建动态的Web图像,如动画和翻转。
利用AdobePhotoshop和AdobeImageReady将图像分割成独立的切片,用不同的网页图像格式优化每个切片,每个切片都可以被制作成动画,链接到URL地址或用于制作翻转按钮。
10.1常用概念
在PhotoshopCS和ImageReadyCS中有很多与Web相关的特性是重复的,在Photoshop“存储为Web°所用格式”对话框中看到的很多功能也能在ImageReady调板中找到,这就意味着在生成Web图片时,可以应用多种处理方法。
下面简单介绍一些常用概念。
10.1.1创建和编辑图像
Photoshop和ImageReady相比,Photoshop有更多更好的创作工具,比如,ImageReady中缺少磁性套索工具、背景色橡皮擦工具、历史记录画笔工具、修补工具和涂抹工具等,与Photoshop相比较,它的选择和编辑图像的功能也是非常有限的,因此,要生成用于Web的静态图片,最好先在Photoshop中完成,并且执行“文件>存储为Web所用格式”命令进行优化存储。
10.1.2关于切片的概念
下载几个小图像文件要比下载一个大图像文件快,为了缩短下载的时间,可将一个大图像文件切割成几个小文件,这些小图像文件在下载时可以无缝拼接,并且可以对每一个小图像文件进行单独优化,这些切割成的小图像就是所谓的“切片”。
通过Photoshop或ImageReady中的切片工具或切片选择工具,来定义切片。
也可以利用Photoshop的图层功能直接创建图层切片。
10.1.3图像映射的概念
简单来说,给图像指定一个URL链接地址,当单击该图像的时候,可以链接到给定的一个Web页面,该图像就成为“图像映射区域”,必须在ImageReady中才能设定图像映射。
执行ImageReady中的“图层>新建基手图层的图像映射区域”命令,或者使用工具箱中的各种图像映射工具来制作图像映射区域,还可以使用图像映射调板来指定每个图像映射区域的URL链接.
10.1.4动画的概念
一个动画是一系列的图像或帧,通过一个时间段进行显示,每个动画帧都和前一帧有不同之处,在进行快速播放时就产生了动画的效果。
可以利用Photoshop来创建单独的帧,ImageReady中的图层调板是创建动画的重要途径,将动画的每个元素放在不同的图层上,使用图层调板上的命令和选项来改变动画帧中元素的位置和外观,给每帧分配一个延迟时间,从而产生动画的效果,利用“过渡”命令还可以在两个指定的动画帧之间自动创建新的过渡状态的动画帧。
10.1.5翻转的概念
在ImageReady中,可以从切片或图像映射区域创建翻转或次级翻转。
翻转是一种具有多个显示状态的按钮,当在翻转按钮上移动鼠标或单击时,会引发不同的显示或动作,当在翻转按钮上单击时,次级翻转将影响图像其他区域的显示或动作。
对翻转不同的状态可创建不同的效果,翻转的状令包括:
“指向(over)”,“按下(Down)”,“点按(Click)”,“移动(out)”和“松开(Up)”。
如果了解JavaScript,还可以创建客户自定义的状态。
当然,也可以保留图像的当前状态作为以后使用时的一个翻转状态(如果翻转状态被设定成“无”,则在Web页面中将不会被显示)。
10.2切片的使用
可以利用切片功能将源图像分成许多的功能区域。
在存储图像和HTML文件时,每个切片都会作为独立的文件存储,并具有各自独立的设置和颜色调板,而且会保留正确的链接、翻转效果以及动画效果。
处理包含不同数据类型的图像时,切片也很有用,例如,可以用GIF格式优化图像的某一区域使该区域支持动画,而图像的其余部分以JPEG格式迸行优化存储,这时可以利用切片功能将图像分割成不同的两个区域,分别进行优化处理。
10.2.1创建切片的4种途径
在Photoshop和ImageReady中都可以使用切片工具定义切片或将图层转换为切片,也可以通过参考线来创建切片,此外,ImageReady还可以将选区转化为定义精确的切片。
1.使用切片工具创建切片
在图像中使用切片工具拖拉矩形区域定义的切片被称为“用户切片”。
一旦在一幅图像中定义了一个“用户切片”,Photoshop或ImageReady就会把“用户切片”周围没有定义的区域生成为“自动切片”。
选择“视图>显示>切片”命令,一个数字(01)和切片图标出现在图像的左上角,用于显示当前整个图像是一个切片。
选择工具栏中的切片工具,会出现其相应的工具选项栏,在“样式”后面的弹出菜单中可选择“正常”、“固定长宽比”和“固定大小”3个选项。
当选择“正常”选项时,可通过鼠标任意拖拉矩形框形成切片。
当选择“固定长宽比”选项时,数字框中可以输入整数或小数,例如,若要创建一个宽度是高度两倍的切片,请宽度栏中输入2,在高度栏中输入1。
当选择“固定大小”选项时,可以在选项栏中输入整数像素值,来指定切片的高度和宽度。
在要创建切片的区域上拖曳鼠标,松开鼠标后的矩形区域就成为切片。
按住Shift键并拖曳鼠标可将该切片限制为正方形,按住A1t键拖曳鼠标可从中心开始绘制矩形区域。
使用切片工具,在图像中间的任意区域拖曳出矩形边框,松开鼠标,会生成一个编号为O3的切片(在切片左上角显示数字)。
在O3号切片的左、右和下方会自动形成编号为01,02,04和05的切片,O3切片为“用户切片”,其他为“自动切片”。
每创建一个新的用户切片,自动切片就会重新标注数字。
如果要改变切片的大小,可在工具箱中选择“切片选择工具”,选择切片,然后拖曳切片边框的把手。
在使用切片工具的同时注意以下事项:
①执行“预置”子菜单中的“参考线、网格和切片”命令,在弹出的对话框中的“切片”栏中,在“线条颜色”后面的弹出菜单中定义表示切片的边框颜色,如果要显示切片上的编号,请选择“显示切片编号”选项,此选项默认状态是选中的。
②执行“视图>对齐到>参考线”命令,可在使用切片工具时自动捕捉参考线。
执行“视图>对齐到>切片”命令,可在使用切片工具时自动捕捉其他切片的边框,以保证不会绘制出有重叠区域的切片
③一定要确保所创建的切片之间没有间隙,因为任何间隙都会生成自动切片,可使用缩放工具将图像放大,观察有无不必要的自动切片生成,观察完毕后,双击缩放工具回到100%图像显示状态。
关于切片类型的说明有以下几点:
①使用切片工具创建而成的切片被称为“用户切片”;从一个图层创建而成的切片被称为“图层切片”。
当创建一个新的“用户切片”或“图层切片”时,图像的其他区域会产生“自动切片”。
即“自动切片”填补了图像中未被“用户切片”或“图层切片”定义的空间。
在每次添加或编辑“用户切片”或“图层切片”时都会重新生成“自动切片”,“用户切片”、“图层切片”与“自动切片”不同,“用户切片”和“图层切片”是通过实线边框定义的,而“自动切片’是通过虚线边框定义的。
②“子切片”是“自动切片”的一个类型,它是在创建重叠切片时生成的,当存储被优化的文件时,“子切片”显示出图像将被如何分割,尽管“子切片”被标明了数字并标出了切片符号,但是不能在脱离切片存在的情况下独立选择或编辑它们,“子切片”在每次排列切片的堆放次序时都会重新产生。
2.从图层创建切片
在ImageReady和Photoshop中,定义切片的另一种方法就是使用图层创建切片,一个基于图层的切片包含图层中所有的像素。
当编辑图层、移动或执行图层效果时,“图层切片”都会自动调整,来包含新的像素。
将“图层切片”和其图层之间的链接断开,就可以把它转化为一个“用户切片”
在图层调板中,选中任何一个图层,执行“图层>基于新建图层的切片”命令就可以创建一个图层切片。
注意图层切片和用户切片在左上角数字右侧的表示符号不同,Photoshop和ImageReady中的表示符号也不同,但很容易区分的。
可以在保持当前图层的选中状态下,选择任何一个图层样式执行命令,如执行“图层>图层样式>外发光”命令,“图层切片”的边框扩大,可将执行效果后新的像素包含进来。
3.从参考线创建切片
在Photoshop中,从标尺处向图像中拖曳参考线(执行“视图>显示>参考线”命令使参考线显示出来),选择切片工具,并单击切片工具选项栏中的“基于参考线的切片”按钮,就可以根据拖曳出的参考线创建切片。
在ImageReady中,同样从标尺处向图像中拖曳参考线,然后执行“切片>从参考线创建切片”菜单命令,参考线之间的所有区域均成为“用户切片”。
从参考线创建切片时,由于整个图像被分割,原来存在的任何切片都将被删除。
4.从选区中创建切片
在ImageReady中,对细小或具有不规则形状的图形元素创建切片,最简单的方法是首先用魔棒工具创建选区,然后以选区为基础创建切片。
选择图像的一部分,执行“选择>从选区中创建切片”命令,生成基于选框的用户切片。
如果选区已羽化,则切片将覆盖整个选区(包括羽化的边缘)。
如果选区不是矩形,则切片将包括足以覆盖整个选区的矩形区域。
10.2.2设置切片输出选项
在ImageReady中,执行“文件>输出设置>切片”命令,如图10-1所示,弹出“输出设置”对话框,关于该对话框中的各种设置请参考软件自带的帮助文件。
图10-1
10.3创建翻转按钮
在ImageReady中,可以从切片或图像映射(ImageMap)区域创建翻转(Ro11over)或次级翻转(SecondaryRollover)按钮。
翻转是一种具有多个显示状态的按钮,当在翻转按钮上移动鼠标或单击时,会引发不同的显示或动作。
当在翻转按钮上单击时,次级翻转将影响图像其他区域的显示或动作。
图像映射可将图像的一个区域链接到URL。
可以在一个图像中建立多个链接区域(这些链接区域被称为图像映射区域)链接到文本文件、其他图像、视频或多媒体文件以及其他网站的页面等,也可以在图像映射区域创建翻转效果。
使用图像映射和使用切片创建链接的主要不同之处:
是使用图像映射保持输出图像是一个完整的文件,使用切片会导致图像输出时成为一个分离的文件。
另外一个不同的是图像映射可让链接到图像的一个圆形、多边形或矩形区域,而切片只能让链接到矩形的区域。
如果只需要链接到矩形区域,那么使用切片比使用图像映射更好。
可以按这个顺序创建不同的Rollover状态类型:
指向(over)、按下(Down)、点按(Click)、移出(out)、松开(Up)、自定(Custom)和无(None)。
指向(over)∶表示当Web浏览者使用鼠标经过切片或图像映射区域时的状态,此时并没有按下鼠键(“指向”是自动被选中的第二个翻转状态)。
按下(Down)∶表示当web浏览者在切片或图像映射区域上按下鼠标键的状态(只要浏览者一直在这个区域上按着鼠标,这一状态就会一直保留)。
点按(C1ick)∶表示当Web浏览者在切片或图像映射区域单击时的状态(浏览者单击后,这一状态会一直保留到浏览者激活另一个翻转状态为止)。
移出(out)∶表示当Web浏览者将鼠标从切片或图像映射区域上移开时的状态(正常状态通常扮演这一角色)。
松开(Up)∶表示当Web浏览者在经过切片或图像映射区域时松开鼠标时的状态(“指向”状态通常扮演这一角色)。
自定(Custom)∶表示一个新的翻转状态(必须创建JavaScript编码并将其添加到Web页面的HTML文件中,以保证自定义翻转选项起作用。
参照有关JavaScript手册来获取更多的信息)。
无(None)∶表示保存图像当前的状态以备以后作为一个翻转状态使用(被设计为“无”的状态将不会在Web页中显示)。
备注:
不同的Web浏览器或不同版本的浏览器可能在处理单击和双击时会不同,例如,一些浏览器在一个单击动作后将切片保留在“点按(Chick)”状态,并在一个双击动作后将切片保留在“松开(Up)”状态,其他一些浏览器无论单击还是双击,只将“松开(Up)”状态作为一个过渡到“点按(Click)的状态。
为了保证Web页面显示功能正常,一定要在不同的浏览器中预览该翻转效果。
下面举例说明翻转按钮的制作和应用。
1.设置按钮的外形
在Photoshop中创建一个新的图层文件,尺寸大小为475像素×85像素,使用形状图层工具来建立按钮的形状,并复制两个副本,将这3个形状图层进行对齐和分布,并分别命名为:
Normal、Over、DoWn,图层中显示状态如图10-2所示,目前它们的外观是一样的,如图10-3所示。
图10-2图10-3
2.“OVer”样式的制作
选中0vcr图层,为按钮添加样式。
单击图层调板上的添加图层样式按钮,依次添加投影、内阴影、内发光、斜面和浮雕、光泽、颜色叠加以及图案叠加等样式,各个样式的参数设定参见图10-4至图10-9,最后的样式效果如图10-10所示,这就是后面要用到的“Over”样式。
图10-4图10-5
图10-6图10-7
图10-8图10-9
图10-10
3.“Normal”样式的制作
将上一步骤得到的图层样式添加到样式调板中。
可以通过直接单击样式调板的空白处或者单击样式调板下方“创建新样式”按钮,得到新的样式,直接将新存储的样式应用到Normal图层上,并将图层的不透明度调整为36%,如图10-11所示,效果如图10-12所示。
这就是后面要用到的“Normal”样式。
图10-11图10-12
4.“Down”样式的制作
将新存储的样式应用到Down图层上,并通过改变“颜色叠加”样式中的颜色(见图10-13),可得到新的“Down”样式(见图10-14)。
图10-13图10-14
5.在ImageReady中保存样式
为了将Photoshop中制作的样式变成预设的翻转样式,必须将文件调入到ImageReady中,单击工具栏最底部的“在ImageReady中编辑”按钮,跳转到ImageReady中,依次选中每一个图层,将图10-15所示的3个图层样式添加到“样式”调板中,如图10-16所示,并分别命名为“Normal”,“Over”和“Down”样式。
图10-15图10-16
6.创建翻转按钮
保留Normal图层,将Over图层和Down图层删除,选中Normal图层,选择“图层>新建基于图层的切片”命令(见图10-17),在“Web内容”调板中,单击调板下方的“创建翻转状态”按钮,得到一个Over状态按钮,如图10-18所示。
将前面制作的0ver样式应用到该处的0ver状态按钮上。
再次选中Normal图层,执行“图层>新建基于图层的切片”命令,在“Web内容”调板中,单击调板下方的“创建翻转状态”按钮,将前面制作的Down样式应用到该处的Down状态按钮上。
如图10-19所示。
图10-17
图10-18图10-19
7.储存翻转按钮
将图层切片的翻转效果储存在“样式”调板中,成为一个翻转样式,在存储时会弹出一个“样式选项”对话框,如图10-20所示,可用来输入名称设定相关的选项。
注意:
“样式”调板中“图层样式”和“翻转样式”的表示区别在于:
“翻转样式”有一个黑色的小三角,而“图层样式”没有,如图10-21所示。
图10-20图10-21
8.应用翻转按钮
在ImageReady中新建一文件,制作3个不同的按钮,其中每个按钮都在单独的图层上,如图10-22所示。
并在样式调板中选择前面制作好的翻转样式。
可使用工具栏内的“预览文档”按钮进行效果预览。
图10-22
9.保存按钮
执行“文件>将优化结果储存为”命令,在“将优化结果储存为”对话框中,保存类型选择“HTML和图像”,如图10-23所示,并使用InternetExplorer来浏览制作完成的HTML文件,如图10-24所示。
图10-23
图10-24
10.4动画
动画是指在一段时间内显示的一系列图像或帧。
每一帧较前一帧有轻微的变化,当连续、快速地显示这些帧时会产生运动的错觉。
一个图像可以具有与不同翻转状态关联的多个动画。
例如,将一个动画添加到“Normal”翻转状态,可在Web页初次由Web浏览器载入时播放。
将动画添加到另一翻转状态,可使动画仅在Web用户招待指定动作(如将鼠标放置到翻转上或点按翻转)时播放。
10.4.1过渡和调整
“过渡”这一术语从inbetweening变化而来,后者是用于描述这一过程的传统动画术语。
“过渡”命令大大减少了创建动画效果(如渐现、渐隐或在帧之间移动图素)所需的时间。
创建过渡帧之后,可以分别对它们进行编辑。
下面举例说明。
1、在Photoshop中打开一幅图像。
然后使用文字工具在图像的右上角添加文字“MerryChristmas!
”(见图10-25),并将文字图层再复制两个,3个图层分别命名为MerryChristmas!
1、MerryChristmas!
2、MerryChristmas!
3(见图10-26)。
图10-25图10-26
2、将制作完成的图像跳转到ImageReady中,打开动画调板,将第一帧进行复制得到两帧相同的动画,如图10-27所示。
选择第2帧,在图层调板中,将MerryChristmas!
1图层用移动工具向左移动至隐藏、MerryChristmas!
2图层用移动工具向上移动至隐藏、MerryChristmas!
3图层用移动工具向右移动至隐藏,如图10-28、图10-29所示。
3、将动画调板中“1”、“2”两帧位置进行互相调换(见图10-30),在图层调板中,将3个文字图层的填充不透明度都改为0%,如图10-31所示。
图10-27图10-28
图10-29图10-30
4、在动画调板中,按住Shift键将“1”和“2”两帧一并选中,单击动画调板中的过渡按钮,在弹出的对话框中进行过渡的设置,如图10-32所示,选择要添加过渡的帧数,以及所要过渡的图层是所有图层还是当前图层,以及位置、不透明度、效果的过渡等。
单击“好”按钮,这样就完成了文字渐渐从3个方向向一个位置的集中,文字从透明变实心的动画过程,也就是图10-33中所示从“A”到“B”的过渡。
图10-31图10-32
图10-33
10.4.2过渡样式
1、在Photoshop里新建RGB文件,大小为200像素×200像素,制作成如图10-34所示效果。
特别注意:
“投影”样式效果里,投影的角度为120°,如图10-35所示。
图10-34图10-35
(2)将文件调人Imageready中,在动画调板中,新建一帧动画,如图10-36所示。
(3)将图层样式中的“投影”样式选项打开,把投影的角度改为-600,如图10-37所示。
(4)在动画调板中,按住Shift键将两帧一并选中,单击过渡按钮,创建8帧的过渡,得到一个投影位置180°旋转的动画效果,如图10-38所示.
(5)在动画调板中,在图10-39所示的“B”帧后,再新建一个“C”帧,将“C”帧的影角度改回为120°。
图10-36
图10-37
图10-38
(6)按住Shift键将“B”和“C”帧一并选中,单击过渡按钮,再创建工个8帧的过渡,又得到一个投影位置180°旋转的动画效果,如图10-39所示。
图10-39
(7)由于“C”和“A”帧是一样的,将“C”帧删除,得到一个投影位置360°旋转的动画效果。
10.4.3位置过渡
1、在Photoshop中,新建一个尺寸为140像素×130像素的RGB文件,输入文字,如图10-40所示。
将图层栅格化,命名为模糊,然后进行复制,复制的图层命名为:
清晰,隐藏该图层(见图10-41),选中模糊图层,然后选择“滤镜>模糊>高斯模糊”命令,并设置适当的模糊半径,如图10-42所示。
图10-40图10-41图10-42
2、新建一图层,制作一个类似广大镜的图形,并将该图层命名为:
清晰镜。
在图层上依次添加投影、斜面和浮雕、光泽以及颜色叠加效果。
再新建一图层,用2像素的铅笔工具,在清晰镜的中心位置画出一个“十”字图案,并将该图层命名为:
靶心(见图10-43、10-44)。
图10-43图10-44
3、再次新建一图层,按住Shift键的同时使用椭圆工具,画出一正圆选区,大小比清晰镜内轮廓大一些,填充为黑色,将图层命名为:
蒙板。
将“蒙板”图层放置在“模糊”图层和“清晰”图层之间,选择“清晰”图层,选择“图层>创建剪贴蒙板”命令,得到背景模糊,只有在“清晰镜”内部才是清晰的效果(见10-45)。
并将“清晰镜”图层、“靶心”图层和“蒙板”图层进行图层的链接(见图10-46)。
图10-45图10-46
4、将文件调入ImageReady,将3个已经链接在一起的图层移动到图像的右下角位置,作为第一帧的起始位置“A”,单击“复制当前帧”按钮,得到新的动画关键帧“B”,移动3个链接在一起的图层,使用过渡按钮对“A”和“B”进行过渡,注意过渡时选择过渡所有的图层,建立3帧的过渡,如图10-47所示。
5、复制关键帧“B”,得到关键帧“C”,移动3个链接在一起的图层,使用过渡按钮对“B”和“C”进行过渡,注意过渡时选择过渡所有的图层,建立两帧的过渡,如图10-48所示。
图10-47
图10-48
6、重复上面两个步骤的操作,将“清晰镜”图层在视力表上任意移动,并添加关键帧,然后在关键帧之间来增加过渡的帧,在这一步中,注意到的是过渡帧的数量应由位移的长度来决定。
通过添加关键帧和过渡关键帧,可以得到一系列的动画效果,动画的效果为清晰镜在画面上不停地游动,所经过的位置,都变得清晰起来,如图10-49所示。
图10-49
7、为了让动画动起来更有趣味性,可以设定每一帧动画的时间,使得动画看起来有张有弛,更具人性化。
单击动画调板中关键帧下方的小三角,在弹出设定时间的小菜单中,选择所需要的时间,或者可以自定义时间。
如果两个或者两个以上的帧的动画时间相同的话,按住Shift键选择两个或多个连续帧,按住Ctrl键选择两个或多个不连续帧,单击其中的任意帧下方的小三角,弹出设定时间的小菜单,选择所需要的时间,如图10-50所示。
8、单击“循环”选项按钮,如图10-51所示,选择不同的循环选项“一次”、“一直有效”或“其他”,如果选择“其他”,则在“设置循环计数”对话框中输入一个值,并点点按“好”按钮。
图10-50图10-51
10.4.4过渡变形文字
1、在Photoshop中打开一张素材图片,如图10-52所示,新建一图层,将新建的图层填充成黑色,并在黑色图层中添加图层蒙版,如图10-53所示,由上至下在蒙版上绘制黑色到白色的渐变,得到如图10-54所示效果。
图10-52图1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Photoshop CS教案 第十章PhotoshopImageready CS 教案 第十 PhotoshopImageready
![提示](https://static.bdocx.com/images/bang_tan.gif)