Sketch超越PS？莫非又是标题党？不不不！数艺君今天是正儿八经的给大家安利这个软件。

在Sketch出现之前，很多UI设计师手首选软件肯定是PS，不过大家对于PS的槽点也不少：设计新界面需要拉各种辅助参考线、切图很耗时、设计一个新界面又得重新创建一个文件等等。

然后，Sketch出现了！作为一款精准直击移动界面设计的设计软件，具有轻量便捷、出图效率高的特点。完美戳中了UI设计师们的痛点，堪称现实版不加班神器！

Sketch作为一款轻量并实用的UI设计工具，已经广泛运用于UI设计师的工作，而且目前不少公司在招聘UI设计师时，越来越多地将Sketch软件操作作为一项工作技能的考核内容。

口说无凭，Sketch到底好不好使还得实践出真知，下面数艺君用一个案例告诉你，Sketch的魅力。

实战：“爱护鲸鱼”引导页的制作

本案例是“爱护鲸鱼”引导页设计项目。用户群体是保护动物主义者，为了体现出爱的温馨氛围，笔者将界面风格定位为柔和的少女风格，主色调选用粉色，并添入偏冷的紫色、蓝色和灰色与其搭配，呈现大自然的气息。

为了让画面体现一些活泼感，界面内容主要围绕“一个女孩和鲸鱼相遇”。引导页的绘制流程如图1所示，最终的引导页效果如图2所示。

图1

图2

01

绘制背景

01 按快捷键A新建一个375px×667px的画布。使用“矩形”工具 （快捷键R）绘制一个375px×667px的矩形背景，然后从上到下将矩形填充为浅蓝色（R:121，G:164，B:241）至淡紫色（R:219，G:196，B:130）再至浅粉色（R:235，G:205，B:227），最后至浅蓝紫色（R:197，G:186，B:232）的线性渐变效果，如图所示。

02 选择“椭圆形”工具 ，在背景图层上方绘制一个圆形，填充为白色（R:255，G:255，B:255）。选中这个圆形并复制多个，将这些圆形自由进行缩放变化处理，然后集中在界面的上方进行排放，作为背景上的星星，如图所示。

03 选择“椭圆形”工具 ，在界面中绘制一个直径为46px的圆形，填充为白色（R:255，G:255，B:255）。选中这个圆形并复制一个，然后填充为灰色（R:216，G:216，B:216）并调整其到合适位置，选中这两个圆形，单击“减去顶层”按钮 ，得到一个月牙图形，如图所示。

04 选中月牙图形，然后复制一个，“填充”为浅蓝色（R:232，G:239，B:255）。在“高斯模糊”一栏中设置“半径”为10px，作为月牙的阴影，如图所示。

05 使用“钢笔”工具 绘制一个多边形，然后设置多边形描边“颜色”为白色（R:255，G:255，B:255），“位置”为居中，“粗细”为 1px，将多边形填充为浅紫色（R:220，G:185，B:219）至浅粉色（R:254，G:237，B:237）的渐变效果，作为山脉，如图所示。

06 选中上一步绘制好的山脉图形，使其呈编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，调整山脉的形状，如图1所示。取消编辑，得到图2所示的界面效果。

图1

图2

07 依照上一步的绘制方法，绘制出靠前的两个山脉。选中所有山脉图形，按快捷键Command+G进行打组，最后得到的界面整体效果如图所示。

08 选中“山脉”图层组，然后复制一个并移至原山脉图形组的下方。单击“垂直翻转”工具 ，将复制的“山脉”图层组进行垂直翻转处理，设置“不透明度”为38%，调整好位置，作为山脉的倒影，得到的界面整体效果如图所示。

02

绘制鲸鱼

01 使用“钢笔”工具 绘制一个多边形，然后从左上方到右下方，将多边形填充为浅粉色（R:226，G:190，B:223）至浅紫色（R:171，G:126，B:200），再至浅粉色（R:247，G:220，B:239）的线性渐变效果，作为鲸鱼的外形，如图1所示，得到的界面整体效果如图2所示。

图1

图2

02 双击上一步制作好的图形，使其进入编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，如图所示。

03 使用“钢笔”工具 沿着鲸鱼的肚皮内侧绘制一个多边形，然后填充为接近白色的浅粉色（R:255，G:250，B:252），得到图所示的界面效果。

04 选中上一步绘制好的图形，双击鼠标，使其呈编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，如图1所示，得到的界面整体效果如图2所示。

图1

图2

05 使用“钢笔”工具 绘制几条直线，设置描边“颜色”为浅紫色（R:173，G:129，B:201），“位置”为居中“粗细”为1px，如图所示。

06 双击上一步绘制好的图形，使其呈编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，如图1所示，得到的界面整体效果如图2所示。

图1

图2

07 使用“矩形”工具 绘制一个长方形，然后填充为浅粉色（R:240，G:219，B:226）至浅一些的浅粉色（R:206，G:190，B:231）的线性渐变效果，设置“不透明度”为66%，如图所示。

08 选中长方形和鲸鱼图形，使用“蒙版”工具 将长方形依附于鲸鱼图形，得到的界面整体效果如图所示。

03

绘制桥头

01 使用“矩形”工具 （快捷键 R）绘制一个矩形，然后从上到下将矩形填充为浅紫色（R:248，G:214，B:247）至浅蓝紫色（R:198，G:187，B:231）的线性渐变效果，如图所示。

02 双击矩形，使其呈编辑状态，依次选中顶部的第1个锚点和第2个锚点，将其向中间进行等距离移动，如图所示。

03 再次使用“矩形”工具 绘制一个矩形，然后从上到下将矩形填充为浅紫色（R:147，G:129，B:188）至浅一点儿的浅紫色（R:176，G:160，B:227）的线性渐变效果，如图1所示，得到的界面整体效果如图2所示。

图1

图2

04 将制作好的矩形复制3个，然后连同原来的矩形一起选中，按快捷键Command+G将其进行打组，如图所示。

05 选中上一步创建好的图层组，然后复制一个并命名图层组为“桥梁02”，选中“桥梁02”图层组，单击“水平翻转”工具 ，将该图层组进行水平翻转处理，并调整到合适位置，得到图所示的界面效果。

04

绘制小女孩

01 使用“钢笔”工具绘制一个四边形，填充为浅紫色（R:173，G:129，B:201），如图所示。

02 双击上一步绘制的四边形，使其呈编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，得到的界面整体效果如图所示。

03 使用“钢笔”工具 绘制一个不规则图形，填充为白色（R:255，G:255，B:255），如图所示。

04 双击上一步绘制好的图形，使其呈编辑状态，然后分别按快捷键1、快捷键2、快捷键3和快捷键4激活属性栏中的“直角”命令 、“对称”命令 、“断开连接”命令 、“不对称”命令 ，调整锚点到合适位置，得到的界面整体效果如图所示。

05 选择“钢笔”工具 ，按照以上同样的操作，绘制出女孩的裙子部分，如图所示。

06 继续按照同样的操作，绘制出小女孩的四肢，填充为浅紫色（R:254，G:250，B:255），如图所示。

07 绘制出鞋子部分，然后填充为浅紫色（R:254，G:248，B:255），如图1所示，得到的界面整体效果如图2所示。

图1

图2

05

添加倒影

01 选择所有星星图形，然后按快捷键Command+G将其打组，形成图层组，将图层组复制一个，单击“垂直翻转”工具 ，对其进行翻转，最后调整到界面中的合适位置，如图所示。

02 选择月牙图形并复制一个，然后单击“垂直翻转”工具 ，将复制的月牙图形进行翻转处理，调整到界面中的合适位置，如图所示。

06

添加文字和斜线

01 使用“文本”工具 在界面中添加一段文字，然后填充为白色（R:255，G:255，B:255），设置合适的字体样式，如图所示。

02 使用“钢笔”工具 依照文字的走势绘制两条线，设置描边“颜色”为白色，“粗细”为1px，作为装饰线，如图所示。

07

制作立体效果

将做好的图形制作为手机的界面效果，如图所示。

Powered by Froala Editor