导出

想要导出你的文件,你可以从菜单栏进入 文件 > 导出… (File > Export…) 或者直接单击工具栏中的导出按钮。Sketch的画布是无限的,所以导出文件时,你要告诉 Sketch 你想导出具体哪个部分。

在Sketch 3 里,我们极大改进了导出文件的流程。当你点击工具栏中的导出按钮时,Sketch 会为你列出画布、画板、切片中所有可导出的图层。你可以从中导出部分或全部的图层。值得注意的是,如果你事先选好了图层再点击导出按钮,那么Sketch 会默认的只帮你导出那些图层。

导出图层

Sketch 3 里的新功能是可以无需建立切片而直接导出图层。

图层 VS 切片

导出图层本事意味着画布上其他的元素都不会被一起导出,如果它表面有一个图层或者有一个背景图层,他们也都不会被包含进导出的文件。

这个方法很适用于导出图标或者一个大的设计当中的小元素,但并不适用于导出一整个设计。

导出图层

如果你只想导出一个图层,你可以直接在检查器中实现。先选中图层或组,然后单击检查器底端的 Make Exportable。你会发现检查器立即显示出你将要导出一张原尺寸的图片,没有前缀,并且默认为PNG格式。

你可以单击那个小小的 + 按钮,来添加新的导出尺寸,默认下会是有着 @2x 前缀的2倍大小的图片,但这些都是可以随你修改的。如果你本来就在创作一个 @px 的作品了,你也可以为它添加一个 @2x 的前缀,然后在添加一个 0.5倍大小的导出方式。

值得注意的是, 我们现在支持任意大小的导出了,所以如果你在为 Android 设计,1.5倍大小的导出也是能够实现的。

图层列表

在图层列表中,你会发现这些图层多了一个小刀的图标,说明这个图层时可导出的。下次你再从工具栏中点击导出按钮,这个图层也会和其他切片一起显示在列表当中了。

需要注意,你无需先建立切片也能直接从图层列表导出图层,如果你直接列表中将图层拖到 Finder 或者其他 App 里,Sketch 会迅速的帮你导出一张 PNG 图片。如果按住 option 键,则会将它以 PDF 数据写入剪贴板中。

切片

切片能让你将画布中的特定区域导出为一个文件。一个 Sketch 可以有无数个切片,每个切片都能导出不同的文件。

图层切片

在 Sketch 3当中,切片被视为普通图层。这么做会有很多好处,比如说你可以把想要导出的多个图层编组形成一整个切片,当你移动这个组的时候,切片也会跟着移动。

如果你暂时不想花心思整理画布上的切片,你也可以在图层列表最底下关闭小刀的按钮。

添加切片

你可以进入工具栏的 添加 > 切片(Insert > Slice),并在画布上单击拖动鼠标创建一个新的切片区域。在切片工具中,你也可以直接直接单击一个图层,Sketch 会立即围绕那个图层建立一个新的切片。

命名

你可以为每一个切片单独命名,同时他们也会以这个名字保存进磁盘。

这里有一个很方便的小技巧:如果你在文件名中加入了一个斜杠 (一个"/"),那么Sketch就会自动新建一个文件夹,并把这个文件放入其中。举个例子,如果你将切片命名为 foo/bar.png ,那么Sketch会先帮你创建一个叫做 foo 的文件夹,然后在里面创建一个叫 bar.png 的图片。

多尺寸

Sketch 3 新增了一个功能是可以从一个切片中同时导出多个图片。如果你在为iOS设备做设计,那你会常常想为图标导出1倍或2倍大小的图片,切片工具帮你大大简化了这个步骤,你只需单击检查器中的 + 按钮来添加新的导出命令即可。

每个尺寸的图片都可以定制大小,文件格式和文件名前缀。当你同时导出两个以上图片时就必须要设定前缀,这样才能区分开不同的文件。默认情况下,你添加的第二种导出将会像苹果要求的那样,是一个带有 @2x 前缀的2倍大小图片。但你并不会被限制与2倍大小,你可以以任何前缀名导出任何大小的图片。

仅导组内图层

Sketch 2 当中有一个功能可以导出切片中的某些特定图层,虽然这一开始是非常便于理解的概念,可是一旦你想改变一些元素或者替换一些内容时,这个过程就会变得非常糟糕。

在Sketch 3当中,每个切片都只有一个选择框——仅导出组内图层(Export Group Contents Only),选中这个,就只会到导出那些在组内的涂层,而不会导出表面的或者背景图层等等其他切片内的东西。

修剪

每一个切片中都还包含一个 修剪 选项。选中它之后,每一个被导出的切片中的透明外围都会被剪去。

举个例子,你在文件中定义了一个 30 x 40 px 的切片选区,里面只包含了一个 15 x 15 px 的圆形,与其修改切片选区的大小来贴合这个圆形,不如打开 修剪 选项,Sketch就会自动帮你减去 30 x 40 px 选区内的所有透明部分,最后只留下 15 x 15 px的图像。

文件格式

支持导出的文件格式

・JPG: 照片文件所常用的格式,但并不支持透明度。

・PNG: 如果你画的内容中有透明的像素,这将是最好的选择。

・TIFF: 支持透明度,但这种格式的文件会更大。

・PDF or EPS:  保存矢量对象,目前基本支持。

・SVG: 能很好的保留图形和文本的导出,但是并不支持阴影使用这种格式主要可以让该文件在其他应用中导入。

不支持导出的文件格式

・PSD: Photoshop 文件是封闭且不支持导出的,如果你有Adobe CC的套件,那么你可以将PS文件导出为 .PDF,并导入Illustrator。

・AI: Sketch目前不支持.AI文件,但是Illustrator可以打开从 Sketch 里导出的 .PDF 或 .SVG 文件。

画板

Sketch 3 里的画板无需先创建切片就可以直接导出,只需先添加一个画板的导出尺寸,下次你单击导出时,Sketch 就会帮你也导出画板了。

当你的画布上已经有几个画板了,然后你第一次点击导出,Sketch 会推测你是想导出这些画板,并自动的把他们变为可导出的状态。

CSS 属性

Sketch有一个贴心的小功能,帮助网页设计师将他们的静态原型转化成真实的 HTML 代码。

当你在画布中选中了任意数量的元素,你都可以进入菜单栏中选择的 编辑 > 复制CSS 属性 (Edit > Copy CSS Attributes) ,Sketch便会为你选中的对象声明 CSS 中的边框,填充,渐变,阴影以及文字样式。

Sketch也会自动将软件当中的渐变转化为 CSS 当中的渐变。由于 CSS 中的渐变语法非常纠结,所以这个功能可以帮你节省很多时间。将你的创作从 Sketch 转化为 CSS 真的非常简单。

打印

Sketch 中的画板和切片都是可以打印的。进入 文件 > 打印 (File > Print),你就会得到一个画板列表——如果没有画板的花就会是切片列表。接着会出现一个标准的打印对话框让你设置打印需求。

值得注意的是,我们已经为你设置好了默认的 A4、A5 和 A6 大小的画板,供你直接选择。

sketch导出的html,Sketch导出相关推荐

  1. sketch插件导出html,Sketch插件根据命名导出HTML片段Sketch Emmet

    根据 Emmet 命名方式导出 HTML 片段 安装 下载并解压 Sketch Emmet.zip 双击 Sketch Emmet.sketchplugin 完成安装 使用 按照 Emmet 缩写语法 ...

  2. mac sketch 导出 html,Mac sketch与前端的无缝对接

    知乎问: 设计师用 Mac做设计,Sketch方便快捷效率高,想用 Sketch做设计,并进行设计产出(效果+源文件):但是前端工程师还在使用 PC 进行代码开发,Sketch源文件在 PC 上打不开 ...

  3. Sketch: Creating Vector Graphics Sketch教程:创建矢量图形 Lynda课程中文字幕

    Sketch: Creating Vector Graphics 中文字幕 Sketch教程:创建矢量图形 中文字幕Sketch: Creating Vector Graphics Sketch使矢量 ...

  4. mysql导出csv数据_mysql 导出 csv数据命令

    mysql 导出 csv数据命令 导出 select field1,field2,field3 from tablename into outfile '/home/output1.csv' fiel ...

  5. oracle导入与导出,oracle导入与导出

    1:有四种模式 完整数据库模式(Full) 用户模式(owner) fromuser/touser 表模式 表空间模式 exp scott/tiger grants=y tables=(emp,dep ...

  6. mysql导出d盘_mysql 导出导入数据库

    一.导出数据库 1.进入MySQL目录下的bin文件夹 运行cmd :在窗口输入命令 d: 进入d盘:输入 cd Program Files\MySQL\MySQL Server 5.7\bin 命令 ...

  7. linuxg下c++ 类导出_为什么PDF导出功能在SOLIDWORKS Electrical中不起作用?

    在SOLIDWORKS Electrical项目设计中,当工程师完成图纸后,一般会把图纸打印成PDF文件,用于图纸发布或者生产接线.在最近的版本中,通过导出的方式打印PDF文件,软件提示"P ...

  8. PHP导出Excel环境,php怎么导出excel-使用php导出excel的教程 - 河东软件园

    近日很多用户都在向小编询问同一个问题,那就是在php中如何将数据导出为excel.一般我们在使用这个软件的时候会利用数据导出的方法将数据导出为mysql的形式,有的也会会直接从后台导出!今天我们就来看 ...

  9. ASP.NET 开源导入导出库Magicodes.IE 导出Pdf教程

    基础教程之导出Pdf收据 说明 本教程主要说明如何使用Magicodes.IE.Pdf完成Pdf收据导出 要点 导出PDF数据 自定义PDF模板 导出单据 如何批量导出单据 导出特性 PdfExpor ...

最新文章

  1. Unity 3D学习视觉脚本无需编码即可创建高级游戏
  2. CentOS 安装Apache
  3. 【微信小程序企业级开发教程】小程序的配置详解
  4. C# 语法练习(3): 运算符
  5. ANDROID L——Material Design综合应用(Demo)
  6. NYOJ 16 矩形嵌套
  7. 电脑音响怎么插_厦门靓车港丰田凯美瑞汽车音响改装德国HELIX汽车音响|凯美瑞|音响改装|汽车|内饰...
  8. PowerShell_零基础自学课程_8_高级主题:WMI对象和COM组件
  9. 帝国CMS模板|中国历史网整站数据MIP源码下载、带Tags提取插件
  10. HttpRuntime.Cache的使用经验
  11. 基于ZYNQ FPGA实现图像采集存储显示
  12. Win10关闭windows defender杀毒软件的方法
  13. mybatis当输入参数有多个时的解决方案,Map类型,索引引用输入参数,map输出
  14. 卷积操作中的矩阵乘法(gemm)—— 为什么矩阵乘法是深度学习的核心所在
  15. Graphics samples2
  16. Centos/Linux 源码安装wireshark与tshark任意版本
  17. pm模式 raid_Adaptec RAID PM8060 用户手册.pdf
  18. echart坐标轴添加下划线问题
  19. 如何通过外包平台承接IT项目
  20. slides.jquery.js快速实现轮播图效果

热门文章

  1. 利用C语言编写简易的网络聊天室
  2. leecode5. 最长回文子串--极简思维之中心扩散
  3. EDUP的EP-N8508GS在raspi上使用(二)
  4. 魅族PRO7即将来临,这些功能中你最期待哪一个?
  5. 华硕开机自动进入bios(最终解决方案)
  6. Android 仿微信朋友圈拍小视频上传到服务器
  7. 计算机一级ps在线,计算机一级ps试题及答案
  8. iOS 为app生成下载链接,并生成二维码
  9. 中南林业科技大学2012寒假放假时间安排
  10. JVM学习笔记上(概述-本地方法栈)