在Sketch里怎么切图?

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

Sketch里面切图其实非常简单,我们常用的切图有两种,一种是单独对于某个图标,或者界面里的某些元素:另一种就是把效果图也就是每个界面单独切出来给开发们,方便他们看效果图用。但无论是哪种切图,都需要用到切片工具,快捷键 S ,当你按S的时候,画布上的指标就变成类似切刀的形状,说明可以开始切图了,按住S,出现一个选框即你的切片范围,你可以单独在某一图标上切成你想要的大小,切片大小是可以更改的,如下图显示:

1

2

  

第一张图是切片切出的范围区域,下面的图是显示切片的大小坐标和所切区域的预览效果。你还可以更改切片范围。

切整个界面也是一样的,再就是切图的时候,其实也可以不用去刻意拉取你的切片范围,还有一种方式是你按住S切片工具的时候,当指标由箭头变成小刀的形状时,单击一下,会自动切你想切出的区域,尤其是切大片区域的时候,会更快捷一些,更好的提高工作效率。如下图:

3

当被切片选中的时候,所切区域就会出现蓝色的框,证明已被选中。Sketch里面其实默认每个画板都是单独的,当你没有选中任何切图的时候,或者没有进行切片操作的时候,默认的是有几个画板,导出的时候就显示有几个切图。而且整个画板里的界面,是可以直接切的,当你选中某一个画板的时候,默认右侧切片预览区就会显示整个画板的预览区,然后你点Export(即导出)就可以了。导出的时候,可以导出好几种格式,通常我们切出都是png格式的,即背景透明的。但现在好多也用svg的,这个比较好,导出的是矢量的图,做网站的时候通常用的比较多,或者安卓界面里面用到的也很多。还有pdf,eps和jpg。

4

在切图的时候,还要注意,给ios开发们的切图,通常要切@1x ,@2x,@3x的图;给安卓开发们的图也是一样,但在安卓里面显示的是mdpi,hdpi,xhdpi,xxhdpi。

Sketch里面是既可以导出所有切片,也可以选择单独的某一切片,当需要大量切图的时候,一键导出所有的切片就非常有效率。切图的时候要注意切片的位置坐标,一般最好切成偶数值,这样在程序里面的计算比较精确一些。主要就是用好切片工具,就是那个小刀的图形,其次是掌握好层组,即画板与每个元素之间的关系,切完图的时候,对于切片的命名也是很重要的,因为一般切好的图,开发那边是直接放到他们得编程工具里的,如果命名格式不规范,在他们得编程工具里就会出错,所以为了互相更好的协作,严格的要求自己是很有必要的。

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/11198/

(0)
Smiler李想Smiler李想
上一篇 2015-11-29
下一篇 2015-11-30

相关推荐

  • 【干货·扫盲】主屏幕尺寸,主屏分辨率,像素密度,PPI之间到底什么关系?

    今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给大家看…

    交互设计 2015-09-08
  • Sketch从入门到精通-Sketch3 插件的运用

    插件往往是最提高工作效率的,用过Sketch的人,都被Sketch强大的插件所折服,因为真的是太好用了。而且,Sketch还有个专门整合了插件的一个下载器,叫Sketch Toolbox的Mac应用,下载和安装Sketch的利器。 直接在里…

    2015-08-28
  • 使用 Sketch 搭建动态布局

    如果你在设计交互,你可能会经常遇到一些重复性的元素,比如列表中的行,或者网格化元素。尽管Sketch提供了一些方法,通过使用Symbols将一些样式应用到元素中,但如果你想让布局更有适应性或者动态变化,它恐怕就很…

    2017-12-28
  • 【技巧分享1期】好的用户界面设计

    1 尽量使用单列而不是多列布局 单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。最好的做法是用一个有逻辑的叙述来引导用户并且在文…

    2015-10-12
  • 你的产品鸡肋了吗?

    如何保证自己的产品不成为鸡肋,除了成功的商业模式外,只有高频次的使用才能保证用户忠诚度,延长产品生命周期。所以,好的用户体验也就成为了其中非常重要的致胜王牌。

    2016-10-20
  • 移动应用(APP)UI设计规范之尺寸上篇

    作者:玄岳  http://www.zcool.com.cn/article/ZMzc5MTQ0.html

    2015-12-21
  • UI界面中搜索入口的设计

    写在前面: 我以前是学空间设计的,所以对引导性的感知比其他学设计的要更早。其实,设计总就还是一个“万法归宗”的东西。“吸引”——“引导”——“持续”——“欲罢不能”用用户的这种思维去检验自己的作品(交互/UI)是比较客…

    2016-11-07
  • App Store2016年最新审核规则

    编号 中文内容 1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA)、人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同。以下规则和示例旨在帮助开发者的程序能获得 2.1 崩溃的程序…

    UI设计 2016-01-21
  • 怎样做一份让工程师泪流满面的标注

    在搬着小板凳坐工程师 buddy 旁边送果汁送零食的日子里,我受 Google Material Design 的启发,折腾出一套自认提高双方沟通效率的标注规则,心情挺好还为此做了模板,最下面有源文件的下载地址。 是的我曾经也很寄…

    图形用户界面 2015-08-11
  • 小而美:清晰的可穿戴设备界面

    [国外设计第116期] 移动端的设计教育我们要设计得小,如今,可穿戴设备则使我们的设计愈发的小。手表的设计或许听起来吓人,但只要回到设计理论的本源,你就能做出正确的选择。 提到穿戴设备的设计,就要面临一系列…

    2015-12-29