菜单 优优教程网 - UIIIUIII

本期视频我们来研究在Blender中，如何制作出这种质感很棒的通透毛玻璃卡通动画效果，通过材质节点以及合成器的相互搭配就可以轻松地实现。

视频第 2 部分：图标动效制作 https://www.bilibili.com/video/av438076291 视频第 3 部分：扩展案例 https://www.bilibili.com/video/av993064170 一、关于教程 微软 Fluent 设计语言引领了毛玻璃风格的潮流，它能创造出一种柔和而精致的视觉效果，深受各大厂的喜爱。本期教程将使用 Sketch + AI + AE 向你展示如何从零开始制作磨砂毛玻璃动态图标的全过程，涵盖设计理念，制作方法，以及如何拓展设计出不同的...

案例效果图 本集教程内容概要 本集视频是10个超实用UI设计案例「UI实战系列教程」的第六集，主要讲解的内容有毛玻璃风格介绍、毛玻璃的特点与使用方法、毛玻璃界面与图标的案例演示以及案例总结。 即时设计是一款在线可协作的UI设计工具，目前支持Sketch、figma、XD的本地导入和链接导入。支持创建交互原型、获取设计标注、快速切图、团队协作等。

一、关于教程 欢迎来到磊土视界，本期教程我们分享一下怎样用AI设计制作磨砂感毛玻璃效果图标。学会之后大家可以发挥自己的创意，尝试添加更多细节做出丰富有层次的玻璃质感图标。 知识点：剪切蒙版 \ 高斯模糊。

本期视频使用 Sketch + AI + PS +AE ，为你带来从零开始制作轴侧毛玻璃图标动效的全过程详解，学会之后使用类似的思路，还可以拓展设计出不同的毛玻璃质感图标。

关于教程 helllo大家好，我是训练营的肥子老师。 毛玻璃作为近两年兴起的设计风格，可谓是席卷设计圈，去年我写过这个毛玻璃图标的教程： 收到了很多同学的反响，也有不少同学练习完成并且交上了优秀的作业。 UAG-跳跳猪 UAG-大婷 UAG-错位 UAG-欣哥 现在我来出续集了！

关于教程 神奇的毛玻璃效果动态窗口！还在苦恼于那些繁琐的步骤吗？本期视频教你一步实现！

关于教程 毛玻璃是近两年非常流行的设计形式，上图在毛玻璃的基础上，加入了雨滴纹理，显得更加的有质感且新颖。 下面，我将教大家如何制作雨滴纹理毛玻璃。 教程简概 首先，我们需要安装Adobe XD，可在Adobe Creative Cloud中找到并安装。

毛玻璃材质可以让用户明确感知到多个不同的层次。合理巧妙的运用这种看不清楚但却可以看到设计，可以为用户提供独特的虚实结合的视觉愉悦感，提高用户体验！ Smart Home Glassmorphism App by Mikołaj Gałęziowski 🌵 Pregnancy App Concept by Abdulqadir Rampurawala Money Transfer App by Saud Ali Glass Widgets by Brittany Swain ...

这篇文章主要分享怎么做一套毛玻璃拟态图标，以及在这基础上如何发散创意。某天上了木鼠老师的图标公开课，课上有示范毛玻璃拟态效果的图标，我就跃跃欲试想做一套。 木鼠老师课程：木鼠UI实战就业班 有的人问为什么做了那么久UI，还去听基础课呢？

关于教程 这次主要是做毛玻璃材质的图标，最近看到很多关于分析星座的文章，所以我就想做一套星座配对的图标。 效果图 教程步骤 在开始制作之前，我们可以先来观察一下毛玻璃作品的特征。 Step 01 绘制草稿 Step 02 新建文档 2.1 打开AI新建一个画布。

时下流行的毛玻璃质感，可以达到视觉上的通透，虚实结合，达到一种轻透高级的美感，并极富层次感，巧妙使用可以提高设计的高级感。一起来看看这12组毛玻璃质感icon设计吧~ Pet Iconly Essential icons by Antonina     Image may contain screenshot by Hassan Ali     Freebie Iconly Glass by Afshin T2Y ️ Glass...

UI设计中想用上流行的毛玻璃效果，开发小哥却骂骂咧咧？今天我就给大家找来了一个好用的毛玻璃效果生成器，支持在线调节参数，一键复制CSS代码使用，是时候马住甩给开发小哥了~

关于教程 画图标之前想想，抓住毛玻璃的要点，还有我们应用于那些图标会比较合适！简单一点*3次，别搞太复杂，主打是毛玻璃，不是应用图标哈，我们的元素是清晰表达出毛玻璃的假象，有玻璃的feel就对了。 关于教程我的例子是以手机应用图标为主，想要的文件类的，或者天气类型都可以！

关于教程 最近超流行的毛玻璃质感图标究竟要怎么做？本期教程带你一网打尽~ 毛玻璃是最近非常流行的质感效果，如果你也想要自己原创这样的图标，戳链接找肥子老师手把手教你哦！ 教程效果图 教程步骤 Step 01 绘制图标的基本形状 1.1 影票图标 绘制一个宽96px，高64px，圆角半径12pxcv的圆角矩形，然后选择椭圆工具，选择减去顶层形状，按住shfit键，绘制宽高均为24px的正圆，这样就减出基本的形状。

效果图 制作前解析 在大家制作前需要思考两个点 1. 图标的应用范围 以我自己本身为例就以手机应用图标为主，所以我以食衣住行育乐为出发点，然后延伸出大家平时可能会做的事情，常用到的APP有哪些 2. 毛玻璃图标的特征与需要考量的点 造型简单与图标上下层面积把控很重要，会直接影响整体效果，切记~切记~ 想要跟肥子老师深入学习UI图标图标的制作吗？点击下方链接报名她的课程，肥子老师手把手教你做图标： 教程步骤 Step 01 绘制草稿 根据前面图标的应用，思考出一系列自己想做的...

效果图 关于教程 最近，毛玻璃质感的UI界面与图标非常流行。 网上也出现非常多的优秀作品，很多同学也想学习。 因此，我将上周UAG的周主题打卡，定成了毛玻璃图标。

关于教程 在之前的教程中，我们已经学会了静态磨砂效果怎么制作，这次我们来学习动态磨砂效果哦！ 效果图 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step 01 新建画板 在PS中新建1000*600的画板，背景内容设置为透明 Step 02 绘制矩形 绘制1000*600的矩形，调整圆角为50像素，将填充透明度设为10% Step 03 添加图层样式 打开图层样式，添加两个内阴影，颜色为30%的白色，角度分别调整为150°和-30°，不要勾选全局光 Step...

行业发展真快！设计趋势每年都在迭代，与此同时，加速设计师工作效率的工具也越来越多，选择适合自己才是关键，Figma在诞生之初就被赞誉为下一代设计神器，有时间的同学不妨从简单的教程开始。

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