图标教程,设计钟表UI图标教程

来源:站酷 作者:全栈UI笔记 学习:11496人次

本篇UI图标教程教大家如何设计一枚时钟主要的UI图标,教程难度中等,主要是绘画部分,质感制作主要由图层样式来处理,该部分主要是数值的设置,难度不算大,分享给新手学习吧。

最终效果:

图标教程,设计钟表UI图标教程_www.16xx8.com
www.16xx8.com

老规矩先来分析一下,这里我们主要分为三个部分:底座、表盘、指针,底座指针问题都不大,主要是表盘部分需要用到多个图层及图层样式来表现图标的立体感,骚年分析完已经成功一半了,离成功还会远么?噢耶!!!

图标教程,设计钟表UI图标教程_www.16xx8.com

步骤一:

首先新建画布1500px*1000px画布,命名为钟表,填充背景颜色#4b4b4b,添加图案叠加图层样式。

图标教程,设计钟表UI图标教程_www.16xx8.com

图标教程,设计钟表UI图标教程_www.16xx8.com

步骤二:

使用圆角矩形、绘制一个600px*600px圆角矩形,圆角半径为90px的图层,并为它添加图层样式。

图标教程,设计钟表UI图标教程_www.16xx8.com

图标教程,设计钟表UI图标教程_www.16xx8.com

步骤三:

接下来使用椭圆工具、绘制一个550px*550px的大圆,并为它添加图层样式。

图标教程,设计钟表UI图标教程_www.16xx8.com

图标教程,设计钟表UI图标教程_www.16xx8.com

步骤四:

继续使用椭圆工具、绘制一个515px*515px的圆,并为它添加图层样式。

图标教程,设计钟表UI图标教程_www.16xx8.com

图标教程,设计钟表UI图标教程_www.16xx8.com

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
Elyvan2020-05-06 12:31
我的作业:

12018-04-26 01:49
钟我的作业:
joker2018-04-23 11:25
大神
损友2017-09-30 02:41
我的作业:
冲刺在爱情前方2017-08-13 11:38
时钟图标作业我的作业:
IMWIM2017-08-11 04:05
感谢大神分享!顺便提一下,左边应该是W,右边是E是吧?
我辣么萌是不是爱上我辣2017-08-09 02:29
我的作业:
何为无不曾有2017-08-07 02:54
我的作业: 学习了,没想到镜面还可以这么做的
和尚不恰肉2017-07-26 03:13
想仔细了解一下
凉城旧爱i2017-07-26 11:22
谢谢老师 多多学习
骨头收集狂2017-07-26 11:14
学习学习
眼角的夏沫秋凉2017-07-26 08:53
感觉就是在装B
天上的太阳之歌2017-07-26 07:33
谢老师分享!!!!!!
小白白脸2017-07-26 04:19
签到
角落里的寂静2017-07-26 04:19
签到

关注大神微博加入>>

网友求助,请回答!