理论教育 图形优化技巧-网页设计

图形优化技巧-网页设计

时间:2023-11-04 理论教育 版权反馈
【摘要】:在Fireworks中,使用“优化”面板可以轻松地对图形进行优化。对一幅风景图片进行不同设置的优化,达到不同要求下图像大小和品质的最佳配合。图13-15常用优化设置选项GIF最合适256:只包含图形中实际使用颜色的调色板。图13-16“优化到指定大小”对话框5.预览优化效果按照自定义优化设置优化后,单击“预览”按钮,预览效果如图13-17所示。

图形优化技巧-网页设计

在Fireworks中,使用“优化”面板可以轻松地对图形进行优化。

【例13-1】对一幅风景图片进行不同设置的优化,达到不同要求下图像大小和品质的最佳配合。

1.打开文件

单击“文件”菜单→“打开”命令,打开需要进行优化的图像文件。本例使用的素材为一幅风景图片,格式为JPEG文件,尺寸为1024×768像素,图像文件原始大小为244.99KB。

2.“优化”面板

单击“窗口”菜单→“优化”命令,打开“优化”面板。其中的选项随打开的文件类型的不同而有所不同,如图13-13所示是对JPEG文件的优化选项,图13-14所示是对GIF文件的优化选项。

图13-13 JPEG文件的“优化”面板

图13-14 GIF文件的“优化”面板

3.常用优化设置

用户可以从“优化”面板的常用优化设置中选择。单击下拉按钮,在下拉列表中可以快速设置文件格式并应用一些格式的特定设置,如图13-15所示。

下拉列表中各优化设置选项的含义如下:

(1)GIF网页216:强制所有颜色为网页安全色。

(2)GIF接近网页256色:将非网页安全色转换为与其最接近的网页安全色,调色板最多包含256种颜色。

(3)GIF接近网页128色:将非网页安全色转换为与其最接近的网页安全色,调色板最多包含128种颜色。

图13-15 常用优化设置选项

(4)GIF最合适256:只包含图形中实际使用颜色的调色板。

(5)JPEG-较高品质:将品质设为80,平滑度设为0,图形品质较高但占用空间较大。(www.daowen.com)

(6)JPEG-较小文件:将品质设为60,平滑度设为2,生成的图形所占空间大小不到“JPEG-较高品质”的一半,但品质有所下降。

(7)动画GIF接近网页128:将文件格式设为GIF动画格式,并将非网页安全色转换为与其最接近的网页安全色。

根据以上参数的特点,用户可以选择不同的选项,观察预览图像效果的区别。

4.自定义优化设置

在“优化”面板上,单击右上角的按钮,弹出“优化”级联菜单,利用该菜单可以让用户自己定义图像优化后的大小。在级联菜单中选择“优化到指定大小”命令,打开“优化到指定大小”对话框,在对话框中输入所需要的文件最大值,例如,20KB,如图13-16所示,单击“确定”按钮,Fireworks将自动对图像进行优化,达到小于设定值的最佳效果。

图13-16 “优化到指定大小”对话框

5.预览优化效果

按照自定义优化设置优化后,单击“预览”按钮,预览效果如图13-17所示。

如果想同时观察原始图像和优化后的图像,在工作区中单击“2幅”选项卡,效果如图13-18所示。

如果想同时观察几种不同的图像优化效果,可以单击“4幅”选项卡,效果如图13-19所示。其中最下面的两幅图像是通过Fireworks本身的常用优化设置选项优化的,选项分别是“JPEG-较高品质”和“JPEG-较小文件”。

图13-17 优化后的预览图像

图13-18 原始图像和预览图像

图13-19 不同的图像优化效果对比

对优化和导出操作熟练后,就可以通过“优化”面板和工作区中的“预览”按钮来快速优化图形了。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈