PS网页GIF动画广告设计,优化全体图像

优化整体图像(03) (载入中...) 3. 使用“颜色表”优化图像

优化整体图像(01) (载入中...)

图片 1

减少图像中的颜色数量可以有效的降低图像的体积,使用“颜色表”可以精确控制GIF图像中的颜色数量。最多可以设定图像的颜色为256种,降低颜色数量的同时文件体积也会下降。除了添加和删除颜色,在“颜色表”还可以进行颜色替换或更改透明度等操作。

在Photoshop中,可以通过“存储为Web所用格式”对话框对图像进行优化设置,在该对话框中提供了多种命令,支持各种文件格式的图片。除了对图像整体进行优化外,还可以分别对不同区域的切片进行优化。另外,在优化的过程中,可通过预览框实时的观察图像优化后的画面效果、画面质量和颜色数量等信息。这样既保证了画面效果,又使文件达到了所需的文件体积要求。下面让我们来熟悉该对话框。

12.3精彩实例

(1)在“存储为Web所用格式”对话框中的“颜色表”选项卡中,可以看到颜色表中有许多一致的颜色,如图17-28所示。

(1)启动Photoshop,执行“文件”→“打开”命令,打开将要优化的图像。

12.3.1网页GIF动画设计

图片 2

(2)在菜单栏执行“文件”→“存储为Web所用格式”命令,图17-1所示为该对话框。

图片 3

图17-28 颜色表中的颜色

图片 4

图片 5

(2)单击颜色表中的色块后,可将该颜色选择,如果按下<Ctrl>键的同时,逐个单击色块,可以选择多个色块。如图17-29所示,选择颜色表中颜色相似的色块。

图17-1 “存储为Web所用格式”对话框

下面我们就来通过一个实例讲解一下GIF动画的制作过程。

提示:当色块被选择后,其周围将出现黑白相间的边框。

图17-2中“存储为Web所用格式”命令对话框,各区域的名称和功能如下:

1.首先我们启动ps,选择【文件】,【新建】如图12-3-1所示。再弹出的【新建】对话框中,我们输入它的名称以及画布的宽和高。如图12-3-2所示。设置完成后,我们点确定。

图片 6

A:该区域为对话框的“工具箱”,使用这些工具可以调整预览框的显示、选择切片,以及吸取画面颜色。

图片 7

图17-29 选择颜色

B:区域中的4个选项卡,分别为“原稿”、“优化”、“双联”、“四联”,选择其中的选项卡可以更改预览区显示原图像的方式。

图12-3-1

(3)选择颜色后,单击颜色表中的图片 8“删除选中的颜色”按钮,可将颜色表中所选择的颜色删除,图17-30所示为将颜色表中的颜色被删除后的状态。

C:单击三角按钮可弹出“预览”弹出式菜单,在该菜单中可以设置颜色显示格式,以及设置调制解调器的速度。

图片 9

注意:切勿将相近的颜色全部删除,应适当的保留不同色相的颜色。

D:该区域中的命令和参数,可以对图像的优化方式进行调整与设置,使用它们可以设置图像的画面质量、图像大小和文件格式等。

图12-3-2

图片 10

E:该区域为“存储为Web所用格式”对话框中的预览框,可以将原稿与优化后图像进行比较。

2.接下来,我们打开一些JPG的图片,如图12-3-3所示。

图17-30 将选择的颜色删除

F:为“缩放”数值框,可对预览框中的图像显示进行缩放。

图片 11

(4)这时可以发现,经过颜色优化后的图像从之前的133K减小到了99.27K,但图像的质量并没有发生失真现象,依旧保留了良好的图像品质。如图17-31所示。

G:该区域为优化图像的注释区域,该区域显示了对图像执行的优化方式和结果。

图12-3-3

图片 12

H:该区域分布了“颜色表”和“图像大小”选项卡,可以修改优化图像的颜色和画面大小。

3.我们将这些图片分为多个图层合在我们刚刚新建的图像上。然后对它们的大小进行调整。调整后效果如图12-3-4所示。

图17-31 颜色优化后的图像和之前的图像进行对比

I:单击“在浏览器中预览”按钮,可自动运行网页浏览器,并在浏览器中显示网页图像效果。

图片 13

(5)在“颜色表”选项卡中还可以在优化图像中添加透明度。首先在颜色表中选择需要透明的颜色,使颜色表下方的按钮处于激活状态,如图17-32所示,单击图片 14“将选中的颜色映射为透明”按钮,将选中颜色映射至透明。

J:单击“在ImageReady中编辑”按钮,以及将图像文件转到ImageReady软件中,通过ImageReady

图12-3-4

提示:色块中如果出现映射颜色的一半位置,表示该颜色将被映射至透明。

4.我们再打开两张图片,也将其合并在一个图像内。这时图层样式如图12-3-5所示。

图片 15

图片 16

图17-32 将选中的颜色映射为透明

图12-3-5

(6)然后在“存储为Web所用格式”对话框中单击“存储”按钮,在保存类型下拉列表中选择“仅限HTML和图像(*.html)”格式,然后单击“保存”按钮,将其存盘。加入透明度的图像效果如图17-33所示。读者也可打开本书附带光盘Chapter-17“龙山景区.html”文件进行查看。

5.准备工作做完,我们就要开始创建动画效果了。创建动画非常的简单,我们选择【窗口】,【动画】,这时就打开了动画面板。如图12-3-6所示。

图片 17

图片 18

图17-33 完成优化的图像

图12-3-6

6.由于我们现在有3个图层,因此我们可以在动画面板中创建3个动画帧。我们单击图片 19按钮。创建后效果如图12-3-7所示。

图片 20

图12-3-7

7.那这时的图像仍然是不会动的,现在我们通过对图层的隐藏为其添加动画效果。我们先来选中第一帧,然后在图层面板中点击图层前面的小眼睛按钮将图层1、2隐藏,如图12-3-8。

图片 21

图12-3-8

8.然后我们选中第2个以及第3个动画帧,对其进行同样的操作。完成后,我们点播放进行一下预览,那这样一个简单的帧切换动画我们就创建好了。我们还可以在图层之间添加一些渐变的效果,我们选中第1帧(要注意的是我们要为第一帧添加渐变,在图层中我们也要选中第1帧所对应的图层)。单击图片 22过渡动画帧按钮,出现了过度的对话框,如图12-3-9所示。

图片 23

图12-3-9

9.这里我们可以对其进行过度的设置,比如:过度的方式、需要过度的帧数等等。我们点确定。这样第1帧的过度动画我们就添加成功了,我们可以选中其中一个帧看下过度的效果,如图12-3-10所示。

图片 24

图12-3-10

10.同样对于其他2帧我们也可以使用同样的操作。设置完后,我们再新建2个图层填充为粉红色和白色,如图12-3-11所示。新建图层的同时我们也要再动画面板中为其添加动画帧。如图12-3-12所示。

图片 25

图12-3-11

图片 26

图12-3-12

11.我们对14和13帧进行复制,如图12-3-13所示。那么这一步的目的是使两个不同颜色的图层进行互相切换,起到一个闪烁的效果。

图片 27

图12-3-13

12.闪烁效果设置完以后,我们将图层2对应的动画帧拖到最后最为动画结束帧。最后我们设置动画的延迟时间以及播放的次数,如图12-3-14所示。我们设置成0.2秒,闪烁部分我们设置成0.1,最后结束帧我们设置为1。

图片 28图12-3-14

13.完成后,我们就可以预览了。预览无误,我们就可以进行最后的输出了。选择【文件】,【存储为web和设备所用格式】,弹出对话框如图12-3-15所示。

图片 29

图12-3-15

14.我们对预设进行一下设置,各参数设置如图12-3-16所示。

图片 30

图12-3-16

点【存储】,选择文件保存路径,选择【保存】,这样一个网页中GIF的动画就制作完成了。

最终效果:

GIF动画最初显示的图像效果,如图12-3-17所示。

图片 31

图12-3-17

GIF动画播放至中间所显示的渐变效果,如图12-3-18所示。

图片 32

图12-3-18

GIF动画闪烁后播放至最后一张图像所显示的效果。如图12-3-19所示。

图片 33

图12-3-19

12.3.2网页中透明GIF图片的制作

在网页的制作过程中总是少不了透明GIF图像的添加,往往网页中透明图像的添加并不像图片和动画中的那么简单,所以我们在添加时需要使用ps来完成这项工作。

1.打开或制作一个需要制作成透明GIF图片的PSD文件,如图12-3-20所示。

2.在图层面板中将最底层的白色背景删除掉,或者将图案图层白色的部分删除掉。让当前图像显示为图12-3-21中的效果,也就是透明的状态。

图片 34图片 35

图12-3-20图12-3-21

3.在菜单栏上选取【图像】>【裁切】,打开裁切对话框,如图12-3-22所示。在【基于】类别中选中【透明像素】项,这样就可以按照像素所在区域进行自定剪裁。如图12-3-23所示。

图片 36图片 37

图12-3-22图12-3-23

4.剪裁好以后,在【文件】菜单栏中选择【存储为Web和设备所用格式】项。在打开后的对话框中将优化的文件格式选择为GIF或PNG,接着再将选项后面的【透明度】想勾选。如图12-3-24所示。

图片 38

图12-3-24

5.另外需要我们注意的就是GIF图像的杂边设置。如果这个透明GIF图像是要用到一个底色为蓝色或绿色的网页中,那么就需要使用杂色来使图片边缘和网页很好的结合。在设置杂边时,为了使颜色更准确可以先在网页中取得底色的颜色值,然后再将杂边的颜色值设置为和底色的一样即可。如图12-3-25所示。

图片 39

图12-3-25

6.设置完毕后点击【存储】按钮将图片保存,然后在Dreamweaver中插入该图片时就可以看到之前设置的透明效果。

本文由澳门新葡8455手机版发布于摄影欣赏,转载请注明出处:PS网页GIF动画广告设计,优化全体图像

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。