准备工作

我用的是mac,如果是win的话，等有机会我找到了补充。 PS的版本是photo shop cc

• 缓存盘路径更新（MAC不用设置） 在ps的首选项-->暂存盘

• 默认单位修改，前端一般是px，但是ps的单位一般是cm 在ps的首选项-->单位与标尺 里面将单位都修改为像素

常用新建空白图层

• 设置文件的宽度和高度注意单位都是像素
• 背景色选择为白色即可

工具预设

主要常用的工具就在 视图、窗口两个大类里面了 + 工具 + 标尺 + 图层 + 信息 + 字符

网页相关常见宽度

目前的网页宽度一般都是固定在1200px以内的并且内容居中，需要好好利用标尺+裁剪工具来进行裁剪

如果要撤销之前的动作，可以使用comman+option+z

• 裁切之切片工具 切片工具可以一次切多个图，并且一键生成web格式。 裁切的图片，一般都是存储为web格式的png图片。品质的问题，建议默认即可。品质越高，图片的大小也就越大。

一些背景色相同的图片，在切片的时候，只要切到颜色后，设置图像->画布大小宽度设置为1px。因为css本身有图片的平铺功能。

如果有很多的小图标要使用，可以将比较多的图片放在一张图片上，然后在使用css根据图片的位置，进行不同位置的裁剪即可。

还有一些图片比如边框、线条等，可以用CSS实现的，也无需使用图片替代

• 工具-文字工具 可以在psd的设计稿中，通过文字选取了文字内容就可以看到文字的字体、大小，也可以在字符中看到行高、颜色等等。如果打开提示某些字体不存在的话，也可以手动先给电脑安装上对应的字体后，在打开即可。（安装后要重启ps）

• 阴影的裁切 1、可以考虑单独裁切出来 2、使用CSS3的代码实现

• 一些常用快捷键 删除图层delete 合并图层Ctrl+E 移动 V 裁切 C 如果快捷键失效等，也可以自己在ps中进行重新设置，并检查是否被QQ、微信等其他软件占用了快捷键

切图辅助工具

• Markman
• TinyPNG
• 前端自动化（组合压缩图片等）