无论在餐厅夜市，还是各大公司海报，商场的节日装扮等等，霓虹灯效果都是非常常见的设计风格。看起来炫酷多彩，非常适合节日和一些热闹的场景。本期临摹有UI中国的礼品和会员赠送噢~

其实霓虹灯效果的实现并不复杂，今天就带大家来学习一下，只需要几分钟时间，简单几步就可以实现啦~我们还准备了奖励给爱学习的你（也再次感谢UI中国的奖品支持）。

一、优秀作品奖：5名

UI中国周边大礼包（便携包+便签+彩铅）

评选标准：专业设计评审团评选

二、人气奖：10名

UI中国Plus会员1个月

评选标准：作品点赞量

（原创作品通常人气更高噢~）

作业注意事项【非常重要】

① 使用「即时设计 」完成作业，邀请即时设计教程老师（即时设计-Nancekam）协同，并设置为打开编辑权限。方便对作品进行点评，提升学习

点击进入➝ 即时设计-专业UI设计工具

② 在UI中国上传作业时，附带作业在即时设计的分享链接，不然无法统计领取奖品

下面正式进入教程学习吧！

一、制作底稿

1、新建画布

新建800*600px的画布（打开我们的即时设计在线设计平台  https://js.design/ ）

2、输入文字jsdesign

（字体：Olo Script Swash Caps 色值：#1E2D3A 字号：100 字间距：-3 ）

可根据自己喜好挑选其他字体，图中红色箭头图标可导入字体

3、字体处理

为了更好展示效果，对字体进行拼合路径处理，把字母g的小尾巴做了加长的处理（可根据具体情况而定）

4、制作辅助文字及形状

钢笔工具画出字体下面的不规则形状（描边：2px 色值：#1E2D3A）

矩形工具画出矩形244*30px，双击进入编辑状态添加锚点并移动锚点，得到标语形状NEON LIGHT CASE（字体：Ubuntu 字号：22 字重：Bold 色值：#1E2D3A）SINCE 2021（字体：Ubuntu 字号：20 字重：Medium 色值：#1E2D3A 字间距：1）

绘制两个小矩形，旋转90度，如下图叉号

5、绘制边框

绘制内框372*222px，圆角：36，描边：1px；双击进入编辑状态，添加锚点，并分别向上向下移动锚点，上下锚点圆角分别为172,185

 再复制一个外框416*247px，描边：2px

 (色值：#1E2D3A)

二、 背景及底稿优化

1、拖入墙面素材及底稿反白

（素材下载https://js.design/tajwYG?p=E81FFD78 ）

  素材也可自己查找使用

  为了使效果更清晰易于查看，可把上述制作的底稿改成白色

2、锚点处理

为了霓虹灯效果更真实，把字体Jsdesign由填充改为描边3px,#FFFFFF；

并对底稿进行添加锚点处理，剪刀工具剪去多余线条

三、制作霓虹灯效果

1、对Jsdesign添加霓虹灯效果

（1）对字体Jsdesign添加阴影（色值：#D75FF4  Y值：2 模糊值：7），描边为3px，# FFFFFF

（2）复制Jsdesign图层，为了更好的做出霓虹灯效果，把刚复制的图层放于步骤（1）的图层下方

图层样式为描边：6px，色值：#9D3DCF，多添加几层阴影效果，使效果更明显（阴影色值：#7F1EB3，Y值分别 为：2、2、1，模糊值：31、85、34）

2、对标语框添加霓虹灯效果

对标语框添加阴影（色值：#D75FF4 Y值：2 模糊值：7）, 填充为# FFFFFF

 再复制一层标语框，图层放在下面，描边：6px，色值：#9D3DCF，多添加几层阴影效果，使效果更明显（色值：#AB48E0，Y值分别为：2、2、1，模糊值：81、21、13）

3、复制粘贴样式

复制上个步骤的图层样式，对于字体下面的形状和since 2021下面的叉号，可以直接粘贴图层样式，然后视具体情况对参数做稍微调整即可

  注：叉号要记得做并集处理并改外描边

4、 对since 2021进行处理

对since 2021字体进行处理，添加阴影（色值：#3A63E8 Y值：2 模糊值：7 扩展：2）填充为# FFFFFF

 再复制一层字体，右键拼合路径，图层放在下面，色值：#3A63E8，多添加几层阴影效果，使效果更明显（色值：#3A63E8，Y值分别为：2、1，模糊值：21、34，扩展：0、2）

5、复制粘贴图层样式

分别复制Since 2021的两个图层样式，粘贴到NEON LIGHT CASE

6、对内框添加霓虹灯效果

对内框添加阴影（描边：1px 色值：# 3A63E8 Y值：2 模糊值：7），填充为# FFFFFF

再复制一层内框，图层放在下面，描边：3px，色值：#3A63E8，Y值：1，模糊值：14

7、对外框添加霓虹灯效果

对外框添加阴影（描边：2px 色值：# D75FF4 Y值：2 模糊值：7），填充为# FFFFFF

再复制一层内框，图层放在下面，描边：6px，色值：#D75FF4，Y值分别为：2、1，模糊值分别为：23、14

8、背景优化

8. 为了让背景过渡更为自然，绘制两个圆形，大小自定义，

填充色：#D75FF4、#3A63E8，不透明度：16%、15%，高斯模糊：100

大功告成啦

霓虹灯效果就完成啦✌️✌️

再次提醒大家，记得邀请即时设计教程老师（即时设计-Nancekam）协同~~

奖励和活动咨询都可以添加  V/ jishisheji01  咨询

（加群即可领取：14天樊登读书卡+首次约车会员1个月）

Powered by Froala Editor