UI教程,颓废机械风格UI图标教程(2)

来源:站酷 作者:yu0910 学习:6452人次

02 使用笔刷,颜色#8c8c8c,不透明度30%;

03采用素材图片 纹理.png,混合模式:变暗,不透明度30%;

这一步可自由发挥,自己觉得金属图片哪块可以作为纹理即用就可,参数也可自己调试叠加,以实际效果为主;

 

UI教程,颓废机械风格UI图标教程_www.16xx8.com

Step05:制作金属破损处,选择【钢笔工具】(快捷键P,可按Shift+P切换),绘制几个不规则多边形,形状自由发挥自定,配置金属纹理背景,颜色深点即可,此处举例:填充颜色#777777,设置图层样式:

【内阴影】:正片叠底,填充颜色#464646,角度90°,距离1px,阻塞0,大小1px;

再复制图层载入选区,填充颜色为#FFFFFF,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】。其他破损处也是使用这种操作方法;

 

UI教程,颓废机械风格UI图标教程_www.16xx8.com

Step06:复制图层di重命名为nei_di,点击【编辑】—【自由变换路径】(快捷键Ctrl+T),缩小90%(记得点击【保持长宽比】),右键清除图层样式,选择【混合选项】设置:

【渐变叠加】:线性渐变,色值从上到下为 #4b4b4b — #98988d,角度为90°;

【投影】:正片叠底,颜色#202020,角度90°,距离5px,扩展0,大小8px;

 

UI教程,颓废机械风格UI图标教程_www.16xx8.com

Step07:绘制备份图标,选择【椭圆工具】(快捷键U,可按Shift+U切换),在画布上按住Shift键画一个正圆,再选择【椭圆工具】,并选择路径【减去顶层形状】,画一个圆环,选择【钢笔工具】(快捷键P,可按Shift+P切换),并选择路径【合并形状】,在圆环右边处画一个三角形,最后再选【钢笔工具】,并选择路径【减去顶层形状】,画一个缺口,完成备份图标,重命名为backup,填充颜色#202020,设置图层样式:

【描边】:大小3px,外部,线性渐变,色值从上到下为 #787878 — #484848,角度为90°;

【内阴影】:正片叠底,颜色#474747,角度90°,距离3px,阻塞0,大小3px;

再复制图层backup重命名为backup_bian,载入选区,向上移动一像素,反向选区(快捷键Shift+Ctrl+I),再点击【图层】窗口的【添加图层蒙版】,设置图层样式:

【渐变叠加】:线性渐变,色值从上到下为 #282828 — #aeaeae,角度为90°;

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
谢亚超2015-09-06 06:03
求大神带 <嘻嘻>
那根带血的香蕉2015-07-22 02:29
一裤子哦~ 进军UI设计, 顺便问一下 有木有UI设计高手 带我装逼带我飞啊~~~~~~~~~ 562872177 我QQ
娅娚2015-07-09 05:46
<给力> ,请问啊,那个绘制圆环时,怎么找齐圆心画啊,还有三角形的,是怎么标准画啊

关注大神微博加入>>

网友求助,请回答!