切图教程(切图怎么做)

本文主要介绍剪图视频教程(如何)，下面跟着东辰网详细了解一下吧。

作为一名UI设计师，当草稿完成，开发对接后，你需要对设计草稿进行标记，并对图纸进行裁剪，将标记好的裁剪文件交给开发。这时候，就难了。这么多尺寸的图片怎么剪？iPhone有8个版本，更不用说安卓那一堆尺寸了。今天这篇好文章分享一个意想不到的方法，帮你高效切图。

唐不用担心那么多设备，不管iOS和Android手机有多少型号，只要我们知道它的屏幕分辨率，就好办了。

有人会发现一个问题，6S和6Splus的尺寸是多少？因为它们的分辨率和6和6plus是一样的。

从上图我们可以看出，不同的分辨率对应不同的放大倍数，所以在适配的时候会知道怎么切图，@2x表示双图，@3x表示三倍图；上面提到的尺寸图，重点看这个图，iOS和Android的抠图都可以适配。

欲善其事，必先利其器。现在PhotoshopCC2015剪出来了，方便多了，但是对电脑配置要求比较高，不然会卡，所以土豪不要不用担心随便安装。对于低配置的电脑，可以这样做。画图的时候可以用CS6。文件在里面做好之后，你只需要启动CC2014或者CC2015就可以把图纸剪出来了。那个这就是我毕竟我现在在做。

现在让我们让我们开始2014年或2015年的气候变化工作吧。

1.调用首选项命令(Ctr)k并检查启用生成器，这在默认情况下是不够的。

2.文件生成图像资源，这是后期使用比较频繁的一个选项。

这样做的目的是:一方面方便你以后找；另一方面方便我们开发工程师找文件，因为有时候是分工合作，需要开始时间找到对应的文件。

2.命名规则

建议使用以下命名方法:

公式:模块_类别_功能_状态。png

例如:新图标共享nor.png。

描述:最新图标共享正常。png

备注:2折图和3折图后面要加2x和3x，以明确这是一张多重图，如new_icon_share_nor@2x.pngnew_icon_share_nor@3x.png；带下划线的名称必须是_而不是，Android上不支持，这个符号的使用也不是很规范。。png一定不能丢失，因为CC需要这个后缀来输出剪切块，否则它可以不会被输出。

3.常用命名词

4.切割文件大小必须均匀，格式为PNG24。

5、iPhone的3倍图怎么剪？

如图，左边是要剪切的图标，右边是命名、@2x和@3x。从图中可以看到有一个红色的方框。一开始你肯定会疑惑，@2x和@3x唯一的区别就是前面的百分比是150%，后缀变成了@3x。命名没有改变。为什么是150%而不是其他的？

这是对比iPhone6和iPhone6plus的屏幕尺寸得到的，750/1080≈1334/1920≈2/3。因为iPhone5/s和iPhone6的屏幕分辨率是一样的，都是326ppi，所以用的是一组图片，也就是@2x图片。6和6plus的屏幕长宽比为2/3，当5/。

6.如何统一裁剪尺寸？

这是个坑，被人埋了，然后就起来了。当时也是查资料，试了几次想办法。刚开始我在做的时候，很奇怪为什么我的裁剪图被裁剪出来大小不一，有大有小，还有一些乱七八糟的尺寸。

怎么处理？上面第五点可以看到，命名截图旁边有一个黑色的东西。那是什么？有人认为，那是的，那是一个面具。;这是一个面具。使用蒙版可以解决大小不一致的问题。是不是很简单？虽然它很简单，你可以。;不踩过这个坑，你就不会记得这个坑。;我不知道如何处理这件事。让让我们来看看如何做这件事。

这个镂空的尺寸是140*140px。我做的时候用长方形的选择框画了这么大的区域，这样剪切出来的文件居中，画出了参考线。此时，图层是图1的样式。然后，点击添加图层蒙版，图层就变成了图3。还有一个额外的图层蒙版。遮罩内部的白色会被突出显示，黑色部分会被移除。

注:唐不要在整个过程中取消选择，不要不要误触Ctrl(命)D。

这个时候输出，我们就开始输出，因为我们的准备工作已经做完了。我们需要使用下面的CC2014或CC2015的图像生成器。前福利设备的插件工具中启用的生成器必须勾选，然后可以直接操作文件生成图像资源。然后你会看到切割文件旁边有一个文件夹，文件夹的名字一般是文件名资产和资产，也就是你。

安卓呢？？？

唐别担心，安卓已经出来了。我们只需要复制iOS的@2x图片，建立一个文本。文件夹名为android，复制进去去掉名字后面的@2x就行了。有人会问，那是吗？

还记得上面说的5/5s和6/6s的屏幕分辨率是326ppi吗？然而，Androids320dpi分辨率对应1dp=2px，尺寸为720*1280。它们的分辨率比较接近，所以我们可以直接把@2x的图片分享给Android，但是只需要去掉后面的@2x，提供一组剪切图就可以了。至于其他Android尺寸，我们就交给Android开发工程师了，他们会在9:00之前进行适配。

不过需要注意的是，第九点是有限制的，一般适用于按钮、对话框、背景之类的地方。在应用不规则图标时，如果大屏幕中存在虚边，则需要将其切割成大图进行开发和替换；当然，也可以使用切割器进行输出裁剪，但需要移除。png命名后，根据个人习惯选择输出软件。

作为一名UI设计师，当草稿完成，开发对接后，你需要对设计草稿进行标记，并对图纸进行裁剪，将标记好的裁剪文件交给开发。这时候，就难了。这么多尺寸的图片怎么剪？iPhone有8个版本，更不用说安卓那一堆尺寸了。今天这篇好文章分享一个意想不到的方法，帮你高效切图。

唐不用担心那么多设备，不管iOS和Android手机有多少型号，只要我们知道它的屏幕分辨率，就好办了。

有人会发现一个问题，6S和6Splus的尺寸是多少？因为它们的分辨率和6和6plus是一样的。

从上图我们可以看出，不同的分辨率对应不同的放大倍数，所以在适配的时候会知道怎么切图，@2x表示双图，@3x表示三倍图；上面提到的尺寸图，重点看这个图，iOS和Android的抠图都可以适配。

欲善其事，必先利其器。现在PhotoshopCC2015剪出来了，方便多了，但是对电脑配置要求比较高，不然会卡，所以土豪不要不用担心随便安装。对于低配置的电脑，可以这样做。画图的时候可以用CS6。文件在里面做好之后，你只需要启动CC2014或者CC2015就可以把图纸剪出来了。那个这就是我毕竟我现在在做。

现在让我们让我们开始2014年或2015年的气候变化工作吧。

1.调用首选项命令(Ctr)k并检查启用生成器，这在默认情况下是不够的。

2.文件生成图像资源，这是后期使用比较频繁的一个选项。

这样做的目的是:一方面方便你以后找；另一方面也方便了我们开发者。石成找文档，因为有时候是分工合作，需要在开始时间找到相应的文档。

2.命名规则

建议使用以下命名方法:

公式:模块_类别_功能_状态。png

例如:新图标共享nor.png。

描述:最新图标共享正常。png

备注:2折图和3折图后面要加2x和3x，以明确这是一张多重图，如new_icon_share_nor@2x.pngnew_icon_share_nor@3x.png；带下划线的名称必须是_而不是，Android上不支持，这个符号的使用也不是很规范。。png一定不能丢失，因为CC需要这个后缀来输出剪切块，否则它可以不会被输出。

3.常用命名词

4.切割文件大小必须均匀，格式为PNG24。

5.iPhone的三重图怎么切？

如图，左边是要剪切的图标，右边是命名、@2x和@3x。从图中可以看到有一个红色的方框。一开始你肯定会疑惑，@2x和@3x唯一的区别就是前面的百分比是150%，后缀变成了@3x。命名没有改变。为什么是150%而不是其他的？

这是对比iPhone6和iPhone6plus的屏幕尺寸得到的，750/1080≈1334/1920≈2/3。因为iPhone5/s和iPhone6的屏幕分辨率是一样的，都是326ppi，所以用的是一组图片，也就是@2x图片。6和6plus的屏幕长宽比为2/3，当5/。

6.如何统一裁剪尺寸？

这是个坑，被人埋了，然后就起来了。当时也是查资料，试了几次想办法。刚开始我在做的时候，很奇怪为什么我的裁剪图被裁剪出来大小不一，有大有小，还有一些乱七八糟的尺寸。

怎么处理？上面第五点可以看到，命名截图旁边有一个黑色的东西。那是什么？有人认为，那是的，那是一个面具。;这是一个面具。使用蒙版可以解决大小不一致的问题。是不是很简单？虽然它很简单，你可以。;不踩过这个坑，你就不会记得这个坑。;我不知道如何处理这件事。让让我们来看看如何做这件事。

这个镂空的尺寸是140*140px。我做的时候用长方形的选择框画了这么大的区域，这样剪切出来的文件居中，画出了参考线。这时图层是图1的样式，然后，点击添加图层蒙版，图层就变成了图3，多了一个。在图层蒙版中，蒙版内部的白色被高亮显示，是要保留的区域，黑色部分是去掉的部分(去掉黑色，剩下白)。白域的大小决定了你的剪切文件的大小，从而解决了剪切文件大小不统一的问题。

注:唐不要在整个过程中取消选择，不要不要误触Ctrl(命)D。

这个时候输出，我们就开始输出，因为我们的准备工作已经做完了。我们需要使用下面的CC2014或CC2015的图像生成器。前福利设备的插件工具中启用的生成器必须勾选，然后可以直接操作文件生成图像资源。然后你会看到切割文件旁边有一个文件夹，文件夹的名字一般是文件名资产和资产，也就是你。

安卓呢？？？

唐别担心，安卓已经出来了。我们只需要复制iOS的@2x图片，然后建立一个名为Android的文件夹，复制进去，去掉名字后面的@2x就可以了。有人会问，那是吗？

还记得上面说的5/5s和6/6s的屏幕分辨率是326ppi吗？然而，Androids320dpi分辨率对应1dp=2px，尺寸为720*1280。它们的分辨率比较接近，所以我们可以直接把@2x的图片分享给Android，但是只需要去掉后面的@2x，提供一组剪切图就可以了。至于其他Android尺寸，我们就交给Android开发工程师了，他们会在9:00之前进行适配。

不过需要注意的是，第九点是有限制的，一般适用于按钮、对话框、背景之类的地方。在应用不规则图标时，如果大屏幕中存在虚边，则需要将其切割成大图进行开发和替换；当然，也可以使用切割器进行输出裁剪，但需要移除。png命名后，根据个人习惯选择输出软件。

了解更多剪图视频教程(如何剪)相关内容请关注东辰网。