特殊形状的切图处理

切图切得好一定程度上可以使后面写前端网页得过程中更方便快捷。然而切图中并不是所有图形都是规则的，因此有时我们需要对不规则的图形进行特殊切图。
这时就要新建文件，根据需要选择背景内容（如：白色、背景色或者透明），选好选区，将选区拖动到新图层。

圆形切图

圆形图片.png

比如要将上图中的圆形切出来，（新建文件，拖动选区等就不重复说了）方法如下：
1、选框工具-椭圆选框工具（按着shift键，选框变成圆），自行调大小。
2、新建文件时将背景设置成透明，选框工具-矩形选框工具，然后将选区拖动到新图层，在新图层中的使用魔棒工具点击白色区域，如下图所示，即将白色区域都选中，然后delete键，删除白色区域。（这时我们会发现还有一些红色字体，也用选框工具，选中，delete键删除）

魔棒工具.png

保存时选择存储为web格式，保存后的效果图是

透明背景切图效果.png

（这也是将背景设置成透明的一个优势。）

小图标切图

1、如果要把红色圆圈里面的图标切出来，由于图标全是白色，下面的图进行操作。（此图即前面所提到的第2个操作方法后得到的图）

图标.png

如上图，用魔棒工具选中红色区域，delete删除，就得到白色的图标，同样选择“存储为web格式”进行存储。
2、如果方便的话，可以在原设计图中直接使用魔棒工具选中，白色的图标，然后拖动到新图层。这是需要注意一点。如下图所示

魔棒工具shift键.png

（按alt键就是减少选区）

只将背景圆形切出

图片中圆形背景中间还有个图标，那么就要将这个图标抹去。
1、如果图标所在图层与红色圆形所在图层不是同一个，这将图标的图层隐藏，就容易将圆形背景切出。
2.如果图标和圆形背景在同一个图层，那么可使用仿制图章工具，如下图所示。

仿制图章工具.png

当然，还有其他方法，比如用画笔工具、橡皮擦等等，有兴趣可以去了解。
3、可以写一个div，用css3样式代码将圆形效果写出（ border-radius）

类似第三个这样的切图可以自行了解，想学的可以去尝试，如果觉得比较难，最简单的就是找别人帮你切！！！（不过能自己学还是自己学一下）
css3新增了很多样式，也可以用代码将圆形背景写出，这个对前端来说需要掌握。