×

酷九合金社Sketch教程系列-IOS图标(下)

96
傅译熳
2014.06.12 13:51* 字数 1561


我最喜欢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

酷九合金社
Web note ad 1