恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
云采翻译:sketch官方中文教程(七)
0.0°
2016-10-18 自译外文 教程 原作者: sketch官网 举报 2464 7 6 0

sketch中文官方教程

导出

想要导出你的文件,你可以从菜单栏进入文件(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 代码。

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

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



打印


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

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



导入


支持导入的文件格式

Sketch 支持导入几种不同格式的文件,您可以将文件拖进 dock 上的 Sketch 图标,或者直接拖进一个已经打开的画布里。

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

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

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

               ・SVG:Sketch 支持导入 SVG 文件,但是可能并不是100%,目前 SVG 有一些概念我们还不支持

               ・PDF or EPS: Sketch 支持导入 PDF 和 EPS 文件,但是和 SVG 一样,有一些概念无法支持,文件内容可能无法完整显示。

如果您的 EPS、PDF 或 SVG 文件 Sketch 无法正确导入,可邮件联系 mail@bohemiancoding.com,他们会尝试在下次更新解决这个问题。

不支持导入的文件格式

以下列出了一些平面设计中常用的,但 Sketch 暂时还不支持的文件格式。

                ・PSD:Sketch 只能以位图形式打开 .psd 文件。

                ・AI:Sketch 只能以位图形式打开 .ai 文件。

Image title



更新:2016-10-18

收藏

7人已收藏

CLD_李波

设计师

  • 20

    作品

  • 188

    粉丝

  • 2

    关注

  • 用自动布局的方式设计响应式卡片组件(含sketch文件)
  • 提高工作速度的 10 个 Figma 高级技巧
  • 这个要学起来|格式塔理论中的视觉原则
  • sketch插件安装、常用插件推荐

    猜你喜欢

      2016-10-18 自译外文 教程 原作者: sketch官网 举报 2464 7 6 0

      云采翻译:sketch官方中文教程(七)

      0.0°

      你确定要举报云采翻译:sketch官方中文教程(七)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年10月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      6
      7
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录