• 以指代步
社交账号登录
  • 首页
  • 博客
  • 模板
  • 源码
  • 壁纸
  • 视频
  • 软件
  • 文库
  • 学习
  • 创作中心
  • 关于我们
  • 招兵买马
  • 联系我们
  • 法律申明
  • 合作招商
  • 注册
  • 粉丝
  • 关注
  • 创作
  • 优雅的毛玻璃图标设计教程

  • 张大湿 2022-03-28 09:12:07 收藏
  • 文章标签: 模糊 高斯 毛玻璃
  • 优雅的毛玻璃图标设计教程

    可能你在别打公众号中也看到过类似的一些绘制教程,今天我想借这个机会跟大家分享下,我是如何用sketch进行绘制的,整体的过程大概分为6个步骤,看完这6个步骤,你会发现其实并不难。

    优雅的毛玻璃图标设计教程

    第一步:确定图标形体

    使用最简单的线型来确定你想绘制的图形,整体的设计尽量按照统一的规范,包括圆角、角度、层次等等这些都尽量保持统一的规则。

    优雅的毛玻璃图标设计教程

    第二步:拆分图层

    这一步是进入上色之前的比较关键的一步,需要我们明确哪一层或者哪个图形的组建来进行高斯模糊,因此对于图形的层次要求比较高,需要我们在第一步绘制的时候就确定好。

    优雅的毛玻璃图标设计教程

    第三步:确定图标的基本色调

    先通过最简单的方式把大概的效果做出来,主颜色不是很重要,重点放在高斯模糊的效果上。这里我设定一个透明度为50%、模糊度为25的数值,这组数值不是绝对的,我们在自己绘制的时候可以随时调整达到最优的效果。

    优雅的毛玻璃图标设计教程

    第四步:增加颜色层次

    当我们设定好高斯模糊之后,我们可以对图标的颜色进行一些效果叠加,例如渐变。

    优雅的毛玻璃图标设计教程

    第五步:调整高斯模糊质感

    下面我们可以继续深化高斯模糊的质感,给毛玻璃图层增加一个内阴影,适当降低整体的透明度,整体的话也需要我们进行细调。

    优雅的毛玻璃图标设计教程

    第六步:增加颜色层次

    这里我习惯给毛玻璃图层叠加一个主色调的对比色来进行衬托,通过颜色叠加之后,整体会更具有层次感,除了对比色,我们也可以考虑使用邻近色之类的来进行叠加。

    优雅的毛玻璃图标设计教程

    第七步:刻画细节

    给高斯模糊的图层增加一个描边、投影来强化分割感,这一步看自己的需求,在我看来如果少了这一步,整体的质感会稍微欠缺,导致高斯模糊的边缘不够清晰。

    优雅的毛玻璃图标设计教程

    最后,黑白背景效果对比

    优雅的毛玻璃图标设计教程

    感谢阅读!

    作者 | ID设计站
    来源 | ID设计站(id:IDfor_all)

    评论
    Artlist模板 广告