从零开始学Sketch——入门篇-b

若是你是一枚交互设计师或者UI设计师，那么你必定知道Sketch这个强大的矢量设计软件；若是你用过Photoshop，那么在你接触了Sketch以后就能了解到这款产品相对于PS的优势，说不定会跟我同样变成一个Sketch的死忠粉。

扁平化设计的流行和屏幕分辨率的提高推进了Sketch这款软件的流行。

什么是Sketch

Sketch——矢量绘图应用

Sketch是一款矢量绘图应用，而矢量绘图无疑是目前进行网页、图标以及界面设计的最好方式。

Sketch有如下特色：

• 矢量文件，不失真；
• Symbol（图形样式）和Style（文本样式）功能，有利于批量修改和复用；
• 每一个图层都支持多种填充模式（Fills能够添加/隐藏填充效果）；
• 多种尺寸导出功能，可导出部件；
• 自动保存全部历史记录，便于追溯修改。

可是Sketch也不是十全十美的，好比它对于位图的处理能力就远不及PS。但这并不影响它成为一款优秀的设计软件。

Sketch界面

图片来源：极客学院ERICYU

Sketch的界面重要包含五部分的内容：page，layer，画板，检查器和工具栏。

• Page：页面管理；
• Layer：页面下的图层；
  • 蒙版：图片遮罩效果（右键，选择use as a mask）

Step 1 导入图片+画出一个正圆

导入图片+画出一个正圆

Step 2 将图片置于正圆之上，并右键选中圆形，点击“USE AS A MASK”

将图片置于正圆之上，并右键选中圆形，点击“USE AS A MASK”

Step 3 完成! 注意把圆形的边框设置为透明。

完成，注意把圆形的边框设置为透明

布尔运算——图层之间的关系
在刚刚的头像下面，制做一个个性标签，运用图层之间的布尔运算。

画两个如出一辙的圆形，其中一个圆形与矩形造成substract的关系。
（只须要在Layer中拖拽圆形至矩形便可）

• Artboard：画板，快捷键A，内置了多种尺寸的画板；

Artboard内置画板

• 检查器：

  • 通用属性：可调整大小。
  • 样式属性：填充（颜色、图片），模糊、渐变、阴影等效果。

• 工具栏
  右键工具栏选择customize能够自定义工具栏。

自定义工具栏

Sketch基础工具

添加、选择、移动图层

添加图层

当你按住Shift键添加图层时，建立的是正圆或者正方形或者正多边形。
按住COMMAND+D能够批量复制图层。
按住Alt键能够复制一个图形。
能够将图层归为组。

图形的编辑

• 点的控制手柄
  当建立一个矩形时，双击四个角上的锚点能够选择不一样类型的手柄。

图形点的控制手柄

• 蒙版
  • 限制蒙版：不但愿文字被蒙版所裁切，能够右键点击“Ignoring underlying mask”。

在蒙版上建立文字，避免模板限制文字超出蒙版区域

• ALPHA蒙版
  经过设置ALPHA模板，可让图片拥有渐变效果。

Step 1 选择Mask的模式

设置ALPHA蒙版

Step 2 选择渐变方式

fills选中渐变样式

• 剪刀工具和复制旋转工具
  • 剪刀工具：能够剪切矩形的一条边，让它变成一个开口的矩形；
  • 复制旋转工具，能够获得一个图形的360度旋转复制后的效果，以下图：

旋转复制效果

文本处理

• 运用TEXT STYLE能够复用文字样式

text style

• 将文本转换为轮廓（矢量）
  将文本的一笔一划都变为path。

将文本转换为轮廓

转化后，可使用渐变做为文字样式。

图片编辑

• 位图编辑
  • 高斯模糊效果；
  • color adjust工具：亮度、对比度、饱和度；
  • 创建选区、裁剪；
  • 创建9宫格图片，能够将图片各部分的比例肯定下来，进行大小改变。

实战应用

下面这张图片是我制做的简书app登录页面，你们能够运用上面学到的技巧来进行制做。

简书登录页面（自创版）

制做步骤以下：

• 建立画板：选择artboard的iphone 5大小
• 设置背景：设置背景为白色
• 基本布局：调用sketch库的template（在菜单栏file下面的第二个选项），选择iOS UI design，选择iphone上方的状态栏为白色（图中看不出来，由于背景色也是白色）；
• 画出输入框（利用布尔运算）
• 微博登录按钮：建立矩形。
• 注册按钮：橘黄色的箭头。
• 文字：选择宋体，转化为轮廓。
• 细节完善：小图标制做，线条颜色微调。

快用Sketch动手作一个属于你的登录页面吧！

文／粽小喵（简书做者） 原文连接：http://www.jianshu.com/p/5d504b39ae9f 著做权归做者全部，转载请联系做者得到受权，并标注“简书做者”。