爱米*阅

不是日志,不是剪切板

网页切图一些些 - [技术 | Tech]

发布时间   2010-12-08 @ 10:57:00 标签    切图 色彩 网页 jpg gif png bmp windows 编辑 | 分享 0

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.blogbus.com/amixyue-logs/87549651.html

作者按:

好久米有写博客了。正好近期很多和网页切图相关的工作,贡献一篇文章给google & baidu 的小虫子啃。

页面制作

Web Designer 的工作,在此不提。

不过呢,几点希望:

1、万变不离其宗。“宗”者,页面基调也。包括字体、字号、字色、背景、页面主色调、框(圆角、底色、背景)、a 触碰行为等;

2、旧瓶新装才是高手。排列组合、小幅度修改已有元素,于人于己都是好的;

3、无规矩不成方圆。页面栅格化、图层命名语义化,你懂的~

网页切图

1、全局观构建布局;

2、UE 图图层分离、合并、重排;

3、切图

3.1尽量代码实现,少用图片;

3.2同时考虑色彩复杂程度,决定需要使用的图片格式,一般有以下几种备选,将从色深、压缩、支持&最适合角度讨论

jpg

:Joint Photographic Experts Group。

色深不用说了、支持上百万种颜色;

有损压缩,在 photoshop 下有最佳、高、中、低 4 种规格,每种规格从最后大小上比例为70%左右;

另外,颜色越少、色彩层次越少(具有大块颜色相近的区域)、亮度差异越明显,越不适合用 jpg压缩。

因为 jpg 采用 8*8 矩阵压缩;

因此:颜色少、大块颜色相近就该用索引色,亮度差异大用矩阵取某值填充,就是杂色产生的原因。

多用于写实的摄影图像或是颜色层次非常丰富的图像。

gif

:Graphics Interchange format

索引色、只支持256种颜色;1位透明。

支持无损压缩、不损失图片细节;

适合于线条、图标等颜色少、色彩层次低、亮度差异明显的图片;

支持背景一位透明(不支持半透明)、生成非矩形图形;

支持动画(flash 前的解决方案);

支持图形渐进;

GIF87a:只是简单地用来存储单幅静止图像。
GIF89a:可以同时存储若干幅静止图象进而形成连续的动画,使之成为支持 2D动画的格式。可指定透明区域,使图像具有非同一般的显示效果,这更使GIF风光十足。目前Internet上大量采用的彩色动画文件多为这种格式的文件。像素画。QQ秀,QQ空间等N多QQ的东西。

多用于颜色少、色彩层次低、无需半透明、要求细节,如图标等;

将网页切片导出成gif格式的时候,如果色彩太丰富,不宜一起导出,而应该将切片一个一个的导出;

调色板一般“最适合”,色彩多余256色时,设置抖动‘100%’,色彩不多于256色,调色板‘精确’

png

:Portable Network Graphic Format,又一说:PNG’s Not Gif 比GIF 更强大

20实际90年代产生,存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据,使用从LZ77派生的无损数据压缩算法。

支持256索引色、流失读/写性能(适合于通信)、图形渐进、透明性(16位)、辅助信息(通道)。但是,普及性差,尽量勿用!

png8:

256色、支持索引色编辑、支持布尔透明

Png24:

约1600万色、不支持索引色编辑、支持8位(256阶)alpha透明

bmp

:bitmap

windows专用,分为 1bit 4bit 8bit 24bit类型,无压缩,还有 bitmapheader 等;《数字图像处理》教学中常使用

分享到:

    评论

  • 高手niubility。“多用于XXX”很tip。不过,中间可以空行的嘛。
    回复shell说:
    色彩华丽丽得多好看~
    这两天 live writer 抽风,很多文字上不来,等会花点时间 copy&paste
    2010-12-09 21:30:01