sketch怎么切图:两种主流操作方案

sketch怎么切图,有两种原生方案,分别是切片工具手动框选、图层直接标记可导出;切片工具适合自定义裁切范围,图层标记适合图标、组件批量输出,可一次性配置1x、2x、3x多倍率,PNG、SVG、PDF多格式,快捷键S调出切片,⌘E快速导出单个,⌘⇧E批量导出全部切片与可导出图层;该方法适用Mac端原生Sketch,Windows网页版Sketch不支持切片工具快捷键,只能用图层标记导出。

sketch怎么切图:切片工具操作流程

按下快捷键S,激活切片工具,点击画布内任意图层,软件会自动贴合图层边界生成切片,也可以按住鼠标拖动,手动画出切片框,自由控制裁切范围。右侧检查器面板可以修改切片名称,名称中加入斜杠能够自动生成子文件夹,用来分类管理切图文件。面板内可添加多组导出配置,选择倍率与文件格式,PNG默认透明背景,SVG优先用于矢量图标。调整切片框时,超出目标元素的区域会被一并导出,多余空白像素需要手动收缩切片边界,避免切图带多余留白。

切片属于独立图层,会出现在左侧图层列表,你可以单独隐藏、锁定或者复制切片,批量复用切片框规格。切片不会改变原有设计图层,仅定义导出区域,删除切片图层不会影响画布上的UI元素。

sketch怎么切图:图层标记可导出操作流程

选中图标、组件、编组等图层,在右侧检查器面板找到MakeExportable,点击启用导出属性。点击加号新增导出项,分别设置倍率与格式,移动端开发一般同时添加@2x、@3x两套PNG,矢量图标额外增加SVG选项。设置完成后,选中图层按⌘E,直接导出到本地,也可以直接把图层从图层列表拖拽到桌面生成图片。编组图层勾选仅导出组内内容,能剔除编组外部背景,得到透明底图标。

切图方式适用场景优势局限
切片工具自定义裁切区域、跨图层组合画面裁切范围自由,不受图层边界限制切片图层多了会打乱图层列表结构
图层标记导出图标、组件批量切图,项目长期维护无额外切片图层,修改源图层切图同步更新裁切边界跟随图层,不能向外扩展范围

这是批量切图首选。

导出前检查透明像素,勾选修去透明像素,自动裁切掉图片四周空白,减少图片体积。如果图标存在圆角蒙版,不要直接用切片框住蒙版外区域,否则导出会带出底层背景图层,需要把图标和蒙版放在同一个编组,开启仅导出组内内容。

插件可以辅助提效,SketchMeasure能批量生成切图附带尺寸标注,摹客、CoDesign插件支持一键上传设计稿并批量输出切图资源。插件属于扩展工具,原生导出功能不需要额外安装,网络受限环境优先使用原生切图。

该方法的适用边界是,当设计稿使用外部图片占位符,图片嵌入模式异常时,图层标记导出可能出现图片丢失,这时改用切片工具框选目标区域,导出稳定性会更高。

导出完成核对文件名称、倍率与背景,确认没有多余背景和留白。

敬慕百科汇集百科知识与游戏文化,带你发现世界的每一个精彩角落。

想要了解更多关于sketch怎么切图的文章欢迎访问:百科