设计师新宠!教你利用sketch创建彩色开关(下)

@呼啸而过Charles :话接上文,创建完基本形状之后,现在是精雕细琢的时间了,究竟怎样利用Sketch描摹出有质感的漂亮图标呢,不唠嗑,接着看吧。

上半部分戳这里:《设计师新宠!教你利用SKETCH创建彩色开关(上)》

06.创建斜面效果

现在我们来处理“Color base” 群组。

首先,周围创建“环”。

在Base中央用椭圆工具(点击“O”)创建128 * 128的圆。不要忘记使用排列工具。按住“Alt” 键显示智能引导线,使每个元素都对齐。完成后如图27。

设计师新宠!教你利用sketch创建彩色开关(下)

再次运用椭圆工具,创建一个小一点的圆。将之前的圆与之居中对齐。不要忘记按住“shift” 来画116 * 116的圆。(如图28)

设计师新宠!教你利用sketch创建彩色开关(下)

确保最近添加的图层在最上面,选择两个图层,之后工具栏点击“substract”(差集-译者注)如图29。完成后如图30。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

你会注意到现在Oval 3变成“shape group”。若你打开它,你可以修改形状。重命名为“Surrounding”。

在它的上面创建线性渐变图层。确保渐变从左向有一些透视渐变。

设置顶部颜色为#F698FF 、底部颜色为#FFF3FF。完成后如图31。

设计师新宠!教你利用sketch创建彩色开关(下)

现在创建附件的渐变图层来模拟反射。当你在渐变中激活描边时,你会看到光标有“+”。点击添加新颜色。在1/3 处添加新颜色(近旋钮轮廓)设定颜色为#BDB6FF。(如图32)

设计师新宠!教你利用sketch创建彩色开关(下)

下一步是关于斜面。我们需要这图标上创建一点“隆起”。创建后会突出中心部分的元素并创建3D效果。这sketch中没有类似Photoshop中的斜面和浮雕工具。我们可以使用简单的渐变来创建同样的效果。

在“Super colorful base”图层下面画一个新的144 * 144圆(点击“O”键) 并居中对齐。去掉边框,添加一个垂直的渐变,顶部颜色设置为#ffffff ,底部颜色设置为#DF80FF (如图33)。

设计师新宠!教你利用sketch创建彩色开关(下)

下一步是通过创建模糊效果来制造恰当的平滑过度效果。注意右侧边栏的“Gaussian Blur” (高斯模糊-译者注)。点击复选框,设置参数为3px(如图34)。最后设置该图层的透明度为44%(如图35)。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

07.添加深度

现在为图标的斜面添加一些深度。对彩色圆重复该深度。选择“Super colorful base” 图层,在“Inner Shadows”(内阴影-译者注)行点击“+”添加首个内阴影。

保持颜色为#000000 ,但设置透明度为64%。设置X和Y坐标值为0、blur(模糊-译者注)值为10。保持spread (范围-译者注)为0(如图36)。

设计师新宠!教你利用sketch创建彩色开关(下)

再次点击“+”按钮添加内阴影。这次设置透明度为56,X:0, Y:7 和blur值为9(如图37)。

设计师新宠!教你利用sketch创建彩色开关(下)

08.斜面

现在我们为中心部件添加了漂亮的斜面。在这部分我们将深度添加到基础部件上,将他们更好的混合起来。

在“icon base”文件夹,选择“base”图层。我们需要做的是保持相同的光线方向,及从上至下由浅到深。对此处而言顶部为白色、底部为粉色。

添加第一个内阴影,设置颜色为#E187FF,透明度为90%。X:0, Y:-5, Blur:6,范围值为0。

添加第二个内阴影,颜色为#ffffff,透明度为100%。这次设置该内阴影为向下而飞向上。设置Y:5 (如图38)。

设计师新宠!教你利用sketch创建彩色开关(下)

将内阴影应用于小旋钮。选择“knob base” 群组和“oval 2" 图层。

设置第一个内阴影颜色为#8D1799,透明度48% 。X:0 Y:-1 和 blur:3。

设置第二个内阴影颜色为#ffffff,透明度100% 。X:0 Y:2 和 blur:3。完成后值旋钮顶部将创建一个漂亮的反射(如图39)。

设计师新宠!教你利用sketch创建彩色开关(下)

下一步是将旋钮雕刻的更有触感和深度。使用椭圆工具,在旋钮的中间画48 * 48的圆(如图40)。取消边框,添加垂直渐变填充,设置顶部颜色为黑色,底部颜色为白色。最后设置白色透明度为0%(如图41)。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

用调整混合模式来代替添加颜色。设置整个图层为“overlay” (叠加模式-译者注,如图42)。

设计师新宠!教你利用sketch创建彩色开关(下)

你也可以设置其他尺寸。

09.阴影

这部分是我的最爱。Sketch 3中令人惊艳的是其将阴影处理的如此精妙。在Sketch 3中有几种创建阴影的方法:在图层面板中应用阴影工具。简易渐变或者应用模糊图层。

这里我们使用两种方法:阴影工具和模糊图层。

首先选择“Icon base > Base” 图层。然后共计添加三个阴影。从很重的贴近base(底部原件-译者注)的阴影到很轻的base的阴影。添加阴影如下:

#000000 Alpha(透明度-译者注) 42% X:0 Y:10 Blur(模糊值-译者注):16 Spread(范围-译者注):0

#000000 Alpha 34% X:0 Y:4 Blur:14 Spread:0

#000000 Alpha 24% X:0 Y:2 Blur:2 Spread:0

完成后如图43。

设计师新宠!教你利用sketch创建彩色开关(下)

最后为base添加强烈的阴影(drop shadow)。

复制“base” 图层:可以右键点击图层,选择复制(duplicate);或者复制、粘贴图层;或者按住“alt” 键,拖拽图层。

完成后你会发现效果也同样复制过来了。删除全部效果。取消靠近效果的复选框,然后点击选择标签右侧的垃圾图标(靠近“+” 符号)。点击此图标将自动取消所有阴影效果(如图44)。设置颜色填充的颜色为#000000。完成后如图45。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

在图层面板重,重命名该图层为“Big drop shadow” ,将其移动至“base”图层下面(如图46)。

设计师新宠!教你利用sketch创建彩色开关(下)

调整该图层的位置,向下移动30px:选择图层,按住shift键同时点击向下箭头的按键三次。按住Shift+上下左右箭头将以10px单位移动选中图层(如图47)。

设计师新宠!教你利用sketch创建彩色开关(下)

最后,设置该图层透明度为20%,然后设置高斯模糊值为7px(如图48)。底部原件现在有了漂亮的阴影。

设计师新宠!教你利用sketch创建彩色开关(下)

下面将同样的阴影应用到旋钮上。

进入“Knob base”群组,选择oval 2”图层。复制该图层,将其移出群组。为该图层设置单独的群组,重命名为“Knob shadow” ,将该群组拖拽到“knob base” 下面(如图49)。

设计师新宠!教你利用sketch创建彩色开关(下)

移除该图层的所有效果,设置单色为#000000,向下移动10px(如图50)。完成后设置该图层透明度为10%、告诉模糊为4px。效果会非常轻微(如图51)。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

让我们制作个更精致的阴影。复制该图层,向上移动10px,与旋钮对齐。修改此圆的形状。选中后按enter(return)”键,如图52。现在编辑路径。请注意右侧面板已经发生变化。

设计师新宠!教你利用sketch创建彩色开关(下)

如果未选中,选择底部锚点(如图52)。将该锚点下移10px(如图53)。完成后在矢量编辑面板的顶部点击“finish editing”,回到常规视图。

设计师新宠!教你利用sketch创建彩色开关(下)

设置图层透明度未20%、8px高斯模糊(如图54)。

设计师新宠!教你利用sketch创建彩色开关(下)

完成最后的阴影,复制刚才完成的图层,设置透明度为40%。在右侧面板的“size”中,设置新图层68宽、80高,设置顶部居中对齐(如图55)。

设计师新宠!教你利用sketch创建彩色开关(下)

最后设置图层的混合模式为Overlay,进而得到漂亮的深蓝色阴影(如图56)。

为旋钮阴影添加方向效果。

选择旋钮的base图层(“Knob base>Oval 2”)。添加三个阴影效果,如下:

·#000000 60% alpha(透明度-译者注) X:0, Y:1, Blur:2, spread 0. 设置混合模式为“Overlay”。

·#000000 14% alpha X:0, Y:3, Blur:4, spread 0。

·#000000 50% alpha X:0, Y:2, Blur:4, spread 0。

完成后如图57。

设计师新宠!教你利用sketch创建彩色开关(下)

现在我们完成了阴影部分。

10.完成细节

添加开关。

在Knob base群组中创建圆角矩形:点击“U” 键或点击“Insert>Shape>Rounded” (如图58),尺寸8*2(宽*高)、圆角半径为3或更多。

设计师新宠!教你利用sketch创建彩色开关(下)

将它移到其他旋钮图层的顶部,重命名为“pointer thingy”,我尚未找到更合适的名字。

水平居中,距旋钮底部右侧8px(如图59)。

设计师新宠!教你利用sketch创建彩色开关(下)

取消边框,设置单色为#CA2DEA、透明度为40%。

为其添加深度。添加阴影:#FFFFFF 46% alpha X:0, Y:1, Blur:0。然后添加内阴影:#000000 40% alpha X:0, Y:1, Blur:0。

设置内阴影混合模式为“overlay”。完成后如图60。

设计师新宠!教你利用sketch创建彩色开关(下)

在“color base” ,应用椭圆工具(点击“o”键)创建8X8的圆。将其移至距旋钮左侧10px处并水平居中。重命名为“OFF”(如图61)。取消边框,为其填充颜色为#ffffff 、设置混合模式为overlay(如图62)。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

为了使其更像关闭的开关,在“OFF”图层的顶部创建另一个圆型图层。这次设置其尺寸为6X6。取消边框并与“OFF” 圆居中对齐(如图63),完成后看起来漂亮许多。

设计师新宠!教你利用sketch创建彩色开关(下)

同时选择“oval 11”和“OFF”图层。在工具栏应用“substract”(差集-译者注)合并他们(如图64)。 完成后如图65。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

创建“ON” 圆,复制“OFF”图层。重命名它,将其移到旋钮的另一侧,距离相同(如图66)。

设计师新宠!教你利用sketch创建彩色开关(下)

点击图层左侧的三角形来展开矢量图群组,选择“oval 11" (如图67)并删除它(如图68)。

设计师新宠!教你利用sketch创建彩色开关(下)

设计师新宠!教你利用sketch创建彩色开关(下)

大功告成!

11.导出

教程的最后我们将展示将画板一次输出多个DPI。这是一个绝妙的特点。

在本列中我们将输出一倍(当前设计的尺寸)和两倍的文件。

选择画板“colorful switch”。

在右侧边栏的底部,你会看到“Make Exportable”按钮。点击它,你将得到图69。

设计师新宠!教你利用sketch创建彩色开关(下)

1x表示基线,例如你设计的原始尺寸。在“Export”的右侧点击 “+”,添加新的输出倍数。系统自动添加@2x(2倍-译者注)。你也可以改变后缀和格式(如图70)。

设计师新宠!教你利用sketch创建彩色开关(下)

当你点击“Export colorful switch”将生成1倍和2倍的相应格式的文件。

当你看到这里,你已经具备了成功的潜质(能看译者啰嗦到这里的都是意志十分强大的童鞋,这段非原文,乃译者自己的感慨!)。希望此教程能给各位带来些许帮助。

图标设计教程:
《绘制一个超级闪亮的铅笔图标》
《利用ILLUSTRATOR设计时尚漂亮的LOGO》
《手把手教!用PS设计一枚IOS 7风格日记图标》

设计师新宠!教你利用sketch创建彩色开关(下)

投稿者:@呼啸而过Charles

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量73万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

设计师新宠!教你利用sketch创建彩色开关(下)

收藏 6
点赞 1

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。