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

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

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐Fireworks优化网页图像详解(三),赶紧看过来吧!

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

二、优化GIF和PNG图像

1. 设置调色板、色度、抖动与色损

当选择GIF与PNG8格式时,可选择调色板,各调色板的特点如下:

· Adaptive:该调色板是从所有颜色中提取的系列色彩,是被使用最多的调色板,可以使用最少的颜色实现较好的效果。

· WebSnap Adaptive:是一种更高级的自适应调色板,这种调色板既兼顾色彩的丰富性又考虑了浏览器的兼容性,建议用户使用这个调色板。

· Web 216:通用于Windows与Macintosh平台的216色调色板。由于它能在各种8位显示平台的浏览器中保持相当好的一致性,因此是最保险的网络图像调色板。

· Exact:包含图像中使用的精确颜色。只有当图像中的颜色小于256时,才可使用该调色板。当图像所包含的颜色数超过256时,它自动转换成“最适色彩”模式的调色板。

· Windows和Macintosh:使用由Windows系统或Macintosh平台定义的标准256色。

· Grayscale :小于256灰度级的调色板,将把图像转换成灰度图。

· Black & White:由黑、白颜色组成的双色调色板。

· Uniform:基于RGB像素值的数学调色板。

· Custom:自定义调色板。其基本内容可来自于标准调色板或GIF文件,用户可在此基础上对调色板进行修改。另外,当用户改变过调色板的某种颜色后,原来的模式会变成“Custom”模式。

用户还可利用颜色编辑框设置色深,利用抖动编辑框设置抖动。对于GIF格式,还可以利用失真编辑框设置色损。该数值越大,文件尺寸越小,但图像质量越差,如图5所示。

图5 GIF和PNG微调优化参数面板

2.设置反锯齿颜色

单击Optimize面板中的色版按钮可设置反锯齿颜色,它通过将对象颜色与画布颜色混合使对象看起来更平滑。为防止出现光晕,可使画布颜色与网页背景颜色相一致,为对象增加反锯齿效果,然后将画布设置为透明。

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

在Fireworks MX 2004中,关于GIF图像优化的选项,还有在优化面板的弹出菜单中设置GIF的“Interlaced”属性,其作用是可以在浏览器中实现边下载边显示的效果,如图5所示。

图 6 设置“Interlaced”属性

三、优化JPEG图像

JPEG格式的优化设置面板如图7所示,用户可以设置如图参数。

图7 JPEG的微调优化参数面板

1. JPEG的选择压缩

在Fireworks MX 2004中保留了JPEG的选择压缩功能,它可以对图像的不同区域选择不同的压缩比率,从而达到更加个性化的图像导出效果。例如,图像重要部分可以高级别压缩,非重要部分(如背景)可以低级别压缩,以便能在保证重点区域质量的前提下减小文件的尺寸。

(1)压缩JPEG图像的选定区域

具体步骤如下:

· 在图像上使用选择区域工具画一个选区。

· 选择菜单“ModifySelective JPEGSave Selection as JPEG Mask”,将选取保存为JPEG蒙版。

· 在优化面版中将输出格式设置为JPEG。

· 单击优化面板中选择性品质右侧按钮,打开图8所示的可选JPEG设置对话框。

图8选择性JPEG压缩

· 选中“Enable selective quality”复选框,并在文本框中键入选择区域所要设定的压缩比率。

· 选择“Overlay color”(该颜色只用于预览,不用于输出)

· 选中“Preserve text quality”复选框,表示所有文本将自动以高级别输出,而忽略具体的选择性压缩数值。

· 选中“Preserve button quality”复选框,表示所有按钮符号将被自动以高级别输出。

· 单击“OK”按钮就可以在预览窗口看到效果了。

(2)修改选择JPEG压缩的区域

具体步骤如下:

· 选择菜单“ModifySelective JPEGRestore JPEG Mask as Selection”,将会出现一个选区。

· 用选择区域工具或其他工具对选区进行修改。

· 再选择菜单“ModifySelective JPEGSave Selection as JPEG Mask”。

· 要取消JPEG选择压缩可以选择 “ModifySelective JPEGRemove JPEG Mask”。

2. 设置反锯齿颜色

同样,对于JPEG格式而言,用户仍可利用色版按钮设置反锯齿颜色。通过调整品质的数值,可调整JPEG图像的质量。该数值越大,图片质量越好,但图像尺寸也就越大。

3. 模糊边界

通过设置优化面板中的平滑值,可控制JPEG算法对尖锐的颜色 边界做模糊处理,从而减小文件尺寸。由于这样的边界在JPEG算法中不能实现很好的压缩,所以,较大的“Smooth”参数值通常会减小导出图像文件的大小。一般情况该数值为3,既可减小文件尺寸也能保证图像的质量。在Fireworks MX 2004中,还有两种JPEG优化参数,是在优化面板的弹出菜单中设置的,它们是“Progressive JPEG”和“Sharpen JPEG边缘”。使用方法是单击优化面板右上角的按钮,会弹出一个下拉菜单,在弹出的菜单中选择相应参数,如图9所示。

若选择“Progressive JPEG”参数,则该图像在浏览器中显示效果将随着图像下载进程的递增由模糊渐变为清晰,有点类似交错式GIF。

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

若选择 “Sharpen JPEG Edges”参数,可更好地保留两种颜色之间的边界。因此,特别适用于输出带文本的文档。

图9 另外两个JPEG优化选项

注意:对于PNG24和PNG32格式而言,用户只能设置反锯齿颜色。

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

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

经验教程

213

收藏

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