教你利用SKETCH制作彩色开关.docx

教你利用SKETCH制作彩色开关.docx

《教你利用SKETCH制作彩色开关.docx》由会员分享，可在线阅读，更多相关《教你利用SKETCH制作彩色开关.docx（26页珍藏版）》请在冰豆网上搜索。

教你利用SKETCH制作彩色开关

教你利用SKETCH创建彩色开关

06.创建斜面效果

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

首先，周围创建“环”。

在Base中央用椭圆工具（点击“O”）创建128*128的圆。

不要忘记使用排列工具。

按住“Alt”键显示智能引导线，使每个元素都对齐。

完成后如图27。

再次运用椭圆工具，创建一个小一点的圆。

将之前的圆与之居中对齐。

不要忘记按住“shift”来画116*116的圆。

（如图28）

确保最近添加的图层在最上面，选择两个图层，之后工具栏点击“substract”（差集－译者注）如图29。

完成后如图30。

你会注意到现在Oval3变成“shapegroup”。

若你打开它，你可以修改形状。

重命名为“Surrounding”。

在它的上面创建线性渐变图层。

确保渐变从左向有一些透视渐变。

设置顶部颜色为#F698FF、底部颜色为#FFF3FF。

完成后如图31。

现在创建附件的渐变图层来模拟反射。

当你在渐变中激活描边时，你会看到光标有“+”。

点击添加新颜色。

在1/3处添加新颜色（近旋钮轮廓）设定颜色为#BDB6FF。

（如图32）

下一步是关于斜面。

我们需要这图标上创建一点“隆起”。

创建后会突出中心部分的元素并创建3D效果。

这sketch中没有类似Photoshop中的斜面和浮雕工具。

我们可以使用简单的渐变来创建同样的效果。

在“Supercolorfulbase”图层下面画一个新的144*144圆（点击“O”键）并居中对齐。

去掉边框，添加一个垂直的渐变，顶部颜色设置为#ffffff，底部颜色设置为#DF80FF（如图33）。

下一步是通过创建模糊效果来制造恰当的平滑过度效果。

注意右侧边栏的“GaussianBlur”（高斯模糊－译者注）。

点击复选框，设置参数为3px（如图34）。

最后设置该图层的透明度为44%（如图35）。

07.添加深度

现在为图标的斜面添加一些深度。

对彩色圆重复该深度。

选择“Supercolorfulbase”图层，在“InnerShadows”（内阴影－译者注）行点击“+”添加首个内阴影。

保持颜色为#000000，但设置透明度为64%。

设置X和Y坐标值为0、blur（模糊－译者注）值为10。

保持spread（范围－译者注）为0（如图36）。

再次点击“+”按钮添加内阴影。

这次设置透明度为56，X:

0,Y:

7和blur值为9（如图37）。

08.斜面

现在我们为中心部件添加了漂亮的斜面。

在这部分我们将深度添加到基础部件上，将他们更好的混合起来。

在“iconbase”文件夹，选择“base”图层。

我们需要做的是保持相同的光线方向，及从上至下由浅到深。

对此处而言顶部为白色、底部为粉色。

添加第一个内阴影，设置颜色为#E187FF，透明度为90%。

X：

0,Y：

-5,Blur：

6，范围值为0。

添加第二个内阴影，颜色为#ffffff，透明度为100%。

这次设置该内阴影为向下而飞向上。

设置Y:

5（如图38）。

将内阴影应用于小旋钮。

选择“knobbase”群组和“oval2″图层。

设置第一个内阴影颜色为#8D1799，透明度48%。

X:

0Y:

-1和blur:

3。

设置第二个内阴影颜色为#ffffff，透明度100%。

X:

0Y:

2和blur:

3。

完成后值旋钮顶部将创建一个漂亮的反射（如图39）。

下一步是将旋钮雕刻的更有触感和深度。

使用椭圆工具，在旋钮的中间画48*48的圆（如图40）。

取消边框，添加垂直渐变填充，设置顶部颜色为黑色，底部颜色为白色。

最后设置白色透明度为0%（如图41）。

用调整混合模式来代替添加颜色。

设置整个图层为“overlay”（叠加模式－译者注，如图42）。

你也可以设置其他尺寸。

09.阴影

这部分是我的最爱。

Sketch3中令人惊艳的是其将阴影处理的如此精妙。

在Sketch3中有几种创建阴影的方法：

在图层面板中应用阴影工具。

简易渐变或者应用模糊图层。

这里我们使用两种方法：

阴影工具和模糊图层。

首先选择“Iconbase>Base”图层。

然后共计添加三个阴影。

从很重的贴近base（底部原件－译者注）的阴影到很轻的base的阴影。

添加阴影如下：

#000000Alpha（透明度－译者注）42%X:

0Y:

10Blur（模糊值－译者注）:

16Spread（范围－译者注）:

0

#000000Alpha34%X:

0Y:

4Blur:

14Spread:

0

#000000Alpha24%X:

0Y:

2Blur:

2Spread:

0

完成后如图43。

最后为base添加强烈的阴影（dropshadow）。

复制“base”图层：

可以右键点击图层，选择复制（duplicate）；或者复制、粘贴图层；或者按住“alt”键，拖拽图层。

完成后你会发现效果也同样复制过来了。

删除全部效果。

取消靠近效果的复选框，然后点击选择标签右侧的垃圾图标（靠近“+”符号）。

点击此图标将自动取消所有阴影效果（如图44）。

设置颜色填充的颜色为#000000。

完成后如图45。

在图层面板重，重命名该图层为“Bigdropshadow”，将其移动至“base”图层下面（如图46）。

调整该图层的位置，向下移动30px：

选择图层，按住shift键同时点击向下箭头的按键三次。

按住Shift＋上下左右箭头将以10px单位移动选中图层（如图47）。

最后，设置该图层透明度为20%，然后设置高斯模糊值为7px（如图48）。

底部原件现在有了漂亮的阴影。

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

进入“Knobbase”群组，选择oval2”图层。

复制该图层，将其移出群组。

为该图层设置单独的群组，重命名为“Knobshadow”，将该群组拖拽到“knobbase”下面（如图49）。

移除该图层的所有效果，设置单色为#000000，向下移动10px（如图50）。

完成后设置该图层透明度为10%、告诉模糊为4px。

效果会非常轻微（如图51）。

让我们制作个更精致的阴影。

复制该图层，向上移动10px，与旋钮对齐。

修改此圆的形状。

选中后按enter（return）”键，如图52。

现在编辑路径。

请注意右侧面板已经发生变化。

如果未选中，选择底部锚点（如图52）。

将该锚点下移10px（如图53）。

完成后在矢量编辑面板的顶部点击“finishediting”，回到常规视图。

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

完成最后的阴影，复制刚才完成的图层，设置透明度为40%。

在右侧面板的“size”中，设置新图层68宽、80高，设置顶部居中对齐（如图55）。

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

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

选择旋钮的base图层（“Knobbase>Oval2”）。

添加三个阴影效果，如下：

·#00000060%alpha（透明度－译者注）X:

0,Y:

1,Blur:

2,spread0.设置混合模式为“Overlay”。

·#00000014%alphaX:

0,Y:

3,Blur:

4,spread0。

·#00000050%alphaX:

0,Y:

2,Blur:

4,spread0。

完成后如图57。

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

10.完成细节

添加开关。

在Knobbase群组中创建圆角矩形：

点击“U”键或点击“Insert>Shape>Rounded”（如图58），尺寸8*2（宽＊高）、圆角半径为3或更多。

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

水平居中，距旋钮底部右侧8px（如图59）。

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

为其添加深度。

添加阴影：

#FFFFFF46%alphaX:

0,Y:

1,Blur:

0。

然后添加内阴影：

#00000040%alphaX:

0,Y:

1,Blur:

0。

设置内阴影混合模式为“overlay”。

完成后如图60。

在“colorbase”，应用椭圆工具（点击“o”键）创建8X8的圆。

将其移至距旋钮左侧10px处并水平居中。

重命名为“OFF”（如图61）。

取消边框，为其填充颜色为#ffffff、设置混合模式为overlay（如图62）。

为了使其更像关闭的开关，在“OFF”图层的顶部创建另一个圆型图层。

这次设置其尺寸为6X6。

取消边框并与“OFF”圆居中对齐（如图63），完成后看起来漂亮许多。

同时选择“oval11”和“OFF”图层。

在工具栏应用“substract”（差集－译者注）合并他们（如图64）。

完成后如图65。

创建“ON”圆，复制“OFF”图层。

重命名它，将其移到旋钮的另一侧，距离相同（如图66）。

点击图层左侧的三角形来展开矢量图群组，选择“oval11″（如图67）并删除它（如图68）。

大功告成！

11.导出

教程的最后我们将展示将画板一次输出多个DPI。

这是一个绝妙的特点。

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

选择画板“colorfulswitch”。

在右侧边栏的底部，你会看到“MakeExportable”按钮。

点击它，你将得到图69。

1x表示基线，例如你设计的原始尺寸。

在“Export”的右侧点击“+”，添加新的输出倍数。

系统自动添加@2x（2倍－译者注）。

你也可以改变后缀和格式（如图70）。