Sketch从入门到精通 怎样切图及导出图片尺寸 免费版

picture

怎样切图及导出图片尺寸

在讲这一章之前,先把上一章提到的布尔运算给大家讲一下(如下图) clip_image002

这是顶部工具栏区域的一小部分。布尔运算有四种形式,你可以根据你的需求来选择不同的方式。

合并形状 (Union):合并的结果是会得到两个矢量区域的总和。

减去顶层形状 (Subtract):这一项的结果是顶层矢量的区域会从下一层的图形上移去。

与形状区域相交 (Intersect):与形状区域相交的结果是会保留原图形重叠的部分。

排除重叠形状 (Difference):排除重叠形状的结果是只保留原图形不重叠的部分,它是“与形状区域相交”这一运算的反向。相当于AI里面的相加,相减,合并,交集,是不是更容易理解一些。在图层中,图标也可以用布尔运算(如下图)也是同样的四种形式,使你更好的创作图标。

clip_image004

切图及导出

切图是在做Web设计和APP设计中比较常用,你想把你做的效果图,可以在手机上或者网站实现出来,就需要给程序员们切图文件,这时就需要在Sketch里面切图。举个例子,首先,我先建一个画板,

clip_image006

然后在画板里画一个圆,

clip_image008

现在我想把这个圆在sketch里单独切出来然后导出,怎么做呢?看下图

首先选中这个圆,然后按住快捷键S单击,就会看见选中的圆边缘出现了一个边框,然后注意观察左侧图层区和右侧检查器,会发现分别多了一个带切刀的框(就是切片)和切好的圆。右边的检查器的圆单独变成了一个,这说明图已经切好了。

clip_image010

接下来把切好的图导出成想要的倍数给程序员们。如下图,点击检查器里的中间的那个Export右侧的小加号,就自动出现1x,2x,3x的图,默认是png格式的,一般都要背景是透明的图,所以要导出PNG格式的,然后这时点击工具栏里的Export(也就是导出)

clip_image012­­

就会出现下图的界面,你刚刚要导出的圆已经选好,然后点击蓝色按钮,Export就导出成功了。

clip_image014

怎么样?是不是很简单?

(给大家布置个作业,大家可以练习一下。自己在Sketch里,先新建一个画板,然后画一个矩形,和一个三角形,分别导出来。矩形个三角形在工具栏里,直接可以拖出来,我会截个图,找不到的小伙伴可以看一下。就在工具栏里第一个带框的加号,英文是Insert)。

clip_image016

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/6784/

(0)
iouedioued
上一篇 2015-07-03 11:59
下一篇 2015-07-03 12:11

相关推荐

  • Sketch3.9 终于发布了原生的响应式设计解决方案

    Sketch3.9 终于发布了原生的响应式设计解决方案。

    只需要设置一个属性,便可以快速实现任意尺寸的适配。

    2016-06-27
  • Sketch从入门到精通-Sketch3 颜色填充

    颜色在做设计中是重要又必不缺少的组成部分,颜色有很多变化,丰富的颜色变化会给你的设计加分,Sketch里边,就对颜色有各种填充的效果,下面具体介绍一下,Sketch里边一共有六种填充效果,虽然你平常只用一两种,…

    2015-07-29
  • UE网出品:Sketch从入门到精通[免费精品课程] | 阿西UED&Smiler

    Sketch从入门到精通  讲师:阿西UED Smiler 参加时间:2015年6月24日 17:40 最后更新:2015年6月24日 17:40 适用人群: UI设计师、美工、视觉设计师、 对UI有兴趣的人。 简介 Sketch从入门到精通是由www.iamue.com …

    2015-06-25
  • Sketch从入门到精通-Sketch3四种模糊方式

    现在经常能看到界面上各种模糊效果,或者是背景模糊,然后上面排字,放图片;通常是做背景的时候用到的模糊效果。在Sketch里面就有基本的四种模糊方式,分别介绍一下。 首先是最常见的高斯模糊(Gaussian Blur),…

    2015-08-03
  • 从零开始学Sketch——入门篇

    如果你是一枚交互设计师或者UI设计师,那么你一定知道Sketch这个强大的矢量设计软件;如果你用过Photoshop,那么在你接触了Sketch之后就能了解到这款产品相对于PS的优点,说不定会跟我一样变成一个Sketch的死忠粉。…

    2016-01-06
  • UserFlows一款能在Sketch画板生成流程图的插件

    UserFlows是一款能在Sketch中从画板生成流程图的插件。 定义链接 要定义两个画板之间的链接 - 选择一个图层和目标画板,然后运行定义链接命令(Cmd Shift K)。 添加条件逻辑 通过插件创建和管理条件,轻松显示条件…

    2016-12-08
  • Sketch从入门到精通-Sketch3布尔运算

      在Sketch里面,如果你发现一些基本的图形都不适合你,你想组合或者用更多的图形时,这时候就离不开布尔运算。当然,如果钢笔工具用的熟练的话,用钢笔工具也可以画出自己想要的复杂图形,但有些时候我们其实…

    2015-07-20
  • Sketch从入门到精通 熟悉一下钢笔及各种基本图形的练习 免费版

    上一章节因为涉及到了画圆及各种图形,怕有的小伙伴还是不知道,就在这一章节里仔细的讲一遍,大家也可以更熟悉一下Insert有哪些更多工具有助于设计稿。 第一个是钢笔工具,快捷键是V,可以画出你想要的任意形状。…

    2015-07-03
  • [译]使用Sketch的10个小技巧

    随着Sketch越来越受到广大设计师们的欢迎,在这分享10个Sketch使用小技巧,希望能够帮助到正在学习Sketch的同学提升相关技能。 1、学会“Insert”的快捷键 什么是你在设计中最常用的?创建一个新的Artboard A,插入文…

    2016-07-20
  • 网络和辅助线的使用- Sketch从入门到精通

    设计师一般在作图的时候都离不开网格和辅助线,以前在PS或AI里的时候辅助线你必须手动去调整辅助线的位置,有的时候也难免会有误差或者半像素的偏离。但在Sketch 3里面,辅助线极大的避免了失误,并且提高了效率。 …

    2015-07-13