教程 > iDoc > 基础教程 > 切图

切图

摹客iDoc中,可通过插件在Sktetch、PS和XD中进行切图并上传到iDoc中,一键下载全部切图。

从Sketch、PS和XD中上传切图

通过插件,可以在Sketch、PS和XD中进行切图,并上传到iDoc中。

具体请看教程:

切图压缩

下载切图前,在右侧属性面板中勾选“启用切图压缩”,可将下载的切图体积瘦身50%以上。

切图压缩

下载切图

在右侧面板中选中切图,中间工作区页面会同步选中右侧的切图。点击“下载当前切图”即可下载选中的切图。还可切换平台(iOS、Android、Web)和选择倍率。

下载选中切图

在空白处点击,右侧切图面板展示了该页面内所有切图,按Ctrl键进行多选,点击“下载选中切图”,可下载选中切图;点击“下载全部切图”,可下载全部切图。还可切换平台(iOS、Android、Web)和选择倍率。

切换倍率

 

自动换算不同平台尺寸

在开发模式下,可以一键下载不同平台下的全部尺寸切图(注:输出设备只能是iOS或者Android,不包含Web)。

不勾选“自动换算不同尺寸”和“自定尺寸”下的切图计算规则:

在用摹客iDoc插件上传设计稿时,可以选择将设计稿预设为iOS或Android的某个尺寸。接下来我们以一个iPhone8的设计稿(375×667)中一个200x200px的切图为例,上传时选择iOS @1x。

设计稿上传时尺寸选择的是iOS @1x,所以上传到iDoc画板中默认该切图尺寸是iOS @1x。则下载该切图在iOS设备中的全部尺寸时,iOS @2x和iOS @3x的尺寸分别是200x200px的2倍和3倍。

由于iOS @1x对应Android设备的mdpi,所以下载该切图在Android设备中的全部尺寸时,hdpi和xhdpi的尺寸分别是200x200px的1.5倍和2倍,依次类推。

自动换算不同平台尺寸设置方式

自动换算不同平台尺寸,有以下三种设置方式:

方式一:

选中画板中的图层后,在右侧属性面板,勾选“自动换算不同平台尺寸”;

方式二:

不点击画板上任何图层,在右侧属性面板中选中切图后,在下方勾选“自动换算不同平台尺寸”;

方式三:

点击右上角的“下载”图标,选择“下载所有切图”后,在弹出面板上勾选“自动换算不同平台尺寸”。

计算规则

当勾选“自动换算不同尺寸”后,计算规则和不勾选时略微不同。规则如下图:

在iDoc中切换Android设备,并勾选“自动换算不同平台尺寸”后,下载Android所有尺寸的切图大小如下图所示:

iOS的@3X尺寸

默认情况下,IOS的@2X -> @3X 比例是1.5倍, 比如你的设计稿是750×1334,则@3X会缩放到 1125 的宽度。但是我们知道plus机型的分辨率是1242×2208。

某些情况下如果你希望输出@3X是1242的尺寸,有三种方式可以设置,如下图所示:

方式一:

选中画板上的任意图层,在右侧属性面板勾选“设置iOS @3x尺寸为1242”;

方式二:

当不选中画板上的图层,在右侧属性面板选中任意切图,勾选“设置iOS @3x尺寸为1242”;

方式三:

点击右上角的“下载”图标,选择“下载所有切图”后,在弹出面板上勾选“设置iOS @3x尺寸为1242”。

自定尺寸功能

下载切图时,支持用户自定义切图尺寸,可按照统一的规格下载。

操作方式

勾选自定尺寸后,在每种分辨率类型后输入宽*高的数值,即可设置自定义尺寸。不同分辨率的数值按照其倍率关系自动关联。

自定尺寸1

也可点击重置按钮清空所有输入数值。

自定尺寸2

填充模式

目前提供拉伸和居中两种填充模式,可根据需要选择:

居中:保留原图片尺寸,在设置的尺寸内居中呈现(默认选中)。

拉伸:将原图片等比例缩放以适应自定义的切图尺寸。

自定尺寸3

上一章节 标注
下一章节 柔性工作流