点击此处返回

每日可免费学习1个教程

立即登录>

课程分类

软件入门平面设计 3D数字 C4D教程 Blender教程短视频制作影视动画摄影艺术室内设计绘画插画海外教程电商教程产品精修办公职场编程开发考证·外语品牌设计综合教程 UI设计兴趣生活

去APP与老师同学在线聊天、互动问答

详情图文教程训练营推荐

UI设计

在线工具-毛玻璃效果图标设计

5497人学过难度:新手入门软件:在线工具

评论(123) 收藏课程已收藏下载视频

即时设计

关注人数：1096

关注

可云端编辑的专业级 UI 设计工具，为中国设计师量身打造。Windows 也能用的「协作版 Sketch」

同一个AI，为什么别人画的比你好？

1.2万人已学

即时设计-自动布局（下）-UI零基础快速上手教程40

1689人已学

课程综合评分：9.8分

点击加载更多

评论可是有底线的

本节教程练习

经常在设计师的群里看到有人问毛玻璃效果怎么实现，今天就给大家带来详细的教程。

在具体的教程之前，我们先来分析一下毛玻璃效果的特点，以下图的3个icon为例，

① 左侧的面性图标前后关系并不是很明确，没有毛玻璃的质感，美观度上是不如毛玻璃风格

② 毛玻璃质感会比传统的面性图标要强很多，前后也会有一定的层级

③ 毛玻璃这样的一个本身的质感也会增加整个图标的丰富度以及颜色的丰富度

下面我们正式开始教程，教大家如何实现从面性图标到毛玻璃质感图标的转化。

需要掌握的要点为如下几点：

01. 绘制超椭圆

02. 利用插件快速填充渐变

03. 利用背景模糊快速完成毛玻璃效果

04. 利用描边完成厚度的增加

05. 利用投影增加图标细节

第一步：打开即时设计平台(https://js.design/?source=huke&plan=mbl)，利用快捷键A绘制画板（850X1040）

第二步：拖入原始图标

图标素材：https://js.design/P8U17H?p=J2235CMKQ2?source=huke&plan=mbl

第三步：在右边我们选择网格布局并打开，然后同时把第1个对勾取消掉，选择最后一个对勾，这个时候你就会发现我们的画板上面会有很多的小的网格，我们主要就利用这个网格去做我们的超椭圆

第四步：这个时候大家可以来按键盘的O，直接画一个圆。那么我们找到网格的交接线的部分，直接去拖动。这个时候大家注意啊，在拖动中摁住shift键，保证我们的圆是一个正圆，然后一定要对齐网格

登录后学习完整图文教程

训练营坚持完成打卡任务报名费全额返

查看更多训练营

虎课APP离线下载免流量

70000+教程，每天免费学一课

一键打开

课程分类

在线工具-毛玻璃效果图标设计

训练营坚持完成打卡任务 报名费全额返

训练营坚持完成打卡任务报名费全额返