在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

相关推荐

  • 苹果也中枪!拿什么拯救尴尬的UI界面?(一)

    你是否体验过死气沉沉的交互界面?或者你又是否曾感到自己设计的UI界面总是缺了点什么?如果你经历过上述的情况,那么你应该就体验过“尴尬”的UI界面。收下这篇全是干货的文章,拯救你的尴尬症! “尴尬”的UI界面就好…

    UI设计 2015-09-17
  • 下一个转场,动画见

    好的动画转场能够提升用户体验,今天翻译的文章将说明动画与用户体验的关系,以一些精彩的动画转场案例。以下是译文: 在设计数字产品时,为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上…

    2015-07-06
  • 如何实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6,iOS平台尺寸适配问题终于还是…

    2015-11-17
  • 最火的Sketch 的开发商 Bohemian Coding 是怎样一个公司?

    TL;DR: Bohemian Coding 是一个高效务实而且懂得做产品的小团队。但也因为团队小开发实力有限主打产品 Sketch 仍存在不少问题。先从这个小公司的历史说起。Bohemian Coding 在 2008 年成立,主要专注于开发 Mac 软…

    2015-06-29
  • 【颜值已爆表】00io.com-盘点2014最精彩的移动APP动画UI

    原文导读: On the third day of The Highlight 2014, we’re bringing you our picks of some of the best UI animations we’ve seen in apps and across the web. Apps have been a UI playground for quite some …

    2015-01-14
  • 人机交互 (HCI) 交互设计 (交互设计) 的区别是什么?

    作为一个PM当然非常需要注重产品在使用过程中的一些交互体验,可是广义的人机交互和交互设计又有什么区别呢?让我们来看看知乎里别人都是怎么回答的吧。

    2014-12-30
  • Material Design 官方演示视频

    [button type="primary" text="Material DesignPDF 中文手册下载地址" url="https://www.iamue.com/7512" open_new_tab="true"]  

    Material Design 2015-08-07
  • 有凭无据——论登陆界面密码可见的重要性

    作者简介:Luke Wroblewski是一个界面设计师、战略家及作家(Site-seeing: A Visual Approach to Web Usability 一书的作者 )。现在他的工作是 Yahoo! 的首席设计师(Principal Designer),以及 LukeW Interface …

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

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

    2015-08-03
  • 圣诞节恶搞阳狮集团首席执行官

    嘿,节日里,当别人家的领导都在台上长篇大论,又是回顾又是展望为全体员工注射一波又一波的鸡血,你猜......广告公司的大佬们都在干嘛?事实上从2013年开始,阳狮集团的CEO莫里斯,都会找点乐子,不只是和idea漫天飞的创意人,更拉拢网友们,玩一场High翻天的游戏。

    2014-12-28