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

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

2014/07/23 17073评论区

设计师新宠!教你利用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)。

clip_image021

最后,设置该图层透明度为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风格日记图标》

pencil-logo

投稿者:@呼啸而过Charles

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

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

sdcweixin

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/use-sketch-design-switch-2

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 版式设计 职场 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里