Fireworks优化网页图像详解(二)

2016-02-19 18:22 1 1 收藏

图老师小编精心整理的Fireworks优化网页图像详解(二)希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Fireworks优化网页图像详解(二)[ 】

(二)优化方案的选择、设置以及增删

1. 选择内置优化方案

在Optimize 顶部设置的Setting下拉列表中,用户可选择系统内置的一些优化类型。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)

Fireworks中提供了6种优化方案,各优化类型的意义如下:

· GIF Web216:将所有颜色都转换为216种Web安全色。

· GIF WebSnap 256:将非Web安全色转换为最接近的Web安全色,调色板最多包含256种颜色。

· GIF WebSnap 128:将非Web安全色转换为最接近的Web安全色,调色板最多包含128种颜色。

· GIF Adaptive 256:此时调色板只包含图形中使用的实际颜色,并且调色板最多包含256种颜色。

· JPEG-Better Quality :设置质量为80、平滑度为0,此时图像质量较高,但文件尺寸也较大。

· JPEG-Smaller File :设置质量为60、平滑度为2,此时文档尺寸比JPEG- Better Quality减少一半,但同时质量也将大幅度下降。

* 如果使用GIF或PNG格式,还应设置图像的透明颜色,Fireworks MX 2004共提供了三种透明模式供选择:No Transparency (不透明模式),Index Transparency (索引色透明模式)和Alpha Transparency (Alpha透明模式),其中Alpha透明为通道透明色。透明效果在Firewoks MX 2004中以白色和灰色小方格相间的形式表示。如图3所示.

图3 设置透明色

在不透明模式中,图像中未定义的地区以底色填充。

索引色模式指的是将调色板的某些颜色设置为透明色,图像中所有这些颜色的像素点都被作为透明点导出。

注意:当图像中本来有这种透明颜色的时候,有用的像素也被透明显示。

要改变透明色的设置,最简单的方法是使用优化面板左下方三支吸管工具,其功能如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com)

· 在预览区单击即可添加透明颜色。

· 在预览区单击即可移除透明颜色。

· 在预览区单击即可选择透明颜色。

2.用户自定义优化设置

如果用户不满足于以上6种内置方案,可以利用Optimize面板中的各种优化选项进行更精确的图像设置。

· 在Optimize面板中的文件格式下拉列表框中选择需要的文件格式。

· 设置相应文件格式的具体化选项。

· 根据需要在优化面板的快捷菜单中选择其他的优化设置。

3. 保存和删除自定义优化方案

Fireworks 提供了保存优化方案的功能,允许用户将自定义的方案保存以备以后使用。在保存时,会将以下优化设置加以保存:

· Optimize面板中的各项选项设置。

· Color Table(颜色表)面板中的调色板。

· 用户在帧面板中选择的帧延迟设置。

用户可将自定义的优化方案保存为内置的方案。完成优化设置后,选中优化面板下拉列表中的Save Settings,可以打开如图所示的保存设置对话框,键入用户自定义的设置名称,单击OK即可将自定义的优化方案保存起来, 如图 4 所示。

图4 保存优化设置对话框

如果不再需要某个优化方案,可以在Optimize面板的优化方案列表中选择要删除的方案,然后再面板的快捷菜单中选择Delete Setting(删除设置)命令即可将方案删除。

来源:https://www.tulaoshi.com/n/20160219/1617463.html

延伸阅读
在Fireworks中创建并优化图形后,用户可将该图形输出为常用的Web格式及供其他程序(如Freehand)使用的向量图形格式。Fireworks MX 2004由于它的面向网络的特性,导出的形式可以不仅仅是图像,还可以是包含各种链接和Java Script信息的完整的网页。由于图像的导出和优化一样将产生一个导出副本,因此是不会修改原图的,所以,用户可以尝试...
    除了创建按钮之外, 还可以让您轻松的创建一个奇异的 Javascript 翻转效果。例如,当鼠标指针滑过一个按钮,除了改变这个按钮的显示状态,您还可以让它改变在这一页中的区域的显示,在 Fireworks 中,这种翻转效果被称作不相交翻转( disjoint rollover)。 加入引发翻转的图象 1,打开图象 2,选...
标签: PS PS教程
    Adobe公司在Photoshop 5.5中集成了ImageReady 2.0软件,提供了强大的网络图像处理功能,可以让你设计引人注目的网络图片。利用Adobe ImageReady 2.0可以处理图像优化、切割、动画、JavaScript变动效果以及其他进阶工作,下面我们主要对用ImageReady进行Web图像优化作一讲述。 为什么要优化图像 我们知...
网格化图像效果在设计中也很常见,效果如图4-127所示。这种效果适合作为网页或者通栏的背景图像。具体的制作方法如下: 图4-127 网格化图像效果 1、在Fireworks中打开素材图像,如图4-128所示。 图4-128 打开素材图像 2、按快捷键【Ctrl+6】,把图像的显示比例放大到原来的1600%,如图4-129所示。 图4-129 放...
如果内容为王的话,那么设计就是城堡。对于企业而言,好的网页设计不仅包含了能够引起访客兴趣的内容,吸引目标用户,而且包含有直观而漂亮的UI设计,促进销售。许多设计师喜欢将自己认为创意爆棚的UI设计直接应用到客户的网站上,但并没有考虑过这种设计是否符合网站的产品,是否符合目标用户群所需要的体验与需求,从这个角度上来说,这样的...

经验教程

494

收藏

24
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部