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

您所在的位置:网站首页 ps制作小图标教程 AI+PS教程!手把手教你制作毛玻璃质感UI图标!(含插件下载)

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

2024-07-16 07:52| 来源: 网络整理| 查看: 265

教程概述 下载(1.42M) 评论 (55) img

官宣!优设全新发布【AIGC领航者俱乐部】,先睹为快! 详情戳>>>

教程作者:小胡舵主(优设基础营就业衔接班老师)

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

效果图

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

关于教程

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

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

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

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

UAG-跳跳猪

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

UAG-大婷

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

UAG-错位

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

UAG-欣哥

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

 

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

教程步骤

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

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

Step 01 绘制草稿

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

Step 02 绘制形状

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

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

(1)信息图标

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

(2)文档图标

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

(3)邮件图标

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

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

(4)天气图标

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

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

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

Step 03 安装插件

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

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

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

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

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

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

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

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

Step 04 打开PSD文件

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

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

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

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

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

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

Step 05 制作文件夹图标

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Step 06 其他图标制作

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

也可以按着教程参数继续

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step 07 完善效果

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

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

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

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

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

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

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

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

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

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

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

最终效果图

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

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

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

PS教程!手把手教你制作毛玻璃效果海报!

教程效果图 关于教程 本次教程,教大家用PS临摹毛玻璃效果海报,(原作品出自Halo Lab),原作者是使用FIGMA软件制作,(当然AI也可是实现这种效果)本次我们用PS操作,简单易上手,适合新手练习,话不多说,我们开始吧。 教程步骤 Step 01 原理的基本介绍 首先在临摹之前,我们对其元素进行拆分,可以主要分成几大块:羽化层、卡片层、清晰层如图(拆分图解)所示。 Step 02 步骤演示 2.1 打开PS,Ctrl+n新建画布,宽度:1600px,高度1200px,(单位:像素 ...

阅读文章 >>

PS教程!教你制作亚克力磨砂质感海报!(含笔刷下载)

关于教程 嗨嗨嗨嗨嗨~我回来啦~ 灵感来源于最近在站酷上刷到的一个图,片头案例大家可以看到。 海报里用到的字体是@iFonts 尔雅新大黑,是前几天很火的设计打工人图标同款字体 BGM: Zella Day - Cynics vs Dreamers Zella Day - Starlight (这个姐妹的内首East of Eden我超喜欢,这次的配乐是她17岁时候的歌哦) 效果图 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step 01 新建文档 新建文档,大小为A4纸...

阅读文章 >> 附件下载 文件名 文件大小 提取码 下载来源 插件下载1.42Mdk4r 点此复制 登录下载 209赞 收藏 745

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

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

复制本文链接 分享: 取消 继续阅读与本文标签相同的文章: PS入门ps教程PS自学UI图标毛玻璃磨砂质感自学 img


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3