在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

相关推荐

  • 1989-2014 网页设计的演变

    转载:hejidaren 2015.03.13 www.shejidaren.com⤴ 估计很多做网页的同学还不了解网页的历史,它是什么时候出现的?而那时的网页又是怎样子的呢? 如果想了解下网页设计的简史,请往看吧,我建议每位网页设计师都应…

    2015-03-16
  • UI界面中搜索入口的设计

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

    2016-11-07
  • 【Material Design】Chrome iOS版微交互创新(下拉管理tab)

    平时在手机上主要用Safari,今天用Chrome时下意识的手指下拉滑动,发现已经可以通过下拉操作来管理tab,而且不仅仅是下拉刷新,还有进一步的优化和创新: 直接下拉是刷新当前tab 下拉并往左滑可打开新的tab 下拉往…

    2015-08-19
  • iOS和Android 界面设计尺寸规范

    iOS和Android 界面设计尺寸规范 摘要:刚开始接触UI的时候,碰到的最多的就是尺寸问题,什么画布要建多大,文字该用多大才合适,我要做几套界面才可以?什么七七八八的也着实让人有些头疼。   废话不多说,希望大家…

    2015-01-13
  • Sketch 一定要会的那些快捷键

    Sketch的快捷键功能一般,不能自定义不说,关键的有点常用的快捷键都没有设置,所以我们就需要更好的利用好这些有快捷键的功能,今天我就来说下这些常用的快捷键   sketch的快捷键功能一般,不能自定义不说,…

    2015-04-20
  • 明年的,网页设计趋势!

    是时候展望一下未来了。2014年涌现了许多令人印象深刻的网页设计趋势 ,幽灵按钮越来越多,视差滚动也已经成熟,单页设计也成为了诸多设计手法的重要载体,而逐渐多起来的免Coding网页设计平台也开始造福于设计师了!

    2014-12-27
  • 写实派 VS 扁平化?这事还要讨论下~

    编者按:扁平与拟物两派之争,从来都是话题之王,今年扁平化 势力越来越强盛,于是有设计师喊出这个话题该终结了。现在拟物是华山剑宗一脉,虽然气象衰微,仍有老罗这个风清扬在坚持,今天令狐冲@牛MO王涵 小哥为其正名,孰对孰错不要紧,争出个美好就行。

    2015-01-05
  • 互联网公司官方标志Logo的颜色选择依据

    小编导读 : 颜色的作用,就是在图形都追求尽可能简约的时候,又可以保持企业标识的高度识别性。

    2014-12-28
  • UI设计中字体的历程及注意事项

    字体作为界面设计的一个元素,对用户的阅读体验起着至关重要的作用。本文是 UI 设计师 Viljami Salminen 分享的用户界面字体设计的基本规则和技巧。 早在 2004 年,我才刚开始工作的时候,sIFR 非常火。sIFR 是由 S…

    UI设计 2016-11-14
  • 玩转中性灰 轻松调颜色

    数码图像是由红绿蓝(RGB)3种基本颜色构成的;当其中某个颜色数值偏高就会造成偏色现象,这是每个摄影师都会遇到的坏运气。大多数人只凭肉眼来判断、调整图像的偏色问题,其实这是不准确的。对此,小编本期为你着…

    2016-06-21