切图(切图软件)

photoshop怎么切图

　　1.传统切图

　　(1)打开一个psd文件，选择ps左边菜单栏的裁剪工具，选择切片工具。首先我们对这个psd文件进行分析，有意识的将其划分成几个选区，然后通过鼠标的拖拽用切片工具将我们所需要的图案切下来。

　　蓝色标号的切片是我们手动选择的切片，灰色标号是自动生成的切片，然后导出这些切图，选择文件—>导出—>存储为Web所用格式，保存到你要用的文件夹里。

　　问题：观察上述操作，我们会发现这样一个一个图案切太麻烦耗时了，如果一个电商网站要你切几百个图肿么办?于是有下面一个较为方便的办法：

　　(2)一般设计师在设计的时候通常会用到参考线，那我们也可用参考线来简化切图操作，首先选定你要切的某个图案的图层，然后用鼠标拖动左部或顶部的标尺将其拉到该图案的边界，该边界会自动吸附参考线，因而比较准确，这样这个图案的参考线就设置好了，同理再去设置其他图案的参考线

　　由于参考线密集，会出现很多我们不需要的切片，我们可以点击鼠标右键删除不需要的，我们发现像这样一次性切图太累了，要删除很多不用的切片，所以建议将psd文件进行裁剪一块一块切，然后关闭参考线检查切图。最后将切片导出到文件夹里。

　　以上就是传统切图方式，比较麻烦耗时且不精准，所以我们使用计算机进行精准切图。

　　2.精准切图

　　下面我们来用photoshop的'脚本进行一种更加快捷精准的切图方法。它的优点在于，自动化切图省时省力，计算机自动计算，尺寸更精确。

　　首先打开一个psd文件，选择文件—>导出—>将图层导出到文件—设置其属性，选择存储位置和保存类型，勾选透明区域，交错，裁剪图层，最后运行导出，这个过程需要等几分钟。建议还是一块一块区域切。

　　3.photoshop CC版本的精准切图—自动切图

　　(1)首先我们选择一个需要切的图案，选择其图层。然后设置参数，选择编辑—>首选项—>增效工具—>勾选启用生成器，点击确定。选择文件—>生成—>图像资源。我们发现在psd文件所属目录下会生成一个空的.asts文件夹，最后我们将该图层的名字后缀改为.png，会发现asts文件夹里多出了我们切的图案，这样一个图案就切好了。

　　(2)在(1)的基础上，很容易导出SVG格式，只需要将该图案所在的图层名字后缀改为.svg就可以。

UI中的“切图”是什么意思？为什么要切图？

切图是设计师交付给开发的产物之一，设计稿完成后，设计师需要将其切成便于制作成页面的图片。但因为开发经常需要不同平台不同尺寸的切图，如果全部由UI来做，不仅费时费力，可能还会因为细微的差距造成开发不能很好的还原设计稿。

所以可以用摹客之类的专业工具来自动切图。UI把Sketch、Adobe XD、PS的设计稿进行切图标记，上传至摹客后，开发就可以自主下载不同平台不同尺寸的切图和使用了。

扩展资料：

切图用于完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具 把自己所需的切成一张张小图，然后前端开发用DIV+CSS完成静态页面书写，完成CSS布局。

切图大家都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，首先处理的是什么类型的页面图片型（EDM 或活动着陆页等）、图文型（门户网站或电商网站等）、界面型（Web App 等），把图片切出来这个过程是叫切片。

参考资料来源：百度百科-切图

ps切图怎么切

ps切图方法是：
1、在pS中打开图片。
2、选择切片工具。
3、右键图像界面--划分切片。
4、在宽度和高度上分别输入需要划分的数量。
5、存贮为Web和设备所用格式。

ps怎么快速切图步骤

ps切图的方法是：
1、在PS中打开图像。
2、选择切片工具。
3、右键图像--划分切片。
4、输入宽边切片数和高边切片数。
5、确定。
6、存贮为Web和设备所用格式。
7、此时，它会在存贮路径上自动创建一个文件夹，把所有的切片按顺序编号。

photoshop怎么切图

PS自带有切片工具，不过用起来比较麻烦，如果是交付UI设计稿，可以用摹客这样的免费在线切图工具，可以自动生成不同尺寸不同分辨率的切图，也支持切换不同的平台，对于设计师来说比较省时省力。
以下介绍用摹客的插件来完成photoshop切图的步骤：
1.在摹客官网下载安装摹客 PS插件，插件安装好后打开PS，在「窗口>扩展功能」找到摹客插件，选择并打开。
2.登录后选择项目和分组。
3.选中百需要切图的画板、图层或编组，点击「标记切图」。
选中目标名称前出现“-e-”，「标记切图」选项变为「取消切图标记」，此时切图操作便完成了。(注意：标记切图只需标记需要切图的图层，标记无用的切图过多可能会导致上传失败。)
4.点击倍率下拉框度，根据设计稿的画板大小，选择设计稿对应的倍率。例：750px*1334px的设计稿对应 @2× 。
5.点击「上传所选画板」或「上传全部画知板」，一键将设计稿上传至云端项目中。
6.点击「查看项目」打开设计稿，在“开发”模式中，即可一键下载选中切图或所有切图。

使用摹客切图，可快速切换平台（iOS、Android、Web）和选择倍率，支道持自定切图尺寸和切图压缩，非常方便。

讲的“切图”到底是什么意思

切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。