酷九合金社Sketch教程系列-IOS图标（上）

作者: 傅译熳 | 来源:发表于2014-06-12 11:51 被阅读2816次

我使用Sketch将近一个月多点，现在我又足够的信心用教程的方式来分享我工作的一部分，我将描述我如何使用它的许多有趣的功能来创建一个彩色的图标。我想使用一种简单而深入的教程方式。本教程是为Sketch初学者设计的，我将会花时间来描述你可能已经知道的知识点。如下图是将要达到的效果。

好了，来吧！

1 打开界面

首先你需要拥有一款Sketch，你可以从商店购买，如果你手头有点紧的话可以先使用试用版。打开界面，此刻你不需要任何模板，直接新建界面即可。

2 创建画板

正式开始工作之前，我们需要创建一个画板，这与AI一样。创建画板的方式：一我们可以通过插入的方式进行绘制，默认工具栏的最左边的小加号点开即可看见，选中“Artboard”或者你直接按快捷键A在工作区绘制也一样。最后我们会在界面最左边的检查器中找到画板的属性值，设置“400 x 300”px即可。

3 填充一个彩色背景

现在我们已经准备好了一个画板，给它一个背景基调，你可以在制作完图标以后再添加，但是背景的产生的环境色会决定你图标的色彩。为了这个教程我来回做了很多次，现在我们切入正题。快捷键R当然也可以选择（插入>形状>矩形，如图4），让绘制的矩形充满画板，此时你需要注意到它的属性值会出现在右侧的检查器中（Fill是填充颜色，Color是边框颜色）如图6。

取消边框颜色，设置填充颜色为十六进制值类型#A846FF（图7），现在点击颜色面板右上角的“+”你会看到他会新增一个颜色填充面板，选中选择线性渐变，渐变梯度为从左上到右下（如图8）。

接着是设置渐变填充的属性值，确保你的形状的左上的颜色是# FFFFFF（白色）和右下方的颜色是# 000000（黑色）。点击渐变颜色选择器或者直接点击图形右下角的小圆点设置色彩为#000000（黑色）透明度0，具体透明度设置详见图9颜色面板下红色方框内。选择左上角白色设置不透明度60。

再次点击“+”创建一个新的颜色填充，这一次是一个径向渐变填充。

确保左上方和右下方的颜色是白色和黑色。设置它们的透明度都为50。最终得到一个超级闪亮的霓虹灯效果即从亮到暗紫色的梯度，如图12。

最终背景效果完成，全选你的背景图层（Cmd+G）打包成组，双击左侧图层列表的组（或者是Cmd+R）将打包的组命名为Background。

4 使用内置IOS模板

现在让我们开始创建我们自己的图标。这里我们可以使用内置的ios图标模板，而不必重新创建那个相当复杂的圆角矩形。单击（File>New from Template>iOS App icon），会创建一个新的文件，里面向你展示了iOS的整套图标模板。在图层列表中找到iOS-76@2X画板，解锁（shift+Cmd+L）选中iOS-76@2X图层,复制（Cmd+C）它并把它粘贴（Cmd+V）到你的原始文件中,现在你可以关闭你的模板文件了。

选中图标图层以及我们之前创建的背景图层（按住Cmd然后再按住shift我们就可以在成组的情况下多选组内的内容，仅仅按住Cmd是单选）如图17。

使用对齐工具使得图标在画板中能够水平与垂直居中对齐，对齐功能（图18）可以在界面右侧检查器最上面找到最终得到（如图19）。

现在我们把图标拖出背景组里，（Cmd+G）成组命名为icon。再次选中图标成组，命名为“Icon Base”（图20）

5 底座

选中图层Base，改变填充颜色为#FFFFFF 。点击“+”再次添加颜色填充，颜色值#FAC3FF不透明度为10%，如图21。

现在使用快捷键“O”在Base图层上面创建一个124 x 124的椭圆，当然不要忘记使用对齐功能使之与Base图层居中对齐（如图22）。

选中“Oval 1”，设置填充为线性渐变填充并使之倾斜。设置左上角颜色值#E500E7右下角颜色值#00D7FF，不改变混合模式（如图23）。

命名此层为“Super colorful base”和成组“Color Base” （如图24）。

6 创建锥形浮雕效果

然后创建一个椭圆来当做“Super colorful base”的旋钮。在“Super colorful base”图层之上绘制一个58 x 58的椭圆，给这个椭圆添加一个垂直的线性渐变，顶部色值为：#FFDBFF 底部色值为#FCF2FC （如图25）。

选中这个椭圆成组，更改组名为“Knob base”（如图26）。

正如你所看到的我们刚刚创建了基础图形以及我们的图标区，现在我们拥有底、ios7形状、五颜六色的底和旋钮。剩下的仅仅是添加效果这些事了。在这一点上，如果你想确保明确的清楚上面的步骤，我创建了中间步骤示意图文，你可以点击这里。现在我们需要花一些时间在组“Color base” 上。我们要打造“ring”环绕我们的大圆圈。使用椭圆工具“O”创建一个128 x 128的椭圆别忘了使用对齐工具，效果如图27。

现在我们再创建一个116 x 116的小椭圆，如图28所示。

单击工具栏中的布尔运算“substract”功能即图29红框所示，现在我们得到的是一个环形，如图30所示。

你会注意到这个环是一个形状组，如果你双击打开它你还能继续修改绘制形状，重命名该环形为“Surrounding”给这个环添加一个线性渐变，以对角线的角度，左上色值为#F698FF右下色值为#FFF3FF当然效果如图31。

现在我们要添加一个额外的线性渐变用来模拟漫反射，将鼠标移到图形中线性渐变的路径上你会看见鼠标的指针会变成一个带“+”的指针，在左上1/3的地方单击添加一个新的颜色设置颜色值为#BDB6FF，效果如图32所示。

下一步是创建一个锥形，由于Sketch没有“斜面和浮雕”效果，所以我们需要通过线性渐变来创建出这个三维效果。在椭圆图层“Super colorful base”的下方创建一个144 x 144大小的椭圆，取消边框并给它添加一个垂直的线性渐变顶部色值是#FFFFFF底部色值是#DF80FF（效果如图33）。

下一步是创建一个模糊使它有一个适当的平滑效果。注意右侧检查器中的“Gaussian Blur”。检查它的复选框并设置的数值3（图34）。最后，设置不透明度44%（图35）。

7 添加图形深度

现在你已经进一步深入了你的图标了，选择添加图层“Super colorful base” ，点击右侧的 “Inner Shadows”（内阴影）旁边的“+”添加内阴影效果。保持色值#000000；偏移量X和Y为0；Blur(模糊度)为10；Spread(阻塞)值为0（如图36）。

点击“+”再次添加内阴影，不透明度为56；偏移量X为0，Y为7；Blur(模糊度)为9如图37。

8 修饰旋钮

现在我们已经创建出了一个漂亮的圆形，但是我们需要把它与背景较好的统一起来，在你的“icon base” 文件夹里选择“Base”图层沿着光源的方向给它添加一点环境色。我们给“Base”图层创建第一个内阴影色值为#E187FF；不透明度为90；偏移量X为0，Y为5；Blur(模糊度)为6；Spread(阻塞)值为0。点击“+”再次添加内阴影此刻色值为#FFFFFF；不透明度为100；偏移量X为0，Y为-5(如图38)。