每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票毛玻璃是近几年来继新拟物化之后又一流行起来的视觉设计风格,其风格的最大特点是像玻璃一样的通透性,可以透过表层看到背景的模糊形态,因此而得名。1.2
这类风格已经流行了一段时间了,相信小伙伴们在许多大厂设计的页面及元素中也能经常看见,今天用一个图标案例带大家理解这类风格,大家主要学会绘制思路,参数仅作为参考哦~
这里使用的设计工具是「行空设计」,这是一款专为产研团队研发的设计协作平台,操作顺畅,页面简洁,兼容Sketch,复制链接(https://xk.design/login?c=huicn)至PC端即可使用,边看边操作效果更佳哦,文章底部附有源文件链接,大家需要的自取哈~
1.一共6层图层
2.前图与矩形横条为基础图层,其他均为效果图层
3.涉及工具:形状工具、渐变、高斯模糊、蒙版
4.注意要点:颜色前浅后深、图层命名
利用钢笔工具绘制前图,添加边框并设置圆角弧度,矩形工具绘制横条,填充线性渐变。
前图:
矩形横条:
复制一个前图,尺寸不变,设置为蒙版,这里的蒙版是为了规范后面的毛玻璃图层。蒙版图层取消边框,填充线性渐变,注意啦,蒙版图层应位于前图图层的下方。
复制一个前图作为毛玻璃图形,改变尺寸和旋转角度,填充比蒙版图层较深的线性渐变,凸出层次感。并给图形降低不透明度及设置高斯模糊打造毛玻璃质感。
复制毛玻璃图形,取消模糊和不透明度,作为后图。毛玻璃图层应位于蒙版图层的上方,后图图层应位于图层的最底部。
尺寸:14*16px,旋转15°,圆角半径1.75
填充:线性渐变填充#47A6FC-#288DE9,不透明度80%
高斯模糊:2
尺寸同毛玻璃
填充同毛玻璃,但不透明度为100%
复制一个蒙版图层,填充比蒙版图层较深的线性渐变,打造外发光质感。
随后给前图外发光图层、后图及矩形横条添加外阴影即可啦,此时,前图阴影图层应位于后图图层的上方。
外阴影#86C5FF,不透明度30%,大小「0、0、4、0」
外阴影#0084FF,不透明度60%,大小「0、1、1、0」
外阴影#86C5FF,不透明度60%,大小「0、0、2、0」
以上就是毛玻璃质感图标的绘制教程啦,你也来试试吧。大家有其他疑问可以在评论区讨论哦~
Powered by Froala Editor
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论