Silicon-based Life 赋予硅基生命能力,说简单点就是码农。
Sketch软件学习笔记
Posted on: 2020-05-12 Edited on: 2020-05-14 In: 前端设计 Views: 

基本介绍

学习人群

  1. 移动界面设计师、UI设计师
  2. 交互设计师
  3. 产品经理
  4. 移动端开发工程师 bingo!

开发公司

下载和安装

官网下载

汉化包密码:g8be
汉化包下载后双击,安装,再打开Sketch软件后在工具栏的插件,点击工具->sketch l18n即可切换中英文版本。

软件界面

upload successful

  • 工具栏(工具箱)
    可以进行拖拽图标,或者拖拽设定好的栏目,这个非常人性化。
    工具栏包括了skech的所有工具

upload successful

基本形状绘制

upload successful

对应快捷键:矩形r,圆形o,圆角矩形u,线条l
如果需要的是正方形则r+shift,如果需要正圆形o+shift,如果需要正圆角矩形则u+shift,如果需要直线则l+shift

如果希望所画的图形不是从右上角开始,而是从中心点开始扩散,则需要按shift+option/alt键即可。

基本操作

图层复制的方法:鼠标选中图形,按住option/alt键,拖动图形即可复制,如果需要图形复制过程中强制水平则需要同时按住shift键;

取色吸管:选中对象按ctrl+c即可调出取色吸管。

描边和填充快捷键b取消描边,再按一下b有添加描边了,f取消填充,再按一下f又加上填充了。
文字工具t,输入文字即可。
钢笔工具v,输入文字即可。

图形的属性

常规属性

upload successful

样式属性

填充(f)和描边(b)

注意如果删除一个填充的时候,要点掉对应填充前面的✔️,再点击垃圾桶图标即删除了一个图层的填充。

upload successful

阴影和内阴影

比较容易理解

模糊类型

upload successful

  1. 高斯模糊:常用,将选择的图形进行模糊化处理。
  2. 动感模糊:选择的图形进行动感模糊,可以调整角度。
  3. 放大模糊:姜选择图形以中心向四周模糊化处理。
  4. 背景模糊:可以制作苹果系统下的磨砂模糊效果(色块为白色,并且需要将填充不透明度调整为60%方可实现效果)

画板的创建和大小调整

画板放大:按住command键,滚动鼠标滑轮,表示整体放大和缩小。

画板局部元素放大:按住z键,点击鼠标左键,即可实现局部元素的放大。或者框选即可实现放大。

移动画板:按住空格键,鼠标会变成抓手,即可移动画布。

画板的创建

画板是在UI设计时最常用的页面设计工具,例如设计APP时候有很多个页面,在Sketch中一个文档可以创建无数个页面。

在选择的页面中选择的元素,可以跨画板进行拖拽。

upload successful
也可以是 按住a间,在画布上自定义画,或者按照右侧的规范选择。

编组

编组把若干个元素组合成为一个组,和PPT,PS中的分组是一个意思。快捷键为ctrl+g

图形的编辑

双击或者点击编辑按钮,单击可以添加锚点。完成编辑按回车键就可以对当前图形完成 。

布尔运算

upload successful

  1. 合并形状:得到几个形状区域的和。
  2. 减去:去掉上层包括上层和下层形状中的重叠部分。
  3. 相交:得到两个形状重叠的部分。
  4. 排除:去掉两个形状重叠的部分。

注意:执行布尔运算后依然合一通过图层对其进行分开,我们可执行拼合命令使其转换为一个图形,在没有拼合之前可以在图层中选择图层展开后进行后续的修改,或者布尔类型的修改。一旦拼合后则不能进行修改。

upload successful

模仿了几个图标进行布尔运算的应用:

注意事项 还是需要多联系  主要是合并形状 和 减去的应用。

蒙版

有两种蒙版,一个是图形蒙版,一个是透明度蒙版。

图形蒙版

upload successful

upload successful

  1. 图片在上  图形在下
  2. 两个元素分组,选择图形,执行图形蒙版。
  3. 两个元素不分组,选择两个元素,执行图形蒙版。

透明度蒙版 alpha蒙版

upload successful

是将图形进行透明度蒙版的操作,倒影的效果。

  1. 在图形下方创建一个矩形,矩形渐变色为黑色到黑色
  2. 下侧的黑色透明度改为0
  3. 复制图片,倒置镜像,拖动到矩形内
  4. 选择矩形和图片,点击蒙版,即上边的倒影效果。

缩放(元素自身的大小变化)

upload successful

旋转复制(自定义工具栏中找到旋转复制按钮拖动到工具栏中)

upload successful

  1. 画一个圆形点击旋转复制按钮,选择6,则效果如上。

剪刀 去除元素

upload successful
比如上图

制作模仿的logo

upload successful

钢笔、矢量工具

  1. 直线 点击开始  按 下一个点  在按下一个点
  2. 按住command键拖动操作。

转换为轮廓

将钢笔(v)的路径属性转换为图形属性,也就是说转换好后可以为图形添加填充和描边的效果。

文字工具(t)

快捷键是t,调整文字大小可以用alt command+/-

创建网格

可以创建所选中的图形,按照行和列的方式进行复制,并可设定间距。
upload successful

--- 本文结束 The End ---