UI图标,设计旋转开关UI图标教程(4)插图

UI图标,设计旋转开关UI图标教程(4)

本篇UI教程跟大家分享如何设计一枚旋转风格的开关按钮,主体由灰白色组成,简单漂亮,想学UI设计的同学就跟着练习一下吧。 我们来看看最终效果: 老规矩,先来分析一下。这里我们主要分为二个部分:

UI图标,设计旋转开关UI图标教程(2)插图

UI图标,设计旋转开关UI图标教程(2)

步骤四: 现在为装饰圆添加不同的描边效果,并将多余的线条利用选区框选出来,在图层 蒙版 遮中填充黑色。 步骤五: 现在选择直线段工具,长度20px,粗细4px,并复制为加号移动到合适位置,添加OFF文字Adobe 黑体 St

广告位
UI图标,设计旋转开关UI图标教程(3)插图

UI图标,设计旋转开关UI图标教程(3)

步骤八: 继续使用椭圆工具,绘制一个180px*180px的正圆,并添加图层样式。 步骤九: 现在我们来绘制一下最后的小圆吧,绘制一个20px*20px的正圆,并添加图层样式。 步骤十: 就剩高光部分了哦,绘制一个大小为180p

开关按钮,设计一个滑动的控件开关图标(4)插图

开关按钮,设计一个滑动的控件开关图标(4)

设计一个滑动开关按钮,主要利用AI和PS制作,AI负责设计外形,PS负责按钮的质感,有兴趣的可以一起跟着教程练习一下。 先看看效果图 在AI建1200px*800px画板 绘制一个400px*70px矩形 边角设置35px ,好像只有cc版本

开关按钮,设计一个滑动的控件开关图标(2)插图

开关按钮,设计一个滑动的控件开关图标(2)

背景拉个渐变e7e3dc到f7f5f3 小圆拉个c2c0be到d6d6d6 按钮做描边渐变叠加投影的处理 描边 渐变叠加

开关按钮,设计一个滑动的控件开关图标(3)插图

开关按钮,设计一个滑动的控件开关图标(3)

投影 里面的样式 渐变叠加f28b00,e75300,db7500 内发光 里面的一圈a4a4a4到e8d7be 最外层的渐变d0d0d0到ffffff 方法都差不多 细节要处理好 最好完成图 教程到这里结束,本篇教程主要学习点是图层样式的的运用,大

开关图标,设计一个调节开关图标(5)插图

开关图标,设计一个调节开关图标(5)

今天给大家带来的是一个调节开关主题图标,制作方法也是跟以往的差不多,主要是用路径描绘形状,然后用图层样式制作质感,想学的跟着教程一起动动手吧。 教程源文件: http:///photoshop/sucai/2016/h

开关图标,设计一个调节开关图标(2)插图

开关图标,设计一个调节开关图标(2)

画一个圆角矩形,并添加图层样式。 复制一层这个圆角矩形,移到下层,将图层填充修改为0,添加一个投影图层样式,我们来增加阴影的层次感。

开关图标,设计一个调节开关图标(4)插图

开关图标,设计一个调节开关图标(4)

接下来,用椭圆工具画出中间的小圆,添加图层样式。 添加我们的LOGO,同时添加一个图层样式,黑色内阴影,白色投影。 下面,我们画刻度。画个矩形,利用Ctrl+Alt+Shift+T,得到一圈刻度。(我想这个不用解释吧),

开关图标,设计一个调节开关图标(3)插图

开关图标,设计一个调节开关图标(3)

载入圆角矩形的选区,在主体阴影下层新建一层,填充黑色,执行一个动感模糊,配合 蒙版 ,我们做了一个长投影,更改图层混合模式为正片叠底,图层不透明度为33%。 接下来,我们来做那个中框,这里需要注意的是圆角

正在加载中...

已加载全部内容

已经没有更多文章了