利用SKETCH创建彩色开关

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


  01.安装sketch

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

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


  02.创建画板

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

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


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


  03.设置彩色背景

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

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


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


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


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

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

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


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

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


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


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


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


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


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

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

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

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


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


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


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


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


  05.创建基础形状

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

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


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


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


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


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

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


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


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

时间: 2025-01-14 07:34:48

利用SKETCH创建彩色开关的相关文章

利用PHP创建动态图像_php基础

只要安装一些第三方的库文件并具有一定的几何知识,就可以利用PHP来创建和处理图像了.利用PHP创建动态图像是相当容易的一件事情.下面,笔者将详细介绍如何实现. 在使用基本的图像创建函数之前,需要安装GD库文件.如果要使用与JPEG有关的图像创建函数,还需要安装jpeg-6b,如果要在图像中使用Type 1型字体,则必须安装t1lib. 在建立图像创建环境之前,还需要做一些准备工作.首先,安装t1lib接着安装jpeg-6b,然后再安装GD库文件.在安装时一定要按这里给定的顺序进行安装,因为在编译

VB中利用MapX创建用户定制工具

摘要 本文介绍了VB中如何利用MapX创建用户定制地图工具,详细地说明了整个创建过程,以及在创建定制工具的过程中所使用的关键方法. 1.前言 随着地理信息系统的发展,国内外已出现了不少GIS(地理信息系统)软件,其中MapX是MapInfo公司的ActiveX控件产品.由于它是一种基于Windows操作系统的标准控件,因而MapX4.0支持绝大多数标准的可视化开发环境,如:VisualBasic,Delphi,PowerBuilder,VisualC++等面向对象语言,而且可以使用Lotus s

RedHat 5.2下Linux Oracle 10g ASM安装教程(三)利用dbca创建oracle数据库

六.利用dbca创建oracle数据库 1.执行DBCA Oracle用户下命令行输入dbca,弹出图形界面 2.要点 A.注意需要选择asm存放 此处需要考虑到有的时候找不到dgroup1组,需要输入密码创建,总是提示spfile正在使用,此时可以采用关闭+ASM实例(shutdown immediate),在重试就行了. B.注意字符集选择: Simplified Chinese ZHS15GBK C.安装完成的最后操作步骤 $ su root # /oracle/oralnventory/

如何利用WMP创建图片播放列表?

  很多时候,我们需要快速查看图片,但Windows的图片查看器并没有提供幻灯播放的功能,必须使用鼠标或键盘不停翻页,操作起来颇为麻烦.如何利用WMP创建图片播放列表? 其实,我们完全不用考虑第三方播放工具,可以使用Windows Media Player创建图片播放列表,从而以幻灯的形式播放图片,毕竟Windows Media Player是每台电脑都内置的.运行WMP,切换到媒体库查看模式,将相关图片拖曳到右侧窗格"未保存的列表"下,单击"播放"按钮,即可以幻灯

利用存储过程创建表提示权限不足,但是单独创建就可以

问题描述 利用存储过程创建表提示权限不足,但是单独创建就可以 利用存储过程创建表提示权限不足,但是单独创建就可以 create or replace procedure PRC_GZF_BZ_YWSLID(ywslid in verchar2) as L_YWSLID verchar2(30); tpg_gzfspbnum verchar2(30);begin L_YWSLID:=ywslid; tpg_gzfspbnum:='tpg_gzfspb'||L_SLIDID;execute imme

遍历-非递归利用队列创建二叉树

问题描述 非递归利用队列创建二叉树 BinTree create_BinTree( TElemType endTag, TElemType arr[], int n ) { BinTNode* T = new BinTNode; if( T == NULL ) { cerr<<"存储分配失败!"<<endl; exit( 1 ); } InitBTree( T ); LinkQueue Q; InitQueue( Q ); BinTNode *p = NULL;

photoshop利用滤镜制作彩色光环效果教程

给各位photoshop软件的使用者们来详细的解析分享一下利用滤镜制作彩色光环效果的教程. 教程分享:   新建一个 800*800 像素文档 . (别问我为什么,教程就这么写的).   2.选择菜单:滤镜 > 渲染 > 镜头光晕   3.选择菜单:滤镜 > 艺术效果 > 塑料包装.   4.选择菜单: 滤镜>扭曲>波纹   5.滤镜>扭曲>旋转扭曲   6.CTRL+T将光环变形.   7.添加一个蒙版,将画笔设置成黑色,笔刷硬度0%,大小为280左右,在

利用PHOTOSHOP创建斑驳的彩色金属文字

  最终效果预览: 第一步: 首先我们需要定义一种点状样式. 建立一个100×100像素的新文件,分辨率设置为300像素/英寸.背景填充为黑色.采用椭圆选择工具,设置为固定尺寸,高度和宽度都为24像素.在画布的任何地方点击,然后在选择框里点击,拖动并置于画布的左上角. 将选区填充为白色,拖出一条水平和垂直辅助线置于选区的中心.按下SHIFT键并保持,按4下方向键将选区向下移动40像素.填充为白色.现在将选区向上和向右分别移动20像素,再次填充白色.接下来将选区向下和向右分别移动20像素并填充白色

利用JavaScript创建功能强大的GUI

javascript|创建 大多数的计算机用户都非常熟悉Windows的图形用户界面(GUI),都通过使用Word或微软的电子邮件客户端软件了解了按钮.工具条.标签,但与客户端软件都拥有几乎一致的界面截然不同的是,我们可以发现,每个网站的界面都各不相同.用户需要学会如何使用每一种互联网应用程序.尽管大多数的互联网应用程序都不是太复杂,但一个用户需要不断地去学习应用程序界面,时时感觉自己象个新手,这对于用户而言,毕竟不是一件令人愉快的事. 通过利用javascript和CSS建立互联网应用程序或网