Sketch

Sketch简单介绍

• 简介

  Sketch 是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。对于绝大多数的数字产品设计，Sketch 都能替代 Adobe Photoshop，Illustrator 和 Fireworks。

• Sketch VS Photoshop
  

  • Sketch：接近网页渲染效果 ,Photoshop：几乎没有网页样式渲染
    
  • Sketch: 缺少快捷键 photoshop：大把大把的快捷键
    
  • Sketch: 文档较小 Photoshop: 文档非常大
    
  • Sketch：运行起来非常快 Photoshop: 其实挺慢的
    
  • Sketch：一个文档，多个画板 Photoshop: 一个文档，一个画板
    
  • Sketch：轻量级软件 Photoshop: 重量级软件
    

  总结:Setch是一个为网页设计和UI设计而打造的软件，但是无去完全替代PS,PS是一个优秀的图片处理软件，但是在U设计和网页设计上并不顺手。

Sketch安装

• 官网：https://www.sketchapp.com/
• 初识软件界面
  
  • 软件推荐使用的教程、云服务等
  • 最近打开过的文档以及新建空白文档
  • 可以选择从模板新建（IOS、APP、安卓设计模板、网页设计模板）
• 汉化
  汉化插件地址：https://oursketch.com/plugin/sketchi18n
• 进入sketch
  

界面详解

• 图层

  图层是 Sketch 中最基本的构成单位。

  • 添加图层

    添加图层最简单的方式便是直接从工具栏选择一个标准图形。比如选中矩形工具，光标会变成一个右上角有个小矩形的十字图案。这时你只需在画布上单击并拖动鼠标来添加你想要的形状。松开鼠标，随即完成这个矩形，并开始编辑它。

    • 按住 shift 键来绘制等边图形
    • 按住 option 键来从中心绘制图形，而不是从左上角绘制。
  • 选择图层
    • 同时选择多个图层

      你可以按住键盘上的 Shift 键来同时选择多个图层，当你点击其他图层时，之前选中的图层也会为你保留。

  • 编辑图层

    双击一个图层，或者单击工具栏中的编辑按钮就可以进入图层的编辑模式。
    可以单击图层外任一点，或者按下 Return 键或 Escape 键，来随时退出图层的编辑模式

  • 改变大小
    • ⌘→会将图层宽度增加 1px
    • ⌘←则会将宽度减少 1px
    • ⌘↓ 和 ⌘↑则分别将长度增加和减少 1px
    • 如果同时按住 shift 键，每一次更改的数值将会变成 10 px
• 图形

  在你的文件中最常见的图层应该就是图形了。Sketch 提供了多种不同的基本图形供你选择：圆形，矩形，星型等等。这几个图形中会有几个有趣的额外选项，比如星型和圆角矩形。

  • 图形编辑

    每当你绘制一个新的图形或是编辑一个现有的图形，你其实都是在和点做交互，你在屏幕上看到的是 Sketch 将这些点连接起来的线。有时是直线，有时是曲线。

  • 布尔运算

    如果Sketch的标准图形中没有你想要的图形，那就需要你自己创作了。你的第一个想法也许是用矢量工具来手绘出来，然而你会发现很多复杂的图形都可以轻易地被拆分成基本的图形，布尔运算正是为了帮你实现这一点——将几个基本图形结合成一个复杂图形。

    

    • 合并形状 (Union)：合并的结果是会得到两个矢量区域的总和。

    • 减去顶层形状 (Subtract)：这一项的结果是顶层矢量的区域会从下一层的图形上移去。

    • 与形状区域相交 (Intersect)：与形状区域相交的结果是会保留原图形重叠的部分。

    • 排除重叠形状 (Difference)：排除重叠形状的结果是只保留原图形不重叠的部分，它是“与形状区域相交”这一运算的反向。

  • 蒙版

    Sketch里的蒙版可以让你有选择性的显示出图层的一部分。比如说在一个图片上圆形蒙版，那么这张图片就只会显示出圆形内部的内容。

    • Outline Mask（普通蒙版）
      • 首先在Sketch中导入想要处理的头像图片
      • 绘制一个圆形，位于头像图片上方，需要注意的是，圆形的大小不可超过图像的大小，因为超过遮罩内容后，超出的部分会显示Mask的内容，失去遮罩的效果。
      • 选中头像图片和圆形，在图像上右键点击，在弹出的菜单中选择“Mask(蒙版)”即可
    • Alpha Mask
      • 按照普通Mask的方式先生成普通的mask，然后在组合中选中mask，再在功能菜单中依次选中“Layer”→“Mask Mode”→“Alpha Mask”
      • 变更为Alpha Mask，我们就可以调整 Mask的透明度，对图像进行进一步的处理，选中Mask，再在检查器Fills中，点击fill上方的颜色选择器，再调整透明度即可。