AI+PS教程!教你制作毛玻璃质感UI图标!

时间:2021-01-19
类别:PS教程
水平:入门
观众:3.8w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:就业衔接班03期-58-小高

教程指导:肥子老师

交作业:#优设每日作业#

效果图

AI+PS教程!教你制作毛玻璃质感UI图标!

制作前解析

在大家制作前需要思考两个点

1. 图标的应用范围

AI+PS教程!教你制作毛玻璃质感UI图标!

以我自己本身为例就以手机应用图标为主,所以我以食衣住行育乐为出发点,然后延伸出大家平时可能会做的事情,常用到的APP有哪些

2. 毛玻璃图标的特征与需要考量的点

AI+PS教程!教你制作毛玻璃质感UI图标!

造型简单与图标上下层面积把控很重要,会直接影响整体效果,切记~切记~

想要跟肥子老师深入学习UI图标图标的制作吗?点击下方链接报名她的课程,肥子老师手把手教你做图标:

教程步骤

Step 01 绘制草稿

根据前面图标的应用,思考出一系列自己想做的图标进行草稿制作

Step 02 新建文档

开启AI新建一个画布,快捷键Ctrl+N

这边我新建一个800*800像素的画布

AI+PS教程!教你制作毛玻璃质感UI图标!

Step 03 绘制形状

这边我以形状图标美食APP为例

图标制作

AI+PS教程!教你制作毛玻璃质感UI图标!

Step 04 安装插件

插件在文章底部下载哦~

Step 05 插件使用

点选档案 > 指令档 > 其它指令

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

5.1 点选后如果出现下方显示点击确定即可

AI+PS教程!教你制作毛玻璃质感UI图标!

5.2 存取副档选PSD即可

AI+PS教程!教你制作毛玻璃质感UI图标!

Step 06 调整效果

6.1  PS图层整理

转过来后会出现下方这样,这时尽量让图层都是形状图层,方便后面的布尔运算对形状可以做些微调整

AI+PS教程!教你制作毛玻璃质感UI图标!

转过来后,会发现有些较复杂的图层没办法转形状图层,这时候就需要回到AI

Ctrl+C复制 Ctrl+V贴过来PS了,有时候还是得靠自己的小手手不能完全信任套件的~

6.2 之后将形状图层都提取出来做群组命名即可

AI+PS教程!教你制作毛玻璃质感UI图标!

Step 07 效果制作

7.1 固有色上色

背景填色:#200833

叉子填色:#533f62

盘子填色:#ff88e7

AI+PS教程!教你制作毛玻璃质感UI图标!

7.2 图层样式效果

盘子图层样式添加

渐层覆盖

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

这边盘子的图层样式就添加完毕啰 ~ 换叉子

叉子图层样式添加

笔画

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

内阴影1

(此内阴影是为了营造出玻璃的整体透明白色质感)

AI+PS教程!教你制作毛玻璃质感UI图标!

内阴影2

(这边假设光源是由左上往右下打 所以玻璃的左上与右下方会产生两个高光点)此为右下高光边缘

AI+PS教程!教你制作毛玻璃质感UI图标!

内阴影3

此为左上高光边缘 因为接近光源,所以较亮

AI+PS教程!教你制作毛玻璃质感UI图标!

渐层覆盖

由于玻璃质感本身较为通透,所以光罩后,玻璃的颜色会贴近背景颜色,这时可以压暗,提升通透感

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

7.3 图层蒙版使用

7.3.1 Ctrl+J 复制盘子移动到叉子上方做剪贴蒙版

AI+PS教程!教你制作毛玻璃质感UI图标!

这时候发觉上方没有玻璃质感,此时就要对复制的盘子进行明度调整,让整体产生玻璃光泽感

7.3.2 调整复制盘子的固有色与渐变覆盖(渐变叠加)不透明度

固有色改成:#ffffff

渐层覆盖(渐变叠加):不透明度 79%

让渐变叠加因为不透明度的关系可以透出复制-盘子的固有色#ffffff的部分,将整体明度做一个拉高的部分

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

这时候就会有玻璃的通透感,然后这里会发现,通常我们从玻璃看过去的物体边缘都会有一些模糊感,但这边的盘子明显感觉不到,此时就需要再加上模糊的感觉

7.3.3 玻璃模糊感制做

选择复制盘子的图层,开启视窗内容(属性),有些人找不到可能命名为属性可以找找,然后调整上层盘子的羽化,这时候盘子边缘就会出现模糊效果了

羽化:7.0

AI+PS教程!教你制作毛玻璃质感UI图标!

7.4 细节点缀

7.4.1 添加投影

由于光影是由左上方往右下方打,所以在叉子右下旁会产生影子,并显示在盘子上,所以要做剪贴蒙版,切记叉子投影的混合模式要选择色彩增值(正片叠底)让整体更暗些,然后透过内容(属性)羽化,调整投影的边缘模糊度 ,然后再去调整下影子不透明度

羽化值:29.9

固有色:#432958

影子不透明度:43

影子色:#432958

AI+PS教程!教你制作毛玻璃质感UI图标!

AI+PS教程!教你制作毛玻璃质感UI图标!

7.4.2 强化高光

由于光由左上往右下打,所以会产生两个高光点,这时候我们在网上找高光素材添加高光上去,素材混合模式选用滤色,让亮部留下来,若高光过长,可以用蒙版和笔刷去做些微调整

AI+PS教程!教你制作毛玻璃质感UI图标!

光效素材在文章底部链接里

最终效果展示

AI+PS教程!教你制作毛玻璃质感UI图标!

一篇教程看不够?点击下方链接报名肥子老师的课程,让肥子老师手把手教你做UI图标!

想要来「优优交流群」和其他小伙伴一起学习分享吗?搜索 QQ 群:1105212050 进群暗号:优优的忠实观众

学完这篇教程的人还在学…

附件下载

文件名 文件大小 提取码 下载来源
插件下载1.42Mdk4r 点此复制 登录下载
素材下载324Kp17s 点此复制 登录下载
45 收藏 226

非特殊说明,本站 UiiiUiii.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @优优教程网 授权。

转载时请在文首注明,来源 UiiiUiii.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。UiiiUiii 保留追究相应责任的权利。

复制本文链接
img

发表评论 已发布 15

还可以输入 800 个字
yzm
 
 
加载更多评论
没有更多评论了

优优教程网 365 天打卡计划

点击 #优设每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 优优教程网365打卡计划 – DAY 01 】,优秀作业将有机会被 @优优教程网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片