header_v1.7.39

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

3年前发布

原创文章 / UI / 教程
酷九设计 原创,如需商业用途或转载请与酷九设计联系,谢谢配合。

我使用Sketch将近一个月多点,现在我又足够的信心用教程的方式来分享我工作的一部分,我将描述我如何使用它的许多有趣的功能来创建一个彩色的图标。


我最喜欢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的输出选项和它所选择的格式。瞧!


附件有源文件
感谢您的观看,我们下期再见!!


37
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功