最新公告
  • 欢迎您光临260素材网,本站秉承服务宗旨 履行“站长”责任,分享只是起点 服务永无止境!本站设计素材资源持续更新中...
  • 火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!

    又见面啦,第八篇原创文章出炉了~

     

    来了来了,它来了
    伙伴们还记得在2020年4月份左右Dribbble出现了一份毛玻璃“Hazy Icon”作品吗?凭借新的设计风格和优秀的视觉效果,瞬间斩获了当天趋势榜TOP1,点赞量逼近2500
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图Hazy – Icon @北瓜原创
     
     
     
    磨砂风图标
     
    让我惊讶的是后面很长一段时趋势榜出现了多种多样的“毛玻璃”图标作品,这表明自己的作品在Dribbble得到了很多国内外设计师的认可和关注,并引领了一股设计小浪潮,而且国内也有很多知名的APP图标都使用了类似毛玻璃的设计风格
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图1
    网友作品 – Bounce
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图2
    网友作品 – 评论
     
    几个月后补发了暗黑模式下的Hazy,依然在Dribbble上收到了很多点赞和支持
    毛玻璃能够流行起来原因有这几点:创新性、稀缺性、温和性且符合当下设计轮回。
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图3
    暗黑模式Hazy – Icon @北瓜原创
    作品都是用Sketch软件绘制的,下面拿“Chat”图标举例
    教程讲解大纲:
     
    1,基础原理
    2,图形构成
    3,视觉颜色
    4,磨砂效果
    5,打卡小组
    01. 基础原理
    毛玻璃的视觉呈现需要媒介点,表面图层使用带有透明度的背景模糊效果
     
    什么是媒介点:
    1,两个交叉的图层
    2,一定的透明度
    3,表面图层背景模糊
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图4
    一张图看懂“毛玻璃”原理
     
     
    02. 图形构成
    拿“Chat”图标举例
    先绘制一个240*240px的圆形
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图5
    使用三角形工具绘制96*96px的三角形
    将三角形旋转-135度,并将尖锐的一角调整圆角半径20
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图6
    圆和三角形叠加一下,做联集处理变成一个图层
    图层路径合并,优化尺寸
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图7
    复制出一个图层并水平翻转下,尺寸等比缩小至168*172px
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图8
    Chat主形状完成
     
     
    03. 视觉颜色
    原理那块我们讲过A图层是白色且带有透明度的,我们来看看白色背景上的视觉效果,图标几乎看不见了
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图9
    这时候要想办法先从B图层(底部图层)处理,视觉上挑选蓝色、玫红、紫色、橙色
    为什么不用黄、青、绿呢?
    1,颜色过曝
    2,颜色重量较轻
    3,整体视觉不协调
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图10
     
    B图层颜色:B757F7A图层颜色:F7EBFF
    这样在不管在白色背景还是在暗黑模式下都能识别出来
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图11
    04. 磨砂效果
    A图层磨砂处理
    透明度50%、背景模糊44
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图12

    好像缺少了点细节我们把B图层剪切进A图层里面
    将A图层的背景模糊抹除掉,透明度调整0%,B图层透明度调整30%,高斯模糊26
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图13
     
    这样一处理,图标更有纹理层次啦,毛玻璃效果杠杠的~
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图14
    最后给Chat加点表情,画上眨眼符号萌萌的
    这样效果更赞啦~
     
    火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!插图15

    1. 本站所有设计素材图片资源均来源于用户上传和网络搬运,仅供学习和参考!如有侵权请邮件联系客服删除!( 243124051@qq.com )
    2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
    3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
    4. 如果您也有好的设计素材资源或教程,您可以投稿发布,成功分享后有云币奖励和额外收入!
    260素材网 » 火爆追波的2500赞作品,毛玻璃图标原作者出图文教程了~付源文件下载!

    常见问题FAQ

    260素材网免费下载或者VIP会员专享资源能否直接商用?
    260素材网所有资源版权均属于原作者所有,260素材网所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
    提示链接失效或打开及付款不跳转怎么办?
    1、支付成功后请等待10秒左右 会自动跳转提示下载,如没有跳转 请及时联系260素材网客服处理
    2、如果提示链接失效或打不开——可在对应资源底部留言 或 联系260素材网「客服」
    260素材网下载的素材找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,PS ,AI ,XD ,Sketch,CDR等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    260素材网,赞助会员即送超值素材大礼
    260素材网是一个专业的素材搬运平台!现在开通本站任意会员即附送UI8全站素材下载并提供持续更新...
    • 2021-01-06Hi,初次和大家见面了,请多关照!

      发表评论

      Hi, 如果你对这款模板素材有疑问,可以跟我联系哦!

      联系作者
      • 500会员总数(位)
      • 1909资源总数(个)
      • 52本周发布(个)
      • 1 今日发布(个)
      • 124稳定运行(天)

      这里为你提供最优质的设计素材教程及资源下载

      加入VIP享全站200T素材免费下载

      加入VIP
      升级SVIP尊享更多特权立即升级