废话不多说,Sketch切图秒get!

用户头像
北京/UI设计师/6年前/1170浏览
废话不多说,Sketch切图秒get!

PxCook x Sketch快速切图教程:休息不止,知识不停~🐶废话不多说,Sketch切图秒get!


● 打开 PxCook 插件 ●


安装好 PxCook 3.9.4 及以上版本后(下图右下二维码长按图片下最新版 😄)。首次开启 PxCook,即已经为您安装好全新的 Flavor 切图插件。打开 Sketch (如果已开启,则需要您重启一下 Sketch,以确保插件被正确加载。) 插件会出现在 Sketch 的右边栏,如下图所示:



● 标记贴图与尺寸设定 ●


①方法:创建和图像尺寸一致的切图


选中想要切图的 图层、图层组 或者 Symbol,然后从界面右下角选择 Make Exportable



②方法 :创建自定义尺寸的切图


选中想要切图的 图层、图层组 或者 Symbol,然后从界面左上角选择 Slice 或按下快捷键 S 激活 Slice 功能,在想要切图的图像区域,画出想要的尺寸即可。



如果想要切出的是背景透明的图层,请将切片和所切图像的图层分组在一个文件夹下。同选择切片并勾选 Export Group Contents Only



● 导出画板与切图到 PxCook ●


①设备和分辨率的选择


在 Sketch 的右侧找到 Flavor 插件工具栏,激活第一个导出工具,弹出如下面板:



设备类型和设计稿分辨率的选项,只会决定标记的切图的生成尺寸,标记的切图将会根据您设置的设计稿分辨率为基准,缩放为当前项目所需的各个尺寸。


例如:您在 Sketch 某个画板中,有个尺寸为 20×20 px 的标记切图,如果您将导出面板的当前设计稿分辨率设置为 iOS 1x,那么该标记切图会被同时输出为 20×20 px 的 1 倍切图,40×40 px 的 2 倍切图,和 60×60 px 的 3 倍切图。又例如:如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x,那么该标记切图会被同时输出为 10×10 px 的 1 倍切图,20×20 px 的 2 倍切图,和 30×30 px 的 3 倍切图。


💡设备类型和设计稿分辨率的选项,并不会影响您导出的图的尺寸。


Android 设计稿同理,需要您根据当前在 Sketch 中的设计稿的尺寸,选择对应的正确的分辨率。

例如:您在 Sketch 中某个画板的尺寸为 375×667 px,其导出到 PxCook 的之后的尺寸也为 375×667 px。


②导出画板和切图到 PxCook


将如下的 Sketch 画板,按照如图所示的设置导出到 PxCook:



在 PxCook 中,进入画板,切换到 开发模式 ,即可在右侧边栏查看到如下的画板及切图数据:


♦️ 总结:至此 Sketch 教程就告一段落啦,东西虽然有些多且杂。但是很实用哈。为以后的工作能节省下不少时间~。切图设置基准分辨率尤为关键!




以上就是本次 Sketch 切图功能的优化成果,

感兴趣的小伙伴们快来体验一下吧!为“产●设●研”而生!

微信关注公众号:像素大厨 PxCook

可获取更多设计资讯和各种作图小技巧


2
举报
|
4
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
金色颗粒质地的平面
平面插画情侣/矢量
城市园林平面布局航拍
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
平面书法字手写
牛奶乳液层次梯田平铺平面
金色颗粒质地的平面
金色颗粒质地的平面
平面花卉图案扁平简约无缝拼接插画
倒计时,海报,平面
平面风格黄绿色系花朵装饰
空的平台平面和自然景观
中国传统纹样创新图案设计
平面设计 吊牌设计
玄关入门地毯印花图案红地毯
金色颗粒质地的平面
水蜜桃和李子的平面水果图案
平面插画设计女孩喝咖啡
平面男孩喝咖啡插画设计
城市园林平面布局航拍
平面设计风格的粉色草莓味马卡龙
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
古风平面仕女与瓷器
牛奶乳液层次平面平铺平面
你可能喜欢
相关收藏夹
大家都在看
登录注册