当前位置:首页 > PS教程 > 网页设计

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

  • 2022-12-24 23:01:27
  • 来源/作者:互联网/佚名
  • 己被围观

和大家分享的是一个UI组件:日历的绘制过程。整个文章不会出现具体参数,但我会把思路和大家分享。(注:本教程不适合新手入门学习,但可以作为研究对象来研究,思路可以借鉴。)

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

 

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

 

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

 

分解三:数字及说明

STEP1:数字

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

 

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

 

STEP2:添加蒙版

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

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

 

STEP3:标注一下

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

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

 

STEP4:老板,打包!

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

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

 

STEP5:老板,都打包!

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

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

 

分解四:添加文字

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

 

最终效果:

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

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

写在最后的话:

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

最后我想对伸手党说:学会自主学习,提问欢迎,但要转换成自己的知识;对于无耻的伸手党,我只能说:白给你吃枣还特么嫌核大,还要脸不要脸!

最后的最后,狼狼祝愿大家早日成为学霸,登上大神的光辉宝座!

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • APP展示图,教你怎么用PS制作APP的界面图片 APP展示图,教你怎么用PS制作APP的界面图片
  • 用ps制作大拇指胜利手势logo 用ps制作大拇指胜利手势logo
  • 用ps制作金属质感徽章 用ps制作金属质感徽章
  • 用ps制作绿色环保Logo 用ps制作绿色环保Logo
  • 用ps制作放大缩小logo 用ps制作放大缩小logo
  • ps cs6设计火箭UI图标 ps cs6设计火箭UI图标
  • 教你用PS打造网页效果图全过程 教你用PS打造网页效果图全过程
  • 进度条,设计一个彩色进度条 进度条,设计一个彩色进度条