您还没有专辑

开始创建自己的专辑吧

创建
您可在个人中心-我的专辑处查看
当前位置:首页 > UI设计 > 在线工具-毛玻璃效果图标设计
下一节课程:这里显示课程名称长度多少课程名播放下一节重新播放
5s后将自动前往下一节课
为你推荐课程
为你推荐直播课
升级VIP特权,畅学全站89000+会员教程
立即升级特权超值
89000+教程
不限次学
素材/源文件
不限次下载
161大职业路径
不限次学
虎课读书
不限次收听

免费学习即将结束

关闭继续学习>

分享/下载
添加到专辑收藏
已收藏
收藏成功,可进入个人中心-课程收藏 查看!
记笔记

全新AI视频总结上线

一键节省你80%学习时间

视频暂不支持AI视频总结
AI视频总结
编辑完成后,记得点我~
即时设计
即时设计

关注人数:1010

信息

相关下载:

本课素材
评论(可获得虎课币)

综合评分: 9.8

使用软件: 在线工具

难度等级:新手入门

视频时长:21分23秒

图文教程学员互动 (123) 视频字幕
综合评分:9.8 评分100%作业点评课后上传的作业,学习过程中有困难疑惑都可进行提问
您需要学习后才可以评价, 立即学习
全部互动一课一练(41)课程提问(19)
有内容评论
本课作业要求(已有41份作业)
作业要求:根据视频教程中的内容,进行作业练习,在互动评论中上传你的作业,也可运用其他素材进行练习

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

在具体的教程之前,我们先来分析一下毛玻璃效果的特点,以下图的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键,保证我们的圆是一个正圆,然后一定要对齐网格

第五步:双击进入形状编辑状态,利用锚点上下左右都往圆心移动两个格子就好了,有的时候呢,大家在移动的时候可能不是很精准,所以说一定要对好这个网格的边缘线

第六步:我们可以把左边的图标开始进行复制,ctrl+c\ctrl+v复制完了之后,我们在图层当中把它放在最上面这一个层,然后拖动到我们的这个超椭圆里面,这样的话我们就可以以这个图标为基准开始往下设计,并且给右侧的图标利用插件快速的进行渐变色的填充

查看更多
您需要学习后才可以评价, 立即学习
字幕加载中...
登录后查看更多
换一批

为你推荐

同学,小虎知道你非常努力的想学习!

老师录制课程真的也很辛苦

赞助一下吧

确定学习吗?

您每天可免费学习一个教程。

成为VIP可无限学习 !

成为VIP吧!

成为VIP吧!

您已经免费学习 1 个教程 !

我们录制教程很努力的,赞助下吧 !

升级VIP吧!

您已经学习 5 个教程啦!

我们录制教程很努力的,赞助升级下吧 !

您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个素材文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计下载5个源文件


您在当前分类下不是VIP,赞助VIP享受无限下载


您已经累计观看5个图文教程


您在当前分类下不是VIP,赞助VIP享受无限观看


学习后才能评价哦!

学习后才能提问哦!

获得30虎课币

评论提交成功,将在审核通过后显示

×

下载素材/源文件:

收藏成功
取消成功
已是第一张图了
已是最后一张图了
已是第一张图了
已是最后一张图了
记笔记

导出笔记

笔记导出历史

00:00

0/12
确定保存
笔记导出历史导出完成的笔记将保留1天,如有需求请及时下载
课程名称
导出时间
文件大小
状态
操作
AI视频总结
AI正在分析视频,请稍等…
AI总结遇到了一些问题 点击重新获取
点击重新获取
成为全站通VIP 查看完整AI总结
复制
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了46,688
并提交了341份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证