我最喜欢Sketch 3.0的阴影工具。
首先我们选择“Icon base > Base” 图层。我们要给它添加3个层次的阴影。阴影的层次模式如下：
色值# 000000，透明度42% ，X 0 Y 10，模糊：16，阻塞0；
色值# 000000，透明度34% ，X 0 Y 4，模糊：14，阻塞0；
色值# 000000，透明度24%， X 0 Y 2，模糊：2，阻塞0，如图43。
最后我们要做的是“base” 上的很强烈的投影。复制“base”图层，可以“Cmd+C，Cmd+V”复制也可以按住Alt拖动图形来复制。复制完后我们需要去掉图层上的效果，用以创建新的效果，这时我们可以在右边检查器中取消阴影效果的勾选，然后点击上方的垃圾桶就能删除多余的效果了（图44）。设置填充图层#000000会得到图45。
重命名该图层为“Big drop shadow”并且将它置于“base”图层下方（如图46）。
现在我们要把这个图层往下挪，按住Shift键并且按住键盘向下键3次，如图47。
最后将投影设置不透明度20%设置高斯模糊7（如图48），此时你会发现生成一个漂亮的投影。
给按钮添加类似投影。选择组“Knob base” 中的 “oval 2" 图层，复制一层提取出来重命名“Knob shadow” 拖动放在组“knob base”里，如图49。
除去这一层所有的效果填充颜色#000000并且向下移动10px（如图50），做到这一点后设置图层不透明度为10%，高斯模糊4px，效果很微妙，（如图51）。
让我们做一个华丽的阴影。复制这一层，使它往回走10px与旋钮居中对齐，我们需要修改下这个圆的形状。选择这个图层按回车或者双击鼠标你会看到（图52）。现在可以编辑路径了，注意你右边的检查器面板已经改变了。
选择底部的锚点，将这个锚点向下移动10px（图53），然后回车结束编辑状态。设置图层不透明度为20%，高斯模糊为8（图54）。
再复制一个圆作为阴影，我们重复刚刚的工作，设置不透明度为40%,在右侧面板我们修改下这个阴影的大小宽度为68，高度为80，并且高度与旋钮顶端对齐（如图55）。
最后，设置图层混合模式为叠加，得到一个不错的深蓝色的阴影（图56）。
我们现在要给旋钮添加一个很有层次的阴影。选择“Knob base>Oval 2"图层。开始添加阴影效果：
色值# 000000 ，透明度60%，x：0，Y 1，模糊：2，阻塞0。设置此阴影的混合模式为“叠加”
色值# 000000 ，透明度14%，x：0，Y 3，模糊：4，阻塞0
色值# 000000 ，透明度50%，x：0，Y 2，模糊：4，阻塞0
你应该看看这个（图57）。这是我们现在做的阴影。
10 细节
做完之后我们需要添加两个小东西来当做ON/OFF在旋钮组创建一个圆角矩形（U或者Insert>Shape>Rounded如图58），大小8 x 2半径为3或者更多。把它放在你的其他旋钮层并且命名为“pointer thingy”，我无法找到更好的命名。将其水平对齐并且处于底座的右侧。
除去圆角矩形的边框设置不透明度40%，色值为CA2DEA。给它一点深度，添加阴影添加阴影：
色值# FFFFFF，透明度 46%，x：0，Y 1，模糊：0
一个内阴影：色值# 000000，透明度 40%，x：0，Y 1，模糊：0。设置内阴影图层的混合模式为“叠加”，您得到（图60）的结果。
在图层“color base” 上用椭圆工具（O）创建一个8 x 8的圆。置于旋钮的左侧（离旋钮10px），重命名为“OFF”（图61），去掉边框，颜色值为#FFFFFF，混合模式改叠加（图62）。
为了让它看起来更像一个“OFF”的按钮，让我们在它中间创建另外一个圆，这一次是6 x 6大小，去掉边框可以看到这个新建的圆能很好的契合在“OFF”按钮上（如图63）。
选中你的“OFF”图层和刚刚的圆图（64），执行命令“substract”你会得到这样一个环形（图65）。
创建“ON”，复制你的“OFF”层。重命名和移动旋钮的另一边，同样的距离（图66）。
点击层的左边三角形展开向量组，选择“Oval11”（图67）删除它得到（图68）。
你现在做到这一步！
11 输出
这个教程最后一步就是切图输出了。我认为输出是Sketch 3.0的一个极好的优点。我想你们会想要导出1x（当前大小）和2x选择你画板上的“colorful switch”在右侧检查器的底部你会看到一个“Make Exportable”的按钮，单击你会得到（图69）。1x表示基线，即你当前的设计尺寸，单击右侧的“+”会添加一个新的输出窗口，选择2x他会在输出的时候自动放大2倍，当然你也可以更改后缀名（如图70）。当你点击“Export colorful switch”，它会产生1X，自动扩展你的画板上@2x的输出选项和它所选择的格式。瞧！
感谢您的观看，我们下期再见！！
这里给大家奉上图标源文件：http://url.cn/P6wwct
网友评论