Photoshop切片 及 移动端适配资料链接

安装最新的Photoshop CC,拿到设计的PSD源文件
课程:http://www.maiziedu.com/course/231/

标尺使用

http://jingyan.baidu.com/article/870c6fc337a887b03fe4bea6.html

ctrl+r 显示标尺
可拖出辅助线

切片工具使用

按c选择,右键切片工具

单个图片保存
ctrl+alt+shift+s 存储为web格式,里面点击切片,编辑格式,点击“存储…”,里面选择格式:仅限图像,切片:选中的切片

ctrl+alt+shift+s 后,可编辑每个切片的格式,然后点击完成。下次再ctrl+alt+shift+s 的时候会保留之前的设置。

如何设置导出命名切片后带@1x,@2x等

默认移动端psd是按照2倍图去设计的,因此导出@1x切片时需要选择50%,@3x是150%。

设置图像大小百分比

Photoshop切片 及 移动端适配资料链接

设置导出切片名称

点击“存储…”,设置选择“其他”,然后按下图设置,其中可储存和载入该设置,方便以后调整。
Photoshop切片 及 移动端适配资料链接

导出时选择自己的设置

Photoshop切片 及 移动端适配资料链接

保存即可

移动端适配资料链接参考

http://www.jianshu.com/p/3a5063028706

雪碧图制作工具

https://www.toptal.com/developers/css/sprite-generator