PS高效处理图片总结

一、插件推荐

ps插件：css3、parker、guide

1.css3：可把图层导出为css3、scss。

2.parker：是一各最高效的自动标注工具，可以标注psd图需要的高度，宽度、字体...



3.guide：是一个ps上的参考线设置的辅助插件。只要输入不同划分的值，可自动按N等分用参考线分。

例：页面需要分栏和等比间隙时，现在红框内输入数值，后点击下部GG按钮



二、抠图方式

方式：直接导出、切片工具、ctrl+shift+c

直接导出：全部图层/在选中的图层直接右键直接导出，缺点：图片格式固定：png，导出全部图层耗时长。

切片工具：适用于处理图片导出多个图片，不常用。

ctrl+shift+c：常用，切图后复制到新建图层后存储想要的格式图片。

步骤：切图 —>ctrl+shift+c —>
ctrl+shift+n
—>ctrl+v—>ctrl+shift+Alt+s
—>选择需要的格式保存。

三、设计稿类型：psd、Marketch
psd:设计稿类型psd是普通的，也比较方便处理图片，宽高等。

Marketch类型：少数，不方便处理图片，宽高。

四、设计稿尺寸：PC、H5、邮件

pc:主要确定显示内容的宽度。

H5：宽高：640px
1136px

邮件：宽高不固定，宽一般为600-800。

五、图层处理

处理主要是合成：选中需要合成的图层后右键选中合成即可。

六、图片保存的格式
格式有：base64、JPEG、png8、png24、ico

base64和ico都需要图片其他格式转换才可。

JPEG：比较小，支持的颜色较多，但图层背景是白色。

png8：大小适中，支持的颜色没JPEG多，图层背景是透明。

png24：支持多种颜色，大小：比较大，图层背景是透明，不常用。

为减小图片大小，浏览速度快，都需要把图片压缩。

七、时间戳和图片缓存

因为浏览器第一次访问时讲图片下载到缓存，再次浏览相同地址时则打开上次缓存的图片，这就是/图片缓存。

为清除缓存常用地址加一个时间戳/版本号，让浏览器重新下载。或让运维清除缓存。

八、工具：图片精灵

一个网页用到多个图像，可用工具：图片精灵放入到一张单独的图片中。可减少服务器请求数量并节约带宽。