从零开始学Sketch——入门篇.pdfVIP

从零开始学Sket ch——入门篇 如果你是一枚交互设计师或者UI设计师 ，那么你一定知道Sket ch这个强大 矢量设计软件 ；如果你 用过Phot osho p ，那么在你接触了Sket ch之后就能了解到这款产品相对于PS 优点 ，说不定会跟我 一样变成一个Sket ch 死忠粉。 扁平化设计 流行和屏幕分辨率 提升推动了Sket ch这款软件 流行。 什么是Sketch Sket ch——矢量绘图应用 Sket ch是一款矢量绘图应用 ，而矢量绘图无疑是目前进行网页、图标以及界面设计 最好方式。 Sket ch有以下特点 ： 矢量文件 ，不失真 ； Symbo l （图形样式 ）和St yle （文本样式 ）功能 ，有利于批量修改和复用 ； 每个图层都支持多种填充模式 （Fills可以添加/隐藏填充效果 ）； 多种尺寸导出功能 ，可导出部件 ； 自动保存所有历史记录 ，便于追溯修改。 但是Sket ch也不是十全十美 ，比如它对于位图 处理能力就远不及PS。但这并不影响它成为一款 优秀 设计软件。 Sketch界面 图片来源 ：极客学院ERICY U Sket ch 界面重要包含五部分 内容 ：page ，layer ，画板 ，检查器和工具栏。 Page ：页面管理 ； Layer ：页面下 图层 ； 蒙版 ：图片遮罩效果 （右键 ，选择use as a mask ） St ep 1 导入图片 画出一个正圆 导入图片 画出一个正圆 St ep 2 将图片置于正圆之上 ，并右键选中圆形 ，点击“USE A S A MA SK” 将图片置于正圆之上 ，并右键选中圆形 ，点击“USE A S A MA SK” St ep 3 完成! 注意把圆形 边框设置为透明。 完成 ，注意把圆形 边框设置为透明 布尔运算——图层之间 关系 在刚刚 头像下面 ，制作一个个性标签 ，运用图层之间 布尔运算。 画两个一模一样 圆形 ，其中一个圆形与矩形形成subst ract 关系。 （只需要在Layer中拖拽圆形至矩形即可 ） A rt board ：画板 ，快捷键A ，内置了多种尺寸 画板 ； A rt board内置画板 检查器 ： 通用属性 ：可调整大小。 样式属性 ：填充 （颜色、图片 ），模糊、渐变、阴影等效果。 工具栏 右键工具栏选择cust o mize可以自定义工具栏。 自定义工具栏 Sketch基础工具 添加、选择、移动图层 添加图层 当你按住Shif t键添加图层时 ，创建 是正圆或者正方形或者正多边形。 按住CO MMA ND D可以批量复制图层。 按住A lt键可以复制一个图形。 可以将图层归为组。 图形的编辑 点 控制手柄 当创建一个矩形时 ，双击四个角上 锚点可以选择不同类型 手柄。 图形点 控制手柄 蒙版 限制蒙版 ：不希望文字被蒙版所裁切 ，可以右键点击“Igno ring underlying mask”。 在蒙版上创建文字 ，避免模板限制文字超出蒙版区域 A LPHA蒙版 通过设置A LPHA模板 ，可以让图片拥有渐变效果。 St ep 1 选择Mask 模式 设置A LPHA蒙版 St ep 2 选择渐变方式 f ills选中渐变样式 剪刀工具和复制旋转工具 剪刀工具 ：可以剪切矩形 一条边 ，让它变成一个开口 矩形 ； 复制旋转工具 ，可以得到一个图形 360度旋转复制后 效果 ，如下图 ： 旋转复制效果 文本处理 运用T EX T ST Y LE可以复用文字样式 t ext st yle 将文本转换为轮廓 （矢量 ） 将文本 一笔一划都变为pat h。 将文本转换为轮廓 转化后 ，可以使用渐变作为文字样式。 图片编辑 位图编辑 高斯模糊效果 ； co lo r adjust 工具 ：亮度、对比度、饱和度 ； 建立选区、裁剪 ； 建立9宫格图片 ，可以将图片各部分 比例确定下来 ，进行大小改变。 实战 用 下面这张图片是我制作 简书app登陆页面 ，大家可以运用上面学到 技巧来进行制作。 简书登陆页面 （自创版 ） 制作步骤如下 ： 创建画板 ：选择art board ipho ne 5大小 设置背景 ：设置背景为白色 基本布局 ：调用sket ch库 t emplat e （在菜单栏f ile下面 第二个选项