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

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

2014/07/22 44927评论区

use-sketch-design-switch-1

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

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

01.安装sketch

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

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

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

02.创建画板

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

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

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

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

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

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

03.设置彩色背景

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

敲击键盘上的”R”键选择矩形(insert>shape>rectangle (R),如图4)

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

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

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

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

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

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

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

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

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

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

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

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

11

设置填充为“overlay”(如图10)

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

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

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

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

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

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

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

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

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

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

点击“File”>“New From Template”>“iOS App Icon”(如图14),新建文件。

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

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

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

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

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

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

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

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

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

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

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

05.创建基础形状

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

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

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

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

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

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

25

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

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

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

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

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

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

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

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

图标教程:
PS+AI制作精致可爱的毛线风格图标
《PS教程:教你创建精美的螺旋圆点花纹ICON》
《PS新手教程:台湾设计师教你快速制作圆形渐变图标》

akane-lee-round-icon

原文地址:blog.sina
作者:@呼啸而过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-1

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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