使用ps切图的技巧大全

使用ps切图的技巧大全

下面就用一张很简单的图片来当例子。

标尺和对齐：
1. 标尺，这个就是标尺了，作用不用说了吧。。。

调出菜单在视图，把标尺前面的对钩打上就OK了。

2. 对齐，这也是一个非常好用的选项，比如用选框工具或者拉参考线的时候只要拖到附近就会自动对齐，很方便。但是缺点也是有的，就是太“智能”，你选到附近几个像素的时候它就会自动对齐了。这个选项的优点和缺点需要自己体会。。。反正以后你因为1px左右的选取而纠结的话，想一下这个选项是不是打上勾了。

关于图片的拖拽和缩放问题：
这是两个缩放常用的快捷键：

那说到这两个选项就不得不说photoshop左下角这个地方了。

这就是当前图片显示的大小，你可以通过点击它来输入任意数值，双击会自动输入100%，很好用。

其实对于拖拽和缩放，最好的方式是Alt+滚轮进行缩放，space+鼠标左键进行拖拽，这两个操作方式的优点是灵活以及对细节把控的到位。（注意如果空格+鼠标不能拖动图片的话，说明图片显示比屏幕小，直接放大一些就ok。）

关于参考线：
参考线是前端切图必须要用到的功能了。

调用参考线也很方便，将鼠标移动到标尺上按住拖动就会出现一条参考线了。如果将鼠标移到左上角标尺重合的地方可以拖出两条（横竖各一条）参考线。

如果要清除所有参考线，在视图菜单里就有清除参考线按钮。

如果只是要清除某一条参考线，按住Ctrl键（调用移动工具），把鼠标移动到参考线上，按住拖动回标尺就行了。

关于图层：
一般打开非psd格式的图片都只有一个背景层：

而且后面有一个小锁，是不允许编辑的。解除小锁的方式很简单，通过双击背景层弹出

点确定就可以。

一般不建议直接在背景层上编辑，因为会对原始素材造成毁坏。所以可以通过复制图层来解决：

鼠标将背景层按住不放拖动到新建图层按钮

这样会出现一个背景层副本，可以在副本上编辑。

图层前面的小眼睛是设置图层的可见性的，有关闭和打开两种状态。

图层的上下顺序是有讲究的，上面的图层会覆盖在下面的图层上，所以如果有两个不透明的图层叠加，会显示上面一个图层。

图层有个不透明度选项，这个选项可以用来验证我们做出来的页面和原稿的吻合度。

图层的内容比较复杂，不是一两句话能说清楚的，如果小伙伴们遇到了问题，欢迎来和我一起探讨。

关于选框工具（测量、抠图）：
前端切图中会不断用到这个工具：

其实这也是一个非常简单的工具，一般我们只用得到第一个矩形选框工具（测量，抠图），后面三个切图基本用不上。

比如我们要测量一个div的高度

选好之后按F8可以调出信息框

这样就能知道高度了。

选框工具在前端切图中还可以用来抠图（因为前端抠图很简单，很少有那种特别难抠的图）：

比如我们要抠出这个邮箱icon

我们先Alt+滚轮将图片放到足够大（每个像素块清晰可见）：

然后用矩形选框工具选取非白色的像素块。对于这种不规则形状需要用到shift+选：按住shift拖动鼠标会将选区相加。Alt是减选，操作相同。这个操作没有技术含量。。。耐心就行了。。。

选好之后

按Ctrl+C复制选区，Ctrl+N新建文件

弹出的框中记住要将北京内容设置为透明。宽高不用设置，默认剪贴板预设。然后确定，按Ctrl+V粘贴，即可得到扣下来的图。

关于图片保存的问题：

一般前端中切图保存都要用到这条命令，记住快捷键。可以保存为gif，png等web图片格式。

吸管工具、裁切等等就不一一细说了。

最后总结一下用的特别多的快捷操作：

Alt+滚轮：缩放图片

空格+鼠标：拖动图片

Ctrl+N：新建文件

Ctrl+Shift+I：选区反选

Ctrl+鼠标：调动移动工具

Shift（Alt）+鼠标：选区加（减）选

photoshop博大精深，上面列举的功能知识沧海一粟，如果有感兴趣的小伙伴可以自己学习一下，用处太多。。。。

以上就是这篇文章的全部内容了。如果有什么问题可以联系我，大家一起学习进步！