, ,

透明毛玻璃效图标的制作教程

大家期待的透明毛玻璃效果的制作教程,今天它终于来了! 应大家的留言需求,今天给大家出个详细的教程,来教大家制作…

By

min read

大家期待的透明毛玻璃效果的制作教程,今天它终于来了!

应大家的留言需求,今天给大家出个详细的教程,来教大家制作 “透明毛玻璃效果图标”

相关文章:透明毛玻璃效果图标设计

透明毛玻璃效果图标

所用工具

由于我们制作的是「图标」,那我们就用矢量软件吧 。所用到的工具是 Adobe Illustrator。如果你是 macOS 用户,还可以使用 Sketch 这个软件,会更加的方便和简单。

今天我会把 Illustrator 和 Sketch 两种软件的操作都讲一讲。

几个要素

在开始动手前,我先说一些我自己觉得的几个要素:

  1. 图标:图标一定是要有前后可拆分的层次,一个在前作为毛玻璃层,一个在后作为颜色层,最好是 2~4 层效果较好。
  2. 颜色:你的图标颜色的选择最好是单一颜色,颜色多了我个人总觉的怪怪的,也不太好看。
  3. 高光:高光是点金之笔,加上后的感觉更好。
  4. 阴影:增加一些淡淡的阴影更有质感。

操作步骤

  1. 拆分层次并绘制基础图形;
  2. 填充颜色和叠放;
  3. 对浅色图形进行高斯模糊;
  4. 颜色补充;
  5. 高光;
  6. 阴影。

准备好了吗,我们开始发车了。我挑选了3个实例给大家讲解,这3个实例在一些地方的处理上还是有些不同的,所以挑选了这三个具有代表性的。其中实例一、实例二用 Illustrator 操作,实例三用 Sketch 操作,也兼顾了大家不同的学习需求。

实例(点击标题可快速定位)

实例一:云和太阳图标(用 Illustrator 操作)

层次:2层(云和太阳)
颜色:橙色

我们按照步骤一步一步来吧~

第一步:拆分层次并绘制基础图形

用基本图形进行路径的布尔运算,画出太阳和云:

基础图形
第二步:填充颜色和叠放

太阳(底层图形)用纯色填充,云(顶层图形)用浅色填充。此例子是太阳,我就选择了橙色(#F0AA48)作为主色调。

先确定主颜色,再根据主颜色的选择,确定浅色填充的颜色:

主颜色和浅色颜色的确定

浅色填充的颜色,一般是以主颜色为起点,往它的左上角去找合适的颜色,一般来说比较接近白色。之后再把它们叠放起来,看看颜色是否合适:

叠放之后的样子

嗯,看起来比较合适,前后两层颜色区分也比较明显。

第三步:对浅色图形进行高斯模糊

毛玻璃效果,我们主要用高斯模糊进行处理,高斯模糊的像素半径要大一些。我的云尺寸大概是 260px × 200px,高斯模糊像素半径为 20px,大概占到了宽或高的 10%~15%。

高斯模糊半径约为 1/10 长或宽

高斯模糊后,边缘处基本上就能看见下方重叠的部分了(如果你选的主色调颜色比较深,可以将不透明度进行下调),但是高斯模糊之后的颜色就比较浅,而且边缘也不圆滑、不剔透。

接下来我们需要使用剪切蒙版,再复制一层「云」浅色图形图层,放置于同位置图层的上一层,为了区分,我把新复制的这一层变成黑色:

蒙版图层和云图层上下重叠放置

然后同时选择这两个图层,选择:对象→剪切蒙版→建立,此时这两个图层会合并到一个剪切蒙版的图层,而且样式也发生了变化:

执行剪切蒙版操作后,边缘更圆滑了,颜色更剔透了。现在已经有了毛玻璃的效果,但是颜色还是比较浅,接下来我们需要补充颜色。

第四步:颜色补充

再把前后两个图层各复制一份,并求出交集:

交集

求出交集后,把颜色改成主色调颜色,放置于云和太阳的上层,同时也要在剪切模版之下才行

交集放置于蒙版和下方图层之间

接下来进行两个操作,第一个是高斯模糊,第二个是混合模式

高斯模糊根据效果自己决定,一般情况要比第三步的高斯模糊半径要大一些(第三步高斯模糊半径是20,这里我就用30):

高斯模糊半径 30

接下来选择混合模式,Illustrator 的柔光与 Sketch 的柔光效果不一样,Illustrator 的柔光太淡了,这里你可以自己看情况选择(强光、正片叠底或者柔光效果),我选择了强光:

强光混合模式

第五步:高光

在合适的位置上加上高光即可,高光就用纯白色(#FFFFFF)

增加了高光

第六步:阴影

其实第五步结束后就差不多了~,但是,增加阴影有助于在白色背景下增加质感,你可以选择性的使用。

到此为止,你可以保存 Illustrator 文件了,不建议在 Illustrator 中增加阴影效果,因为 Illustrator 是矢量的,阴影效果兼容性不好。当你有具体应用场景的时候,可以把 Illustrator 文件或者透明的 PNG 图片导入 Photoshop 中,在增加阴影效果。

Photoshop 阴影参数可以参考如下,1% 的黑色(#000000)不透明度,距离、扩展、大小都是 10,混合模式选择正片叠底或者柔光:

阴影参数

以下是是否增加阴影的区别:

以下是浅色底色和深色底色的区别:

实例二:放大镜图标(用 Illustrator 操作)

层次:2层(放大镜玻璃和手柄)
颜色:粉色

我们现在已经轻车熟路了,速度那就要快一些了~

第一步:拆分层次并绘制基础图形

绘制基本图形,放大镜镜片和手柄:

基础图形

第二步:填充颜色和叠放

手柄(底层图形)用纯色填充,镜片(顶层图形)用浅色填充。此例子我选择了粉色#FC5684作为主色调。浅色填充的颜色,以主色调为起点,往左上角去寻找接近白色的颜色,我选择了浅色粉色(#FFEDF2)。同时进行位置摆放:

叠放之后的样子

嗯,颜色搭配看起来挺好的~

第三步:对浅色图形进行高斯模糊

复制一个镜片图层,把一个镜片图层进行高斯模糊操作:

高斯模糊半径约为 1/10 长或宽

把另一个镜片图层放置于这个图层同位置的上一层,然后选择两个图层进行剪切蒙版:

剪切蒙版后的效果

第四步:颜色补充

再把前后两个图层各复制一份,并求出交集。这次我们稍微旋转一下位置,并且我把颜色的不透明度降低了70%,因为镜片要明亮一些:

补充颜色位置摆放

补充颜色图层位置,同样要放在剪切组之下,其他图层之上的位置:

补充颜色放置于蒙版和下方图层之间

接下来同样的两个操作,高斯模糊和混合模式

高斯模糊这次不增加半径,跟镜片高斯模糊一样半径是 20:

高斯模糊半径 20

混合模式,这次我选择了正片叠底:

正片叠底混合模式

第五步:高光

在镜片中心点上白色、圆形的高光:

增加高光

第六步:阴影

为了增加质感,我们需要在镜片和手柄交汇处增加一个阴影:

加阴影的位置

复制一个手柄图层,做一个黑色→白色的渐变:

制作黑白渐变

然后放置于同位置处,混合模式选择柔光即可:

柔光混合模式

以下是浅色底色和深色底色的区别:

实例三:照相机图标(用 Sketch 操作)

层次:4层(前镜头、后镜头、相机、按钮)
颜色:绿色

第一步:拆分层次并绘制基础图形

绘制了一个圆角矩形(相机机身)、两个同心圆(组成镜头)、一个小矩形,上侧圆角、下侧直角(快门):

基础图形

第二步:填充颜色和叠放

给他们填充绿颜色,并且摆放位置:

叠放之后的样子

第三步:对浅色图形进行高斯模糊

我们再复制一份圆角矩形(相机机身)放置于底层,作为剪切蒙版(记得要在右侧栏删掉颜色),右键→选择剪切蒙版:

制作剪切蒙版

注意,镜头在剪切蒙版内部,要放在剪切蒙版图层之上(左侧有箭头表示),而快门在剪切蒙版外部,直接放在剪切蒙版之下即可:

剪切蒙版的位置

圆角矩形(相机机身)高斯模糊 50,可根据自己的情况调整:

高斯模糊 50

第四步:颜色补充

1.镜头补充:我们复制一份镜头(两个同心圆),放置于镜头图层的下层,进行高斯模糊(高斯模糊半径我设置 20)颜色补充:

高斯模糊半径 20

2.镜头镜片补充:这样子两个图层上下一叠放,就能补充颜色,作出渐变阴影效果。接下来,我们在绘制一个白色的圆(#FFFFFF)不透明度为70%,柔光叠加,放到镜头最前端,作为镜头的镜片:

白色圆形柔光混合模式

3.快门补充:复制一个快门,翻转 180 度放置于下侧,且位于剪切图层内部,设置高斯模糊 10,混合模式为柔光:

总结一下:就是镜头(同心圆),复制一层放在下一层,执行高斯模糊和柔光;快门,复制一层翻转 180度,放在下一层,执行高斯模糊和柔光;最后再额外绘制一个白色圆形作为最前方的镜头,70%不透明度,柔光叠加。

第五步:高光

在右上角闪光灯的位置,增加一个白色高光:

增加高光

第六步:阴影

为了增加质感,我们需要在相机机身(圆角矩形)和快门(小长方形)交汇处增加一个阴影。Sketch 的操作很简单,直接再加一个黑白渐变色,进行柔光叠加即可:

快门增加阴影

以下是浅色底色和深色底色的区别:

结尾

三个例子的具体操作已经讲完了,如果有问题,欢迎在此文章下留言讨论,还可以留下你的邮箱方便联系和讨论更为详细的内容。

《 “透明毛玻璃效图标的制作教程” 》 有 3 条评论

  1. 吕芷欣 的头像
    吕芷欣

    为什么我做出来跟你不一样的 呢 是我少了哪一步吗

    1. Haoning 的头像

      嗯?要不今年过年前我录制一个视频,然后发你QQ邮箱,你再按照操作来对比看看!

  2.  的头像
    匿名

    哇 感谢 学习收藏了

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

返回搜索页面
返回图筑风暻