菜单 优优教程网 - UIIIUIII

毛玻璃材质可以让用户明确感知到多个不同的层次。合理巧妙的运用这种看不清楚但却可以看到设计，可以为用户提供独特的虚实结合的视觉愉悦感，提高用户体验！ 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就对了。 关于教程我的例子是以手机应用图标为主，想要的文件类的，或者天气类型都可以！

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

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

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

关于教程 在之前的教程中，我们已经学会了静态磨砂效果怎么制作，这次我们来学习动态磨砂效果哦！ [link https://uiiiuiii.com/photoshop/1212333419.html] 效果图 关键步骤提示 详细操作请看文章开头的视频教程演示。 Step 01 新建画板 在PS中新建1000*600的画板，背景内容设置为透明 Step 02 绘制矩形 绘制1000*600的矩形，调整圆角为50像素，将填充透明度设为10% Step 03 添加图层样式 打开图层...

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

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

关于教程 最近在Dribbble看到了这种风格的Icon，感觉非常有趣，就模仿它的风格制作了一组动态的Icon，今天带来的是第四期：心跳图标的教程，主要知识点在于如何使用凸出效果和循环表达式，希望能对大家有一点点帮助！ 效果图 教程步骤 STEP.1 绘制图标 在AI中绘制图标，合成大小800*600，提前分层方便导入AE STEP.2 将图标导入AE 将AI文件拖入AE，选择导入种类为合成，素材尺寸为图层大小 STEP.3 调整合成设置 调整合成设置，帧速率30，持续时间2...

关于教程 最近在Dribbble看到了这种风格的Icon，感觉非常有趣，就模仿它的风格制作了一组动态的Icon，今天带来的是第二期：收藏图标的教程，主要知识点在于如何制作摆动的效果，希望能对大家有一点点帮助！ 效果图 教程步骤 STEP. 01 绘制图标 在AI中绘制图标，合成大小800*600，提前分层方便导入AE STEP. 02 导入AE 将AI文件拖入AE，选择导入种类为合成，素材尺寸为图层大小 STEP. 03 调整合成设置 调整合成设置，帧速率30，持续时间2秒 ...

关于教程 最近在Dribbble看到了这种风格的Icon，感觉非常有趣，就模仿它的风格制作了一组动态的Icon，今天来和大家分享一下制作过程，希望能对大家有一点点帮助！ 效果图 教程步骤 STEP. 01 在AI中绘制图标，合成大小800*600，提前分层方便导入AE STEP. 02 将AI文件拖入AE，选择导入种类为合成，素材尺寸为图层大小 STEP. 03 调整合成设置，帧速率30，持续时间2秒 STEP. 04 新建纯色，作为背景，置于最底层 STEP. 0...

AI 自带的导出 PSD 的功能会栅格化形状图层，无法进行二次修改。而今天这个插件可以让你一键将 AI 文件导出为 PSD，同时保留形状图层的路径，提高你的工作效率！

Icon 的设计会贯穿全套设计稿，所以在设计的环节中必不可少，耐看又实用的 Icon 设计会帮助品牌和企业更好的树立形象，形成自己的设计语言。 IT Company Icon by Witech Enterprise Pink Icon Set by Erşad Başbağ  Icon Set by Kevin Dukkon 毛玻璃icon by ADD Halloween Icon Part 2 by Giga Tetuko Frosted glass style ICON icon des...

关于教程 最近在Dribbble看到了这种风格的Icon，感觉非常有趣，就模仿它的风格制作了一组动态的Icon，今天带来的是第三期：天气图标的教程，主要知识点在于如何制作循环的随机运动效果，希望能对大家有一点点帮助！ 效果图 教程步骤 STEP. 01：绘制图标 在AI中绘制图标，合成大小800*600，提前分层方便导入AE STEP. 02：导入AE 将AI文件拖入AE，选择导入种类为合成，素材尺寸为图层大小 STEP. 03：调整合成 调整合成设置，帧速率30，持续时间2...

效果图 关于教程 在外网看到一个大神制作了类似的效果，自己也尝试了一下，并精简了一下流程，希望对大家有些帮助！ 教程步骤 STEP 01：绘制火箭 在AI中创建800*600画板，绘制火箭飞船的基本形状 STEP 02：新建合成 打开AE，新建合成 STEP 03：将文件导入AE 将飞船AI文件导入AE，从矢量图层创建形状 STEP 04：添加位置属性 分离飞船的X\Y轴位置属性，为Y轴添加随机运动 STEP 05：调整随机运动 调整随机运动的参数，设置循环动画 ...

关于教程 第一次看到这个教程是在YouTube上由MotionCafe发布的，因为全程没有解析，看的云里雾里，另外新版XP和OC也有一些地方进行了改版，所以我就索性重新做了一期教程，希望对大家有点点帮助~ 如果你想要下载源文件学习，可以关注公众号「设计师深海」回复「粒子线条」即可~ 效果图 教程步骤 STEP.1 建立粒子系统 调整粒子发射器的形状和方向 STEP.2 制作卷曲线条效果 使用Trail和Turbulence制作卷曲线条效果 STEP.3 制作粒子效果 添加球体并...