UI设计教程 开关图标ui图标设计教程(5)

来源:网络   作者:热心网友   发布时间:2016-08-02    浏览次数:137

接下来,用椭圆工具画出中间的小圆,添加图层样式。


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>



开关图标,设计一个调节开关图标_设计先锋网



开关图标,设计一个调节开关图标_设计先锋网


添加我们的LOGO,同时添加一个图层样式,黑色内阴影,白色投影。


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>



开关图标,设计一个调节开关图标_设计先锋网



开关图标,设计一个调节开关图标_设计先锋网


下面,我们画刻度。画个矩形,利用Ctrl+Alt+Shift+T,得到一圈刻度。(我想这个不用解释吧),依照我们的设定,刻度应该位于旋纽的下层,因为我们给旋纽设置了投影,而阴影也应该对刻度起作用,所以我将刻度置于旋纽投影的下层,刻度颜色为#cececf,添加一个跟刚才我们给LOGO设置的图层样式一样的样式,黑色的内阴影,白色的投影,透明度自己把握下,我们的效果如下:


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>


用椭圆工具画一个小圆,做旋纽的指示位置的标记。颜色随大家喜欢了,我自己用的颜色是#77e4ff,同样的添加一个黑色的内阴影,白色的投影。


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>


接下来,添加文字,这个没什么好说的,我的建议是一个文字一层,因为受旋纽阴影的影响,在阴影位置的文字,它看起来,相应的应该深一些,比如图中的MIN、0、1应该比其它的深一些。


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>

我们的最终效果:


开关图标,设计一个调节开关图标_设计先锋网<点图片看大图>

12345共5页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/4510.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通