恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见
masterGo

推广

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
超简单的矢量全息风格贴纸
19.0°
原创文章 / 教程 / / 举报
3890 0 1 0

2021-09-30

使用 MasterGo 制作超简单的矢量全息风格贴纸


近些年来,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

收藏

0人已收藏

MasterGo产品设计工具

将伟大的想法变为现实

  • 2

    作品

  • 70

    粉丝

  • 1

    关注

  • 使用“自动布局”功能制作轻拟物合成器键盘

猜你喜欢

    MasterGo产品设计工具

    MasterGo产品设计工具

    将伟大的想法变为现实

    • 70

      粉丝

    • 42.9

      人气

    • 88

      颜值

    作品

      最新推荐

      Form粒子制作智能光环动效

      555 0 0

      相关佳作
      换一换

        MasterGo产品设计工具

        点赞:1

        收藏:0

        评论:0

        超简单的矢量全息风格贴纸

        你确定要举报超简单的矢量全息风格贴纸

        如果查出恶意举报,十天内禁止提交任何举报申请。

        0/200

        上传证据: 超过10M的附件请使用网盘地址

        点击上传附件

        对谁可见:

        全部设计师
        • 全部设计师
        • 推荐设计师和认证设计师

        您确认要推荐?

        该作品发布时间:2021年09月30日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

        账号或密码错误,请重新输入

        账号或密码错误,请重新输入

        登录

        账号或密码错误

        发送验证码 120s 验证码错误

        登录

        可云端编辑的专业级UI设计工具

        立即体验