photoshop 切图技巧

仅供学习,转载请注明出处

切图介绍

当在前端开发或者某些图片需要切下来的时候,可以使用photoshop的切图功能。

从京东页面截取了一下素材页面

photoshop 切图技巧_第1张图片

下面先看看切图工具

知道了切图工具之后,先来切单张图片来看看。

单张图片的裁剪

photoshop 切图技巧_第2张图片

选择了Logo之后,双击则裁剪下来,如下:

photoshop 切图技巧_第3张图片

保存导出图片,如下:

photoshop 切图技巧_第4张图片

这是用裁剪工具的处理方式,下面再用另一种方式。

使用矩形选框工具进行裁剪

使用矩形选框工具画出蚂蚁线

photoshop 切图技巧_第5张图片

那么如果觉得还要调整一下蚂蚁线的大小,该怎么做呢?

选择 --> 变换选区,调整蚂蚁线的大小

photoshop 切图技巧_第6张图片
photoshop 切图技巧_第7张图片

图像 --> 裁剪, 裁剪图片

photoshop 切图技巧_第8张图片
photoshop 切图技巧_第9张图片

然后导出保存图片即可。

好了,上面讲的都是单张图片的裁剪。下面来看看如何批量切下多张图片。

使用切片工具批量切图

那么下来看看切片工具在哪里

photoshop 切图技巧_第10张图片

可以看到这有切片工具和切片选择工具,其中切片工具是拿来定位需要切的图像,而切片选择工具是用来选择的,当需要删除某些切片图像,则可以使用。

小试切片工具看看

photoshop 切图技巧_第11张图片

框住需要切的图片还可以拖动来调整大小,但是有时候怎么拖动都不够准确的话,可以双击切片范围,填写需要切片的范围大小,如下:

photoshop 切图技巧_第12张图片

同时在调整大小的时候,还应该写上到时候导出保存图像的文件名称,如下:

photoshop 切图技巧_第13张图片

再切多一个图像看看

photoshop 切图技巧_第14张图片

再切个购物车的图像

photoshop 切图技巧_第15张图片

好了,下面来看看如何导出切图

photoshop 切图技巧_第16张图片
photoshop 切图技巧_第17张图片

进入该界面之后,就要每个切图都点击之后设置一下格式,如下:

photoshop 切图技巧_第18张图片
photoshop 切图技巧_第19张图片
photoshop 切图技巧_第20张图片

所有图片选择完毕格式之后,点击存储

photoshop 切图技巧_第21张图片
photoshop 切图技巧_第22张图片

下面到存储的目录看看,如下:

photoshop 切图技巧_第23张图片

可以看到自动生成了一个images的目录,如果已有这个目录,则会自动保存到该目录中。看下保存的图片,如下:

photoshop 切图技巧_第24张图片

这里如果还要将背景透明化的话,就需要单张图片再抠一下。

从上面的操作就已经可以批量多张切图了。


2019年全套Java、Android、HTML5前端、Python、大数据视频,价值数万资源大放送

13423234-c0c42aa68e0918e7.png
13423234-ae2c4439a325a212.png
13423234-25dbf05e37bf41e3.png

寻找资源的地址如下:

扫描微信公众号

13423234-84d34904afe20360.png

寻找价值数万的视频资源

13423234-65e6b7220e3f8f9f.png

你可能感兴趣的:(photoshop 切图技巧)