如翼视点
首页>如翼视点>文章内容
看完全懂(3)--UI类电子界面输出的图片格式
发表时间:2017-01-26

-----------转帖请注明如翼视觉设计--------------

http://www.ruyidesign.com/

电子出版物指新型的电子桌面系统,包括app产品的UI系统、网页设计、软件界面等等。

和传统物料输出完全不同,这类文件往往用只photoshop输出(其实还有个软件非主流,叫fireworks)。而且需要切片输出,即把一张排版大图切成很多小图,下面说的就是这些小图的格式问题。

做好的ps源文件,切片输出时不需要输出排版文字,成品后是后台系统写上去的。

 

老规矩,先介绍几种格式,没介绍的其他格式尽管忽略。

jpg,优点:最通用的格式,图片小,缺点:压缩,有时候图片会糊会脏。jpg有两种模式,cmyk和rgb,这里要用rgb;

png:新贵,优点:显示效果最好,能无差别透明,缺点:就一个,图大;

gif,优点:底色简单时图片极小且还原度极高,能有动画效果;缺点:图片复杂时有一格一格效果,文件骤然变大。下面是详细介绍各种场合的运用。

 

1.首先没输出前,要给客户看效果,不用切片要整张图发过去。这张图大多数人会选jpg,我却建议png。因为png虽然大点但不失真。增加方案通过几率

2.切片输出提供给程序员时,很多人也一股脑把所有切片的图选jpg,这真是个误区,因为切片的人做前端的多,他们不重视视觉效果。正确做法是:照片类型的图片,jpg,非照片类的色彩丰富的图片(如,有渐变,有阴影),还是建议png,另外有个被遗忘的格式叫gif:gif输出无渐变的色块图片,如很多logo、平涂大文字(非排版小字)等,效果远胜jpg,文件大小远小于png!只是gif处理渐变色会一格一格的,处理色彩丰富的颜色,会有问题。

看看下面三组不同类型的例子,看得出该怎么优化吗?

 

 

照片类型,用jpg,仔细看区别

平涂色块类型,用gif,仔细看区别

复杂、渐变色块类型,用png,仔细看区别

3.动画,用连续多帧图提供给程序员,如果不行只有动态gif格式。

4.需要透明底的,一概png

5.图片全部RGB格式,72dpi