欢迎登陆真网站,您的到来是我们的荣幸。 登陆 注册 忘记密码? ☆设为首页 △加入收藏
欢迎加入真幸福QQ群
电脑知识: 基础知识 网络技术 操作系统 办公软件 电脑维修 电脑安全 windows7 windows8 windows10 服务器教程 平板电脑 视频播放教程 网络应用 互联网 工具软件 浏览器教程 QQ技巧 输入法教程 影视制作 YY教程 wps教程 word教程 Excel教程 PowerPoint
云南西双版纳特产小花糯玉米真空包装


几款神器帮你识别字体
恋在七夕爱在人生日历,你表白我送花!
显卡驱动问题驱动人生来解决
万能格式转换器怎么样?
real解码器是什么?
360安全路由器助手安装教程
微微网络电话免费打电话的方法
怎么使用按键精灵制作自动按键或点击脚本
怎么删除淘宝已买到的宝贝
酷狗k歌怎么样?
利用SKETCH创建彩色开关
【 来源:网络 】【 点击:1 】 【 发布时间:2017_03_03 08:59:59 】

   @呼啸而过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的形状。并且在顶层完成了彩色圆形和旋钮。现在剩余的任务就是在这些扁平形状上添加一些效果。中场休息,我们已经漂亮地完成了一半。让我们下半场继续创造奇迹吧。

本网站由川南居提供技术支持,fkzxf版权所有 浙ICP备12031891号
淳安分站 淳安分站