近些年来,UI 设计工具一直在发展,从 PS 到 Sketch、XD,我们的工作效率越来越高,而设计工具 MasterGo 再次给我们带来工作方式的变革和工作效率的提升,今天我们就用 MasterGo 来教大家做一个火遍全球的全息风格贴纸。

最近超火的全息视觉风格,国内又叫酸性风、镭射风,被越来越多的应用在平面设计、网页设计上。

这种风格在服装设计、游戏角色设计、包装设计、甚至美容美发行业也流行起来。

但这种全息镭射风的最先流行起来的领域并不是时尚行业,大家从小就经常见到,

就是我们常见的全息防伪贴纸


好,话不多说,我们进入今天的正题,一起来做一个炫酷的矢量全息风格贴纸。

现在开始:

打开我们的 MasterGo 在线设计平台,并创建一个新文件

点击进入 MasterGo MasterGo.com

Tips:可以点击设计文件右上角的【分享】按钮,叫上小伙伴一起协同制作哦~

一、制作矩形贴纸底层

  • 1. 制作贴纸形状


  • 新建 400*400px 的容器,修改数值。

  • 圆角:48px

  • 2. 制作全息贴纸效果


  • 将填充改为径向渐变,并适当调整位置。

  • 色值(径向渐变由内至外):

  • #78FFF1,100%

  • #D0DEFF,100%

  • #DF97DF,100%

  • #97EBBE,100%

  • #F1FCAF,100%

#C2E3F1,100%

  • 再添加一个填充线性渐变并更改填充混合模式。

  • 色值(线性渐变由左到右):

#FFFFFF,100%

#000000,100%

#FFFFFF,100%

#000000,100%

#FFFFFF,100%

填充混合模式:差集

  • 我们将刚刚填充的线性渐变复制一个

  • 如下方动图所示,点击小视图框左侧

  • 快捷键 

  • Mac:⌘+C,⌘+V 

  • Windows:Ctrl+C,Ctrl+V

并更改填充样混合模式。

填充混合模式:滤色

  • 3. 制作矩形贴纸的内容

  • 我们在容器中制作一些内容,可以是自己喜欢的文字或是图形,然后将这些内饰更改图层样式。

  • 图层样式:叠加   

  • 色值:#000000,100%

  • 并原地拷贝(Mac:⌘+D;Windows:Ctrl+D)使内饰颜色加重。


  • 最后我们把 MasterGo 的 LOGO 拖放到贴纸的中央并且更改图层混合模式。(我们会在源文件中给大家提供一些图标)

  • 图层混合模式:叠加

这样我们的矩形贴纸就完成啦接下来让我们再做一个圆形的吧!

二、制作用圆形贴纸底层


  • 1. 制作贴纸形状


  • 新建 400*400px 的圆形,删除圆形原有填充将矩形贴纸的径向渐变复制过来。

  • 还记得刚刚教的复制粘贴填充样式的方式么。

Tips:填充粘贴完成后,可以适当编辑一下径向渐变的位置。


  • 2. 制作全息贴纸效果


  • 添加填充旋转渐变并更改填充混合模式。

  • 色值(旋转渐变顺时针):

  • #FFFFFF, 100%   →   #000000, 100%   →   #FFFFFF, 100%   →   #000000, 100%   →   #FFFFFF, 100%    →   #000000, 100%   →   #FFFFFF, 100%   →   #000000, 100%

  • 填充混合模式:差集

我们再次将刚刚填充的旋转渐变复制粘贴(点击小视图框左侧,快捷键:Mac:⌘+C,⌘+V; Windows:Ctrl+C,Ctrl+V),并更改填充混合模式。

填充混合模式:滤色


  • 3. 添加贴纸内饰


  • 添加星型

  • 我们点击形状工具,选择星形工具新建一个 35*35 尺寸的星形并按照以下数值进行更改。(我们可以直接拖动图形上的操纵杆进行参数调

  • 圆角:1 px  

  • 角数:5   

  • 内角:51.93%   

  • 色值:#000000,100%


  • 我们将星形复制一些并且排列出想要的样子并更改图层混合模式。

  • 图层混合模式:叠加

我们可以再添加一些图形、文字或者形状放在贴纸的适当位置上但是一定要更改图层混合模式哦~

图层混合模式:叠加


  • 我们选中这些内饰在原地拷贝(快捷键:Mac:⌘+D;Windows:Ctrl+D)使这些内饰的颜色加深一些(可适当调整)。

三、最后一步!

最后我们将两个贴纸摆放到一起就完成啦!

点击查看源文件:全息贴纸源文件

点击进入 MasterGo MasterGo.com

Powered by Froala Editor