欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS PS切图教程 >

PS切图-保存

 

PS切图应该保存哪种格式?各种格式之间又有什么不同呢?对web前端来说,图片格式是需要重要掌握的知识。

保存,即存储所需内容。 // Ctrl+N新建,背景一般设为透明

独立图片,使用拖动工具到新的文件即可;

已合并图片,使用矩形选框工具+魔棒选择 > 复制、新建、粘贴或拖到新文件 > 存储为Web所用格式(Ctrl+Shift+S)

图片格式

目前在前端开发中常用的图片格式有jpg、png(分为png8和png24)、gif。最近svg格式也开始流行起来。

gif

gif是无损的,具有文件小、支持动画及透明的特点。但gif无法支持半透明,且仅支持8bit的索引色,即在整个图片中,只能存在256中不同的颜色。

但实际上,gif是一种逐渐被抛弃的图片格式,PNG格式的出现就是为了替代它。

由于gif支持动画的这个“一招鲜”的本领,在网络中仍然占有一席之地,主要用于一些小图标。

jpg

jpg又称为jpeg,是有损的,但采用了直接色,保证了色彩的丰富性。

jpg图片支持透明和半透明,所有空白区域填充为白色,主要用于高清图、摄影图等大图。

png8

png8是无损的,是png的索引色版本。

前面提到过,png是gif格式的替代者,在相同图片效果下,png8具有更小的文件体积,且支持透明度的调节,但png8不支持半透明,也不支持动画。

PS切图-保存

png24

png24是无损的,是png的直接色版本。

png24支持透明,也支持半透明,但png24有文件体积较大的缺点。

png24的目标是替换jpg,但一般而言,png24文件的大小是jpg文件的5倍之多,但显示效果只有一点点的提升,所以,一般的,使用半透明效果时,考虑使用png24格式。

svg

svg是无损的矢量图,svg与上面的图片格式最大的不同是,上面的图片都是位图,而svg是矢量图,具有无论如何缩放都不会失真的优点。

svg格式非常适应于绘制logo、图表等,但由于低版本浏览器支持不足,应用不广泛。

PS切图-保存

PS切图-保存

保存设置

一般地,在对设计图进行修改前,首先要保存一份PSD源文件,然后再在其副本上进行修改。

通过PS将设计图切成需要的素材时,涉及到图片格式的设置问题,应注意以下几点:

a. 当图片色彩丰富且无透明需求时,建议存为jpg格式并选择合适品质,来对图片进行压缩。

// 品质越大,图片质量越高,图片也会越大;设置原则:品质不要100(相当于没压缩),根据项目需要,一般60-80比较合适

b. 当图片色彩不太丰富时,无论有无透明需求,请保持为PNG8格式。

// PNG8格式只有256种颜色,文件比较小,比较适合网络传输;

设置:存储为Web所用格式 > PNG8 > 颜色默认256,杂边:无,扩散:无仿色(右上角可存储)

c. 当图片有半透明需求时,请保持为PNG24格式。

// 特点:对图片不进行压缩,所以文件比较大;且支持半透明效果(保持面板采用默认设置即可)

PS切图-保存

PS切图-保存

PS切图-保存

PS切图-保存

Webpiece_整合分析、记录点滴

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-ps/ps50310.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-04 21:56 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。