一、插件推荐
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:设计稿类型psd是普通的,也比较方便处理图片,宽高等。
Marketch类型:少数,不方便处理图片,宽高。
四、设计稿尺寸:PC、H5、邮件
pc:主要确定显示内容的宽度。
H5:宽高:640px 1136px
邮件:宽高不固定,宽一般为600-800。
五、图层处理
处理主要是合成:选中需要合成的图层后右键选中合成即可。
六、图片保存的格式
格式有:base64、JPEG、png8、png24、ico
base64和ico都需要图片其他格式转换才可。
JPEG:比较小,支持的颜色较多,但图层背景是白色。
png8:大小适中,支持的颜色没JPEG多,图层背景是透明。
png24:支持多种颜色,大小:比较大,图层背景是透明,不常用。
为减小图片大小,浏览速度快,都需要把图片压缩。
七、时间戳和图片缓存
因为浏览器第一次访问时讲图片下载到缓存,再次浏览相同地址时则打开上次缓存的图片,这就是/图片缓存。
为清除缓存常用地址加一个时间戳/版本号,让浏览器重新下载。或让运维清除缓存。
八、工具:图片精灵
一个网页用到多个图像,可用工具:图片精灵放入到一张单独的图片中。可减少服务器请求数量并节约带宽。