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

相关推荐

  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • 字体的转曲-sketch从入门到精通

    字体在设计中是不可缺少的元素,无论你是设计海报,广告牌,网站,还是手机界面,都离不开字体。字体的运用也是设计中重要的组成部分。尤其是在做手机端界面设计的时候,一个像素都不能差。所以这就涉及到每个元素…

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

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

    2016-07-20
  • 从零开始学Sketch——进阶篇

    从零开始学Sketch——进阶篇 Sketch是一款矢量绘图应用,而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。 在初识了Sketch的界面布局和基础工具之后,我们就可以开始进入高阶的Sketch工具篇学习了。这篇…

    2016-01-06
  • 6个实用技巧提升Sketch使用效率

    Sketch 3 - Bohemian Coding带给我们的这款优秀的设计工具,在速度及灵活性等方面的表现都是其竞争对手难以匹敌的。 我(英文原文作者)自己是一名自由交互设计师,很早就开始使用Sketch了,它已然成为我设计工作流程…

    2015-09-30
  • Sketch从入门到精通-Sketch3 九宫格

    九宫格 在做图的时候,有的时候需要把画面划分几个部分,分别进行设计。因为随着作图能力的提高,规范性和严谨性就需要提高。尤其是网页设计,一个好的网页设计不是杂乱无序的。 所以我们可以用Sketch里的九宫格,…

    2015-08-03
  • Sketch从入门到精通 第一章 初识Sketch 免费版

    第一章 初识Sketch 1. Sketch 是什么? Sketch 是一款非常适合UI界面设计师们使用的矢量绘图应用。集合了PS和AI的优点,很容易上手使用。它可以很方便的进行网页,图标及移动端界面的设计制作和切图。 2. 为什么要…

    2015-07-03
  • Mirror镜像的运用- Sketch从入门到精通

    Mirror镜像这个只针对于设计手机界面的同学来说,比较有用。因为这是一个可以电脑做图和手机显示同步的一个功能。在Sketch的工具栏,你会发现这个Mirror,如下图: 看见了么?怎么样能实现和手机同步呢?首先你要在…

    2015-07-13
  • 在Sketch里怎么切图?

    有了Sketch之后,切图变得越来越简单,之前在Sketch教程里有写过切图方面的教程,但还是有很多人想知道到底怎么用Sketch切图,这篇教程就作为一个Sketch的切图大综合,详细的讲一讲怎样在Sketch里面切图,以及切图…

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

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

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

    2016-06-27