关于sketch切图-如何切出背景透...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权不使用原创授权
20270 10 20 2019-10-28

关于sketch切图-刚接手sketch的新手宝宝们,在切图是肯定会遇到相关的切图问题 :如何切出背景透明的png切图  我这里总结了一下关于切图的两个小经验,希望能帮助到新手宝宝们

sketch切透明png切图及其导出切图


关于sketch切图 ,我这里不墨迹很多文字啦,直接进入正题讲怎么切图啦~~(哼哼,谁还不是个宝宝呢,我也是这么一步一步的学习过来的)


sketch,在切图方面,是有自带工具的——在自定义工具栏中:右击-自定义工具栏 即可找到切片工具。一般我都用快捷键啦:“S”。


切透明png我常用有两种方法:


1、利用切片工具,进行切图。


首先选中要切图的元素,可以看到元素栏我们还没有把图片进行切图 没有切图标记的呢


选中之后,我们点击快捷键“S” ,开始切图~~我们把切片的标记小刀在切图出做标记,这样切图就完成第一步骤啦~~


这样子还没有完全切好图哦,这样子切出的图片可以从右边属性栏里看到切出的图是带底色的,此时切图还缺少精华的一个步骤:


此时切出的图是带底色的图片,需要在属性栏里进行一个操作:将export groups contents only选项勾选上:此时我们会发现属性栏里的切图已经变成透明png啦~~


2、利用属性栏里的导出,进行切图。


同样选中要切图的元素,点击制作导出项,点击“+”号 选择我们需要输出的切片倍数,即可,这个根据自己的需求来设置啦~~



3、切图导出:上传蓝湖。

  我没打广告哈,我平时作图和前端交接都是用的蓝湖,确实很方便。切完图,将设计稿上传到蓝湖里面,可以上传全部画板,也可以传选中的部分画板,这样,我们切好的切图就传到蓝湖上了,前端直接下载切图就可以直接用啦~~



ps 和sketch切图和导出差不多的呢,具体的就不详细说啦~~

经验分享,大家加油~

Powered by Froala Editor

全部评论:10

  • 2023-12-05 17:20

    感恩感恩~~

  • 2023-05-17 10:27

    @风度翩翩的人: 切图和 图标要在同一级 ,给图标和切图编个组,在右边上方就能找到export group contents only这个选项

  • 风度翩翩的人

    2021-03-26 13:03

    @锺灵儿: 嗯嗯,我再去试试~~

  • 锺灵儿

    2021-03-23 18:14

    @风度翩翩的人: 看了一下你描述的问题哈,不是export group contents only 这个选项不存在,是他会出现的条件不符合呢:icon在有背景图有颜色的的前提下,用快捷键按出刻刀工具,然后在我们需要切图的图标上刻画出图标区域,此时刻画出的区域会把背景色也切上去,此时才会出现export group contents only的按钮呢,你再尝试下哈~~~

  • 风度翩翩的人

    2021-03-15 17:57

    我就奇葩,,,为什么我的sketch没有export group contents only这个选项,,,,

  • 锺灵儿

    2021-01-06 18:29

    @MerrySeason: 是不是上面已经自动勾选了export group contents only 会自动去除背景得到透明切图的呢 还有不明白的可以私聊我

  • MerrySeason

    2020-12-25 16:43

    为什么我用右下角+号切图,切图怎么自动修剪了透明像素呢???

  • 锺灵儿

    2020-05-28 12:06

    @Clock_筱: 因该是icon做的时候没有做选择范围的框框所以用切片工具不能识别

  • Clock_筱

    2020-05-28 10:24

    为什么我的sketch里没有切片这个框,所以就没法勾选

  • 锺灵儿

    2020-05-26 13:59

    @: 检查下是不是哪个步骤遗漏了呢

  • 2020-05-26 11:11

    为什么我这样做 不可以

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票