当前位置:首页 >> 平面设计

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

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

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

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

photoshop切图的技巧总结

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

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

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

点确定就可以。

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

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

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

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

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

关于选框工具(测量、抠图):
前端切图中会不断用到这个工具:

photoshop切图的技巧总结

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

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

这样就能知道高度了。

选框工具在前端切图中还可以用来抠图(因为前端抠图很简单,很少有那种特别难抠的图):

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

photoshop切图的技巧总结

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


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

选好之后

photoshop切图的技巧总结

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

photoshop切图的技巧总结

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

photoshop切图的技巧总结

关于图片保存的问题:

photoshop切图的技巧总结

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

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

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

      Alt+滚轮:缩放图片

     空格+鼠标:拖动图片

     Ctrl+N:新建文件

     Ctrl+Shift+I:选区反选

     Ctrl+鼠标:调动移动工具

     Shift(Alt)+鼠标:选区加(减)选

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

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