UI设计教程,日历UI图标教程(3)

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


用和“连接轴A”同样的方法,在同一层里复制一个出来,调整下位置就好了。


UI教程,UI日历组件的设计思路。


分解三:数字及说明

STEP1:数字

选一个较粗的英文字体,调整字号及位置,添加图层样式:斜面和浮雕、渐变叠加及投影:


UI教程,UI日历组件的设计思路。


STEP2:添加蒙版

给数字添加蒙版(这里就不要勾选“图层蒙版隐藏效果”了),大小自定,但注意要以分割线为基准,上下两部分等距离,用铅笔或矩形工具来把数字“拦腰斩断”:

UI教程,UI日历组件的设计思路。


STEP3:标注一下

在适当的位置用适当的字号、字体写上“MONTH”:

UI教程,UI日历组件的设计思路。(想想这个凹进去的效果怎么做的)


STEP4:老板,打包!

我们把除去背景和最底下的主轴外,所有的图层都选中ctrl+g整个图层组。复制一下,移动到适当位置,更改下文字:

UI教程,UI日历组件的设计思路。


STEP5:老板,都打包!

做完这些后,基本上也就做完了。我们把除了背景外的所有图层/图层组都打包放在一个图层组里,给这个最终的图层组添加投影:

UI教程,UI日历组件的设计思路。


分解四:添加文字

然后我们写上一些文字啥的,就全部做完了。当然了,文字不加也行。


最终效果:

想想这个视频组件是怎么做的?

写在最后的话:

不过,有的时候作者会犯迷糊,写的和实际做的有出入。小伙伴们明明发现了这个现象,却不去思考,还跟着作者去做,那怎么能成的出效果呢?这个时候就应该好好想想找方法去解决这个BUG,不管成功与否(能力问题),至少我们努力了,去思考解决问题了(态度问题)。

本教程完!

123共3页
联盟广告
×

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

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

相关推荐

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

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

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

×

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

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

×

充值学币 立即开通