无论在餐厅夜市，还是各大公司海报，商场的节日装扮等等，霓虹灯效果都是非常常见的设计风格。看起来炫酷多彩，非常适合节日和一些热闹的场景。本期临摹有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、背景优化
- 为了让背景过渡更为自然，绘制两个圆形，大小自定义，
填充色：#D75FF4、#3A63E8，不透明度：16%、15%，高斯模糊：100
大功告成啦
霓虹灯效果就完成啦✌️✌️
再次提醒大家，记得邀请即时设计教程老师（即时设计-Nancekam）协同~~
奖励和活动咨询都可以添加 V/ jishisheji01 咨询
（加群即可领取：14天樊登读书卡+首次约车会员1个月）
Powered by Froala Editor