利用SKETCH创建彩色开关

利用SKETCH创建彩色开关

 　　@呼啸而过Charles ：Sketch是Mac平台上超火的图片处理软件，功能强大，并且比起PS它更加轻量级。感谢Sebastien Gabriel，本教程由他制作。下方是最終效果。不赘言，直入主题。

　　01.安装sketch

　　如果你尚未购买它，你可以下载试用版或者直接到App Store购买。然后安装并启动sketch。

　　当你看到提示画面，不要点开任何特定的模版，只要点击OK按钮，然后开启新文档。你将会看到下图。

　　02.创建画板

　　画板是工作区域，它的尺寸可以不受限制，小到图标、大到任意大。如果你用过Illustrator，他们是相同的。

　　在键盘上按A键或者点击左上角的Insert按钮，选择artboard(如图1)。如图，你可以在右侧栏看到许多预设尺寸。本例不采用这些预设尺寸。简单在画布上画任意尺寸的画板。完成后在右侧面板上size上输入400 X 300(如图2)。

　　在你的画板/左侧的图层面板，双击Artboard 1″标签，将其重命名。作者将其命名为Colorful switch，因为它是描述性名称(如图3)。

　　03.设置彩色背景

　　现在你已经制作一个画板，是时候为它设定色调了。你可以之后调整它。但背景色的选取会影响到你图标上的光线反射和图标上的着色。

　　敲击键盘上的R键选择矩形(insertshaperectangle (R)，如图4)

　　在画板上画一个矩形，使其与画板完全匹配。矩形工具将自动对齐画板的边沿(如图5)。完成后你将发现右侧的效果面板(effect panel)自动完成灰色填充和灰色边框(如图6)。

　　解除边框颜色，然后点击填充颜色。在16进制框输入A846FF(如图7)。现在你能得到基本颜色。

　　现在请注意填充面板右上角的+ 按钮，点击它。

　　如你所见，在此前的图层之上添加新的填充图层。

　　如果未选中渐变面板请选中它，在画板上从左上角到右下角画渐变(如图8)。

　　在填充类型选择器右下角的两个方形是你所选择的渐变色。点击它，使其变成可编辑状态。

　　确认你的形状的左上角的颜色是白色(#ffffff)、右下角是黑色(#000000)。点击渐变色选择器中的黑色，设置它的透明度为0。渐变色的透明度的调整可以通过滑动取色器右下方的滑块或者在RGB右侧的A字母输入框输入。选择白色，设置透明度为60(如图9)。

　　设置填充为overlay(如图10)

　　然后再次点击添加按钮。这次选择第三个标签以得到径向渐变。调整渐变为从左上角到右下角(如图11)。

　　确认左上角颜色为白色，右下角颜色为黑色。保证他们的透明度都为50%。同样设置这个填充为overlay。完成后效果如图12。一个闪亮的由浅及深的霓虹灯紫色渐变色。

　　最后，创建组，将前面创建的图层放入组中。在左侧面板中选择你的图层，摁住cmd和G将图层放入组中，双击组，将它命名为Background。或者起个更疯狂的名字，如crazy color。最终效果见图13。

　　04.应用内嵌的iOS7图标模版创建图标的外形

　　现在让我们一起创建图标吧。

　　我们将用内嵌的iOS图标模版，因此可以避免重建带复杂圆角的外形。

　　点击FileNew From TemplateiOS App Icon(如图14)，新建文件。

　　在左侧的面板中点击Icon-76@2x中的Icon Shape右侧的锁(如图15)。选中此图层并解锁，复制(cmd+c)并粘贴到你原始的文件中 (如图16)。你可以关闭模版文件窗口，无需保存。

　　选择已经创建的Icon Shape图层(点击cmd可以选择多个图层，如图17)。

　　使用右侧边栏顶部的排列工具，将图标置于背景的中间。点击align horizontally 按钮(水平居中第四个图标)和 align vertically 按钮(垂直居中，第七个图标)，如图18。完成后如图19。

　　现在我们整理之前的成果，之后就不必再做了。在Icon shape图层点击 cmd+G 创建组。向上拖拽该组，重命名为Icon。在该组中再次点击Cmd + G将图层放入群组中。重命名为Icon Base(如图20)。

　　05.创建基础形状

　　选择Base 图层，修改色彩为#ffffff。点击+按钮添加第二个平色填充(可理解为单色-译者注)，设置颜色为#FAC3FF。

　　设置刚才的平色透明度为10。完成后如图21。

　　现在键盘上点击O 选择椭圆形状工具。在Base图层的中央画124 * 124的圆。你也可以右侧边栏设置圆的尺寸。不要忘记我们之前使用的排列工具将圆形完美的居中。去掉边框，你将得到如图22的图形。

　　将Oval 1图层的填充样式设为Linear Gradient(线性渐变-译者注)，调整角度为对角线。设置左上角颜色为#E500E7、右下角颜色为#00D7FF。不要修改透明度和混合模式。(如图23)

　　为该图层命名为Super colorful base ，然后将起放入Color Base群组。(如图24)

　　运用椭圆工具画旋钮。画一个58 * 58的圆，然后将它与Super colorful base居中对齐。

　　在该图层上添加垂直线性渐变。顶部颜色为#FFDBFF、底部颜色为#FCF2FC。(如图25)

　　为该图层建群组(cmd+G)，然后命名为Knob base(如图26)

　　如图所示，我们已经创建了基础形状以及我们图标的区域。在底层我们完成了iOS7的形状。并且在顶层完成了彩色圆形和旋钮。现在剩余的任务就是在这些扁平形状上添加一些效果。中场休息，我们已经漂亮地完成了一半。让我们下半场继续创造奇迹吧。