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

类别:PS教程
水平:普通
观众:5.4w
设计师入站必刷的宝藏频道,掌握设计真本领与AI并肩 👉 立即点击

教程作者:就业衔接班03期-13-猪丽

教程指导:肥子老师

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

关于教程

画图标之前想想,抓住毛玻璃的要点,还有我们应用于那些图标会比较合适!简单一点*3次,别搞太复杂,主打是毛玻璃,不是应用图标哈,我们的元素是清晰表达出毛玻璃的假象,有玻璃的feel就对了。

关于教程我的例子是以手机应用图标为主,想要的文件类的,或者天气类型都可以!生活中很多小物品或者常见的东西都可以发挥想象,画出来哈!

教程效果图

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

教程步骤

Step 01 新建文档

打开Adobe Illustrator,点击文件->新建(快捷键Ctrl+N)创建一个新文件,参数设置如下:

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

Step 02 绘制图形

简单草稿绘制,然后用AI开始画图形,并适当调整。

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

用两个实例来演示,方法都是一样的哈!

Step 03 安装插件

插件下载:

下载本教程提供的插件脚本并解压。然后点击文件-脚本-其它脚本。

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

3.1 选中Aipsd这个插件打开

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

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

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

3.3 然后跳出一个页面后,选取一个地方保存为psd格式导出,

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

3.4 导出模式为RGB

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

关于这款插件更详细的使用方法和注意事项,看这里!

Step 04 调整图标

4.1 把刚刚的psd文件打开

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

4.2 然后点图层筛选器的形状,并且按shift选中所有图层,将透明度改为100,并ctrl+G编组,或者点下面这个图标

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

4.3 然后关掉筛选器,将形状以外的所有图层删除。并且按图标含义编组

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

4.4 最后新建一个图层,放到最底层ALT+DELETE填充白色做背景

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

Step 05 添加效果

5.1 上色

绿色形状填充颜色为:0ec2a2

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

淡黄色形状填充颜色为:d1e4a7

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

5.2 选中【时钟下】,添加渐变叠加,数值如下

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

5.3 Ctrl J复制【时钟下】图层,放到分秒针上方并做剪贴蒙版。

将图层透明度改为50,并调整羽化属性。

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

5.4 给【时钟上】添加内阴影和渐变叠加

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

5.5 复制一层【时间上】然后放在下面,去掉效果模式,并且用创建剪贴蒙版和羽化和修改模式。看不到投影的变化,移动一下,或者Ctrl+t【时间上】拷贝图层利用键盘上下键看到变化

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

注意改一下混合模式

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

最终效果图

一个图标就做好啦,想要更加精彩,请关注肥子老师。

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

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

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

60 收藏 290

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

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

复制本文链接
img

发表评论 已发布 24

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

优优教程网 365 天打卡计划

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

/

支持键盘 ← → 键翻阅图片