UI设计教程 水滴UI图标教程

来源:网络   作者:热心网友   发布时间:2016-09-03    浏览次数:118

制作拟物感水滴效果图标,制作方法很简单,设置好底座颜色后,添加上树叶素材和画上水滴即可完成。

先看看效果:

水滴图标,水滴主题UI图标_设计先锋网

第一步:绘制图标底座形状,这里给的是300*300,圆角度数为20。

水滴图标,水滴主题UI图标_设计先锋网

第二步,给底座填充一个从深绿色到浅绿色的渐变。

水滴图标,水滴主题UI图标_设计先锋网

第三步:使用图层样式顶部添加浅色,内阴影。

水滴图标,水滴主题UI图标_设计先锋网

第四步:使用图层样式底部添加投影。

水滴图标,水滴主题UI图标_设计先锋网

第五步:剪切蒙版放入一张合适的树叶,混合模式给叠加,不透明度给70%。

水滴图标,水滴主题UI图标_设计先锋网

第六步:画几个亮黄色的圆,属性给较大一点的羽化,剪切入底座,打造光斑效果。

水滴图标,水滴主题UI图标_设计先锋网

最后两步,也是比较重要的步骤:

第七步:用椭圆绘制出水滴的形状。分别给内发光,径向渐变,投影打造水滴效果。

水滴图标,水滴主题UI图标_设计先锋网

第8步:和上一步用相似的方法,绘制出水滴上的光感效果,透明度给20%。

水滴图标,水滴主题UI图标_设计先锋网

各图层参考用:

水滴图标,水滴主题UI图标_设计先锋网

全教程完!

联盟广告
×

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

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

相关推荐

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

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

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

×

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

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

×

充值学币 立即开通