sketch创建彩色开关操作实例(上)

0 2021-07-09 13:43 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 53 人学习了本教程

《sketch创建彩色开关操作实例(上)》是一篇关于Sketch的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Sketch技巧;你可以通过此加强操作实例,画板,彩色等多维度案例或实操来进行更多的学习;此教程是由wenyang在2021-07-09发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Sketch技巧;请给他一个赞吧。

Sketch是Mac平台上超火的图片处理软件,功能强大,并且比起PS它更加轻量级。那要怎么用sketch创建彩色开关呢?具体操作步骤如下图所示:

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)。

sketch创建彩色开关操作实例(上)

设置填充为“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)

sketch创建彩色开关操作实例(上)

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

sketch创建彩色开关操作实例(上)

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

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

sketch创建彩色开关操作实例(上)

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

sketch创建彩色开关操作实例(上)

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

以上就是sketch创建彩色开关操作实例的全部内容介绍了,关于更多Sketch教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由wenyang原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

wenyang

九年的设计行业经历积累了丰富的设计经验

共发布了213个文章 共获得9个赞

最新发布的教程

查看更多此作者的教程

文章中所使用的软件

您可能会帮助到他

查看更多
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员