当前位置:首页教程AdobeAI教程AI+PS教程!手把手教你制作毛玻璃质感UI图标!(含插件下载)

AI+PS教程!手把手教你制作毛玻璃质感UI图标!(含插件下载)

效果图

PS入门 ps教程 PS自学 UI图标

关于教程

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

最近,毛玻璃质感的UI界面与图标非常流行。

网上也出现非常多的优秀作品,很多同学也想学习。

因此,我将上周UAG的周主题打卡,定成了毛玻璃图标。

也有非常多同学上交了作业。

UAG-跳跳猪

PS入门 ps教程 PS自学 UI图标

UAG-大婷

PS入门 ps教程 PS自学 UI图标

UAG-错位

PS入门 ps教程 PS自学 UI图标

UAG-欣哥

PS入门 ps教程 PS自学 UI图标

那现在,我们回顾一下毛玻璃的特征与制作方法。

教程步骤

在开始制作之前,我们可以先整体的观察一下毛玻璃作品的特征。

PS入门 ps教程 PS自学 UI图标

Step 01 绘制草稿

1.1 根据以上分析结果,我将这次案例定为手机应用图标。先进行简单的草稿绘制。

Step 02 绘制形状

2.1 画稿画好之后,然后用AI开始画图形。

2.2 图形绘制期间,如果发现造型可优化的地方,也可以立即修改。

(1)信息图标

PS入门 ps教程 PS自学 UI图标

(2)文档图标

PS入门 ps教程 PS自学 UI图标

(3)邮件图标

PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标

(4)天气图标

PS入门 ps教程 PS自学 UI图标

2.3 所有图层画好之后,可以将图形放在一起,并且调整好大小位置,使图标看着整体更协调。

PS入门 ps教程 PS自学 UI图标

Step 03 安装插件

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

PS入门 ps教程 PS自学 UI图标

3.2 选中脚本的文件,点击打开。

PS入门 ps教程 PS自学 UI图标

3.3 出现下面提示,点确定。

PS入门 ps教程 PS自学 UI图标

3.4 然后跳出导出面板,选择为psd格式并设置好路径导出。

PS入门 ps教程 PS自学 UI图标

Step 04 打开PSD文件

4.1 将刚才导出的psd文件打开。

PS入门 ps教程 PS自学 UI图标

4.2 然后点图层筛选器的形状,并且按shift选中所有图层,将透明度改为100,并Ctrl+G编组。

PS入门 ps教程 PS自学 UI图标

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

PS入门 ps教程 PS自学 UI图标

Step 05 制作文件夹图标

5.1 图像-模式,将模式改为RGB。

PS入门 ps教程 PS自学 UI图标

5.2 粉色形状颜色填充改为dab8f8。

PS入门 ps教程 PS自学 UI图标

5.3 为第一个图标,【文件面】图层添加图层样式。

PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标

5.4 修改【文件底】的颜色填充,并对【文件面】右键-拷贝图层样式,对【文件底】右键-粘贴图层样式。

PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标

5.5 选中【文件纸】图层,添加渐变叠加。

PS入门 ps教程 PS自学 UI图标

5.6 Ctrl+J复制【文件纸】图层,放到【文件面】上方并做剪贴蒙版。

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

PS入门 ps教程 PS自学 UI图标

5.8 拷贝【文件面】图层,并修改颜色填充,然后调整图层模式为正片叠底。调整形状羽化,并针对【文件纸】做剪贴蒙版。

PS入门 ps教程 PS自学 UI图标

5.9 复制【文件纸】图层,去掉渐变叠加,修改填充色、图层模式、不透明度以及形状羽化,最后加上文字。这个图标就做好啦。

PS入门 ps教程 PS自学 UI图标

教程做完才意识到图层命名错了┮﹏┭

应该是邮件的被命名成文件了,不过就酱叭不改了。

Step 06 其他图标制作

后续图标的做法和上述类似,大家可以尝试自己做完后面几个。

也可以按着教程参数继续

6.1 将【文件面】和【文件纸】样式分别拷贝粘贴到【短信上/下】

PS入门 ps教程 PS自学 UI图标

6.2 复制【短信下】并针对【短信上】做剪贴蒙版,调整不透明度和形状羽化。

PS入门 ps教程 PS自学 UI图标

6.3 复制【短信下】并针对【短信上】做剪贴蒙版,并稍微往下放一点。

6.4 然后调整颜色填充、模式、不透明度和形状羽化。最后加上文字效果也做好啦。

PS入门 ps教程 PS自学 UI图标

6.5 将【文件面】和【文件纸】样式分别拷贝粘贴到【云朵/太阳】

PS入门 ps教程 PS自学 UI图标

6.6 拷贝【太阳】层,并放到【云朵】上方做剪贴蒙版,然后调整不透明度和羽化。

PS入门 ps教程 PS自学 UI图标

6.7 拷贝【云朵】层,去除渐变叠加,并放到【太阳】上方做剪贴蒙版。然后设置颜色、模式、不透明度以及羽化。最后再加上文字就做好啦。

PS入门 ps教程 PS自学 UI图标

6.8 分别拷贝【云朵/太阳】图层样式,粘贴到【夹子/纸张】。

PS入门 ps教程 PS自学 UI图标

6.9 拷贝【纸张】层,并放到【夹子】上方做剪贴蒙版,然后调整不透明度和羽化。

PS入门 ps教程 PS自学 UI图标

6.10 拷贝【夹子】层,去除渐变叠加,并放到【纸张】上方做剪贴蒙版。然后设置颜色、模式、不透明度以及羽化。最后再加上文字就做好啦。

PS入门 ps教程 PS自学 UI图标

Step 07 完善效果

7.1 新建一个背景图层,用一个大画笔,分别吸取紫色和蓝色,在画面里一顿瞎涂。

7.2 然后滤镜-模糊-高斯模糊,并且将图层不透明度改为50。

PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标

7.3 新建一个白色圆角矩形,并调整不透明度,然后加上投影样式。

PS入门 ps教程 PS自学 UI图标

7.4 Ctrl+Alt+Shift+E盖印图层,并点击滤镜-Camera Raw滤镜。

7.5 然后调整校准和效果,这样整个图标就做好啦。

PS入门 ps教程 PS自学 UI图标
PS入门 ps教程 PS自学 UI图标

最终效果图

PS入门 ps教程 PS自学 UI图标
温馨提示:

文章标题:AI+PS教程!手把手教你制作毛玻璃质感UI图标!(含插件下载)

文章链接:https://www.xtuku.com/10552.html

更新时间:2022年09月17日

声明:本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:590173@qq.com我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读新图酷网网络免责服务协议
下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余

给TA赞助
共{{data.count}}人
人已赞助
1 条回复 A文章作者 M管理员
个人中心
购物车
优惠劵
搜索