美文网首页
废话不多说,Sketch切图秒get!·

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

作者: PxCook像素大厨 | 来源:发表于2019-10-08 15:04 被阅读0次

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

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

相关文章

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

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

  • iOSapp上线所需图片尺寸

    废话不多说,直接搞图

  • 多说废话

    心理学家发现:一个人说的话若90%以上是废话,他就快乐。若废话不足50%,快乐感则不足。在交流中,没有太强目的性的...

  • 多说废话

    今天是2022.2.11日,至少在表现上,我平时就是一个话不多的人,一上台说话就紧张,我喜欢灵光乍现,自然的感觉,...

  • 多说废话

    今天在微信公众号上看到一篇文章,内容主要是说多说废话可以让人感觉更快乐。而且人在感觉快乐之后也更愿意说废话,这样就...

  • sketch

    本篇笔记主要记录sketch的相关知识点。 如何切图今天想使用sketch进行切图,很简单,参考这篇blog 就可以了

  • 原生JS的Ajax请求

    废话不多说直接代码走起: //原生JS的ajax请求 var Ajax={ get: function(u...

  • selenium 自动化打开目标网页没数据? 看看这个设置有没

    废话不多说,直接上码: 废话不多说,点波关注不迷路,最近会写逆向文章。

  • iOS[swift] 模拟摩拜单车APP 地图覆盖物动画特效

    效果图: 废话不多说直接上代码:

  • miss Jiang

    To miss Jiang sketch插件 微信设计团队Sketch的工具集一键多尺寸切图假数据填充sketch...

网友评论

      本文标题:废话不多说,Sketch切图秒get!·

      本文链接:https://www.haomeiwen.com/subject/obpbpctx.html