UI切图一般都会用到专门的软件,比如我们用的摹客,Sketch、Adobe XD、PS的设计稿都支持,设计师只需在设计稿上进行切图标记,然后用摹客的插件上传到平台,就可以自由下载和使用切图了。以PS的插件为例:
1.安装摹客的PS插件,安装好之后在PS的「窗口>扩展功能」找到摹客插件,选择并打开:
2.标记切图:在完成的设计稿上,选中需要切图的图层或编组,点击「标记切图」。当图层或编组的名称前增加了“-e-”,「标记切图」变为「取消切图标记」,就可以了。
3.标记切图后,点击插件的上传按钮,开发工程师就可以在摹客平台自主下载不同尺寸和平台的切图了。
摹客的这些切图和标注等功能都是免费的,可以使用。
首先,下载切图前,在右侧属性面板中勾选“启用切图压缩”,可将下载的切图体积瘦身50%以上。
1、在右侧面板中选中切图,中间工作区页面会同步选中右侧的切图。
2、点击“下载当前切图”即可下载选中的切图。
3、还可切换平台(iOS、Android、Web)和选择倍率。
4、在空白处点击,右侧切图面板展示了该页面内所有切图。
5、按Ctrl键进行多选,点击“下载选中切图”,可下载选中切图;
6、点击“下载全部切图”,可下载全部切图。
7、还可切换平台(iOS、Android、Web)和选择倍率。
如果你想单独下载PNG、SVG、WebP或JPG格式的切图。选中切图,在右侧属性面板中,勾选其一即可。同时勾选后,会将四种格式的切图都下载下来。可根据需要自由选取格式下载。(注:如果有些小伙伴遇到浏览器不能下载webP格式的问题,可以切换到Chrome再尝试下载)