PS切图后图片大小过大怎么办?

   首先如果只是压缩的话,建议使用 ImageAlpha(专门压缩PNG)

  以网上的一副海报为例(侵删)

  正常从PS导出的PNG大小:


  原本是 1.1 MB


  在 ImageAlpha 中打开后可以看到在默认参数下可压缩 65%。


  压缩后 379 KB。而且是几乎无损画面细节的。我一般在输出切图 资源的时候都是靠 ImageAlpha 来完成素材的压缩。

  而且 ImageAlpha 还可以通过调节颜色数位来进一步压缩,但是这样是有损的。


  比如夸张一些将颜色数位调节到 4,细节就已经丢失的差不多了,但是能极大限度的压缩图像。

  另外还有一些在线的图片压缩工具,最常用的也就是:TinyPNG 。和 ImageAlpha 的压缩默认压缩率差不多,所以具体喜欢用哪个来压缩还是看个人习惯了。

  还有一种压缩方式是讲 PNG 转为 WebP 格式。

  工具有 Webponize 等。


  (图侵删)网上的测试结果压缩率还是非常可观的。

  然而 WebP 还没有普及开来,大部分公司内部还是主要使用 PNG 来输出,所以还是要看公司大多数人的使用习惯来选择具体输出的格式。

  另外如果是一些不带 Alpha (透明)通道的图,可以使用 JPG 来输出,比如移动端产品的引导页,一般情况同样大小的 JPG 格式文件都会比 PNG 小,还是以之前的图为例。


  JPG 只有 338KB。直接导出 JPG 不用额外压缩,而且通过 PS 还可以直接选择你想输出的质量,通过降低质量来减小图片大小。


  同时如果觉得降低 JPG 导出质量仍然还是偏大,还可以在 PS 里通过色调分离来进一步压缩图片的大小:


  当然这个也是有损的,这里将参数设置到40时,已经出现了一些肉眼可见的质量损失:


  所以具体怎么平衡质量与大小的平衡还是看实际情况来决定。

  还有一种情况是图标素材的压缩,最理想的情况是将图片处理为矢量的 SVG 格式。一方面可以无损放大缩小,而且体积也相较于未压缩的文件来说有很大的减小。网上有很多转 SVG 的教程,我这里就不过多描述了,附上链接:Iconfont-阿里巴巴矢量图标库 ,在帮助里面有如何制作 SVG 图标的详细教程。

  最后关于系统中控件的输出,有一条原则就是能用代码来实现就用代码,最好不要用图片,一方面用素材输出就需要好几套素材来适配 xhdpi、xxhdpi、xxxhdpi,后期维护起来非常麻烦。而且程序在加载这些素材的时候也会占用内存,对稳定性和性能都会有影响,一张图可能不太明显,但是一个页面中如果大量的使用图片素材,那么影响就是非常巨大的了。

  一般软件工程师都可以对矢量图形的圆角参数,描边,填充色,投影大小,投影距离,投影颜色进行定义,所以只要素材可以转换为实际可用的参数,都是建议写清楚参数,然后由软件工程师通过程序来实现。

分类:

  • PS入门教程
时间: 2024-09-17 04:16:14

PS切图后图片大小过大怎么办?的相关文章

photoshop切图后图片过大压缩教程分享

给各位photoshop软件的使用者们来分享一下切图后图片过大的压缩教程. 教程分享: 首先如果只是压缩的话,建议使用 ImageAlpha(专门压缩PNG) 以网上的一副海报为例(侵删) 正常从PS导出的PNG大小:     原本是 1.1 MB     在 ImageAlpha 中打开后可以看到在默认参数下可压缩 65%.     压缩后 379 KB.而且是几乎无损画面细节的.我一般在输出切图资源的时候都是靠 ImageAlpha 来完成素材的压缩. 而且 ImageAlpha 还可以通过

javascript-js模仿ps切图功能怎么做?

问题描述 js模仿ps切图功能怎么做? 最近要写一个功能,js模仿ps动态切图的功能,一直没有思路,请各位大神指教,跪谢!!!! 解决方案 开源中国找插件....

CSS+div网页制作PS切图攻略

认识Photoshop(PS)CSS切图必用工具 Adobe PHOTOSHOP平时我们又被称为PS.   div CSS必备切图工具PS截图 多数人对于PHOTOSHOP的了解仅限于"一个很好的图像编辑软件",并不知道它的诸多应用方面,实际上,PHOTOSHOP的应用领域很广泛的,在图像.图形.文字.视频.出版各方面都有涉及. 请看下面介绍: 平面设计 平面设计是PHOTOSHOP应用最为广泛的领域,无论是我们正在阅读的图书封面,还是大街上看到的招帖.海报,这些具有丰富图像的平面印刷

页面制作部分之PS切图

原文: http://www.cnblogs.com/jingwhale/p/4396235.html      网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图.       我们通过设计稿,得到我们想要的产出物(如.png,.jpg文件),给网页提供图片素材(HTML:img,CSS:background). 一.使用PS工具 1.1 PS首选项设置 编辑->首选项->单位与标尺,选改为

PS切图不得不说的技巧

  从基础说起的切图小知识,基本上涉及的都是网页切图,APP以此类推;都是干货说实在有一点太干了,大家多多包涵. 文章有点长,把结构列在这儿:输出格式--代码基础--什么图需要切--切图分辨率--命名--标注--方法      分类: PS入门教程

PS切图绝技之扣图大法

  绝音:专业提供扣图药方,一帖见效,药到病除.当然,也推荐你看看优设今年下载量第一的抠图神器: 功效:去除图标.按钮等背景图的底色 威力:★★★★ 需求:很多时候我们需要用到一些全透明的素材,比如: 问题: 设计图中没有全透明的素材 魔术棒选区会带有一些半透明度,底色背景删不干净, 我们可以直接手工选区,一点点的删除底色背景,但是效率好低. 思考: 有没有办法设置魔术棒工具选区但不带半透明,让底色删的干净点? 嘿嘿,我苦练了半天,终于练出成果,请看练功秘籍. 秘籍: 选择"魔术棒"工

超全面的切图规范指南

设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言.合适.精准的切图可以最大限度的还原设计图,起到事半功倍的效果. 如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力. 设计切图的原则 设计切图输出的目的是跟下游的工程师团队协同工作,那么在团队协作过程中,首先应该保证切图输出能够满足工程师设计效果图的高保真还原需求. 其次,切图输出应该尽可能降低工程师的开发工作量,避免因切图输出而导致不必要的工作量. 最后,输出的切

Photoshop CC智能切图功能教程

  Photoshop CC发布有一段时间了,童鞋们上手感受怎样呢?关于Photoshop CC一些强大的新功能,优设在你应该了解"PHOTOSHOP CC"新特性上已经介绍了很多,还有一篇最全的PHOTOSHOP CC总结也是满满当当的干货,不过今天小编又发现了一个新功能,那就是智能切图啦,应用在图像输出上非常方便,想要详细了解的话,就来阅读这篇文章吧! danger:要确保正常使用智能切图,请先将Photoshop CC 升级到14.1.2版. 通过文件菜单开启智能切图,File

photoshop高效切图方法技巧分享

给各位photoshop软件的使用者们来详细的解析分享一下高效切图方法的技巧. 技巧分享:   有人会发现一个问题,6S.6S plus的尺寸呢?因为他们的分辨率和6.6 plus尺寸一致的.   从上图可以看出不同分辨率对应不同的倍率,这样的话我们适配的时候就知道怎么切图了,@2x表示两倍图,@3x表示三倍图;以上的那些尺寸图,重点看这张图就可以同时适配iOS和Android的切图了. 工欲善其事,必先利其器 现在PhotoshopCC2015已经出了切图就更方便了,但是对于电脑的配置要求比较