如何使用Sketch制作精致的玻璃拟态UI效果

玻璃拟态作为今年大家可能都会接触到的设计类型，有必要花一点时间去学习如何更好地做出这种效果。

如果是简单添加一个属性来制作玻璃拟态就显得比较粗糙。

下面以用Sketch制作为例，讲述通过这些不可缺少的细节就可以让你的设计看起来更精致：

1.绘制一个形状

首先添加一张炫彩背景或绘制一些渐变的元素充当背景，然后绘制一个矩形，并添加一定像素的圆角。

2.应用渐变填充

使用白色（#FFFFFF）渐变，将第一个不透明度设置为40％，第二个不透明度设置为10％，角度用倾斜的角度为佳。

3.添加背景模糊

给矩形添加背景模糊属性，将模糊值设置为20左右，可根据实际效果做适当调整。

4.添加边框

优雅的边框为元素增添了光泽，当玻璃表面重叠时，它也有助于建立视觉层次。

如果要在设计中创建定向光的视觉可以对边框使用渐变。比如：

边框：3px

颜色1：#FFFFFF（不透明度50％）

颜色2：#FFFFFF（不透明度0％）

颜色3：＃FD369E（不透明度0％）

颜色3：＃FD369E（不透明度50％） 

这里因为边掘族孙框设有透穗姿明度，所以需要根据你所制作的背景来调整渐变滑块的区域来达到最佳效果。

5.应用阴影

接下来添加一个阴影，细微的判链阴影效果有助于增强视觉层次。

添加色值#000000，透明度10%，y1，blur 24 ，spread-1，的阴影。

6.填写内容

填写一些文本内容，文本使用白色，建议透明度50%，并使用图层混合模式来调整整体效果。

这里选择了叠加模式。

7.添加纹理

玻璃质感已完成，进一步可以添加一些高级纹理，比如添加噪点：

添加带有噪点的图像，将不透明度降低到20％，并将填充的混合模式设置为“叠加”。

经过以上的步骤就可以得到一个比较精致的效果啦！快来试试吧！

自从知道xcode6支持使用矢量图后就开始用sketch，顺手记录下使用中的一些能够提高效率的方法

Sketch适用范围

sketch主要是做图标和界面的。如果是板绘或者处理照片还是用Photoshop之类的比较合适。和ps相比，sketch的优势是开启速度会快很多，是用来原生开发，支持退出后再开启保持退出状态等特点，这些都是ps所没有的。

图层 *** 作

command+d复制图层，或者按住option键拖动

按住shift键能够选择多个图层

按住shift键能够能够严格按照垂直活水平移动

按住shift键改变图层大小是按等比变化

按command加上方向键中灶会精确到像素的调整

图层透明度可以使用快捷键进行调节，选中一个图层按1到9的数字快速将图层透明度从10%到90%，按0调成100%

command+shift+l 锁定图层

绘制图形

可以在Insert >Shape里找到预设的一些图形，比如圆形，方形等基本图形。按带拍o添加圆，r添加矩形，l添加直线，u添加圆角矩形，t添加文本

按v可以自己绘制图形

绘制时按住shift画Sketch会自动按45度对齐前一个点适合绘制直线

善用布尔运算将简单的图形组合成复杂的图形，布尔运算有四种，合并形状（Union）,减去顶层形状（Substract）,与形状区域相交（Intersect）,排除重叠形状（Difference）

布尔运算后可以使用扁平化功能（Flattening）,使用后会将其合并成一个图形

复制旋转是个比较有意思的功能，能够很方便绘制出类似花瓣的效果，通过菜单进入 图层 >路径 >复制旋转 (Layer >Paths >Rotate Copies)即可。如果希望让复制的图形独立出来，可以分离路径通过菜单 编辑 >路径 >分离 (Layer >Paths >Split)即可。

画出粗细不均效果的线条效果可以使用描边宽度 通过菜单进入 图层 >路径 >描边宽度 (Layer >Paths >Stroke width)，然后点击希望加宽的地方以添加锚点拖动使之变宽

填充可以按从下到上的顺序叠加

选中图层control+command+m创建蒙版

control+c会出现放大镜，然后可以方便选择颜色替换当前选择对象的颜色

画布的控制

使用空格进行抓手移动画布

按command加鼠标滚轮进行画布放大和缩小

control+p能够切换到像素模式查看，相当于输出png后点开图片查看的效果。

control+g开启蠢培羡关闭网格

按住option键能够看到各个对象之间的距离

command+1缩小至能看到所有对象，command+2放大到选中对象到屏幕适合的大小，command+0缩小至100%

Symbol共享元素，一次编辑所有地方都能够生效。

什么会影响Sketch的性能

模糊

阴影

多页面

文本转轮廓

---