菜单 优优教程网 - 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...

上集内容回顾： [link https://uiiiuiii.com/other/1212438894.html] 邻近色配色实操 案例1 本次提取上期“邻近色配色”理论篇讲解的部分文案，进行配色的实操演示： 在PS中新建文件，背景选择红色，英文放大铺满背景，颜色选择红色的邻近色橙色。 画出白色圆角矩形，给矩形添加图层样式“描边”和“投影”。描边的填充类型选择“渐变”，颜色选择白色和浅橙色的渐变，模拟玻璃边缘的厚度。

9个网页设计实用在线工具：Editor X 无代码建站神器、COPY-PASTE-CSS  按钮样式的CSS库、UI GLASS 毛玻璃效果、Tail Blend 渐变蒙版的网站、color gradient generator 渐变色、transition style 网页过渡动画等、

前言 经过一年的时间，终于通过UE4将去年的《PERIODIC TABLE 元素周期表 概念设计》成功实现出来，也是对初入学习UE4第一个学习项目。这其中也是踩了大大小小不少坑，这座山找不到解决办法，翻到另一座山解决。看不懂的鸟语找各种朋友帮忙。

关于教程 不好意思又拖更了，对于喜欢未雨绸缪的我来说把这期的主题定位到了作品集封面，毕竟招聘旺季又快到来了。 这一期并不是讲作品集如何去排，而是给大家讲讲目前国内市面上流行的作品集封面风格到底有哪些？该如何去实现？

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