上个月我发布了一个展示难以置信的逼真霓虹灯标志这是用3D软件制作的。我更像是一个二维人,所以我想尝试用Illustrator和Photoshop制作类似的霓虹灯效果,beplay足球但通过动画GIF添加了动作。按照本教程了解我如何为Pizza Planet创建有趣的霓虹灯标志的过程,使用Illustrator的矢量工具创建初始符号布局,然后,phbeplay足球otoshop将动画中充满活力的图层样式和框架带入生活。

动画霓虹标志效果

我们将要创造的霓虹灯效果利用photoshop图层样式来创造色彩丰富的霓虹灯。beplay足球以及一个更暗的层,描绘了灯被关闭,当标志被设置为动画以增加额外的真实感时,它就开始发挥作用。霓虹灯的标志依靠管子的弯曲来形成图案的形状,所以我们将使用Illustrator来绘制向量路径,这样就不会有两条线相交。

打开Adobe Illustrator并创建新文档。用椭圆工具在画板上画一个圆,然后清除填充物,只留下一个黑色的笔触。将笔划设置更改为5pt,带圆帽和圆角。

使用类型工具为霓虹灯标志添加任何文本。我在为比萨星球使用一种叫达尔文的字体。

调整文本的大小,使其居中,但不在圆内,然后使用“对象>变换>剪切”选项将其垂直剪切-10°。

清除文本的填充颜色,并使用相同的5pt大小添加黑色笔划,圆帽和圆角设置。右键单击并选择“转换为轮廓”。

画一个小圆圈,用剪刀工具在左上角区域夹住路径。使用直接选择工具删除从底点到新切割的路径。

复制这个形状,并按比例缩放,以填充圆圈内的空白空间,以表示行星的陨石坑。

选择主行星圆,按Cmd+C,然后按Cmd+F复制粘贴到前面。按住ALT键,同时拉伸和挤压形状,形成环绕地球的圆环,然后复制形状并稍微缩小以适应原始形状。

在画板上的某个地方画一个椭圆形,然后使用直接选择工具向上拖动顶点以拉伸形状。

使用“笔工具”组中的“转换定位点”工具移除Bezier手柄并保留一个锐角。

将其他圆添加到形状中以生成一个简单的火箭。使用“对齐”面板,通过额外单击火箭主体使其成为关键对象,将所有元素居中。

再制作两份火箭和天平的副本,并将每个副本旋转到位,绕地球轨道运行,每次变大一点。

目前设计中有很多路径相互重叠,因此,让我们创建一个更典型的霓虹灯标志布局。选择主行星圆并转到“对象>路径>偏移路径”。输入3mm。

右键单击生成的偏移路径并选择“制作参考线”。现在是确保指南可见(cmd+;)和锁定(cmd+alt+;)的好时机。

用剪刀工具剪断行星环与新导轨相交的路径。使用智能指南(Cmd+U)可以很容易地捕捉到该区域。

在另一边,字母P也与行星轮廓重叠,因此,取消文本组合以便单独选择此字母,然后添加一个3毫米的偏移路径。

字母P尤其需要一个额外的步骤来创建一个指南。右键单击并选择释放复合路径,然后删除碗的内部部分,然后将主轮廓变成一个指南。

剪断行星环,它们穿过字母P的偏移路径,然后删除路径中不需要的部分。

在整个设计过程中,同样的技术将被用于移除任何交叉路径,但是对于环的下部,文字将需要修改,以允许环包围行星。

取消其他文本元素的组合,并为第一个和最后一个字母添加偏移路径,然后根据结果创建辅助线。记住释放字母P的复合路径,使其成为一个指南。

使用这些新的辅助线来截取任何相互交叉的路径,并去除设计周围的重叠部分。

对于环与文本重叠的区域,额外的辅助线需要从环路径本身创建。

使用剪刀工具夹住并删除超出准线的所有字母区域。

有时需要释放字母的复合路径,以便只选择和删除路径中所需的部分。

一旦所有重叠的路径都被删除,设计开始呈现出更加逼真的霓虹灯标志外观。

选择构成设计不同部分的所有路径,并将笔画更改为明亮的颜色,比如蓝色,红色,黄色或白色。

通过使用“选择>相同>笔划颜色”菜单将不同颜色分离到各自的图层上,然后是“复制并粘贴到前面”命令。给出设计的任何部分,这些部分将被设置为自己的层的动画,就像三枚火箭的主要成分一样。

转到文件>导出并将文件类型更改为Photoshop PSD。beplay足球确保选中“写入层”选项。

在Photoshop中打开导出的PSD,并稍微展开beplay足球画布。用黑色填充背景,并添加砖纹理。

选择所有霓虹灯标志元素层,按Cmd+J复制它们,然后是cmd+e将它们合并为一个。将此层重命名为“关闭”。

添加一系列图层样式,使该图层具有管状外观,且没有照明。即彩色叠加,内在的辉光和阴影。

把这个黑色的图层放在图层堆栈的底部。它将被照亮的版本隐藏,但在关闭设计的任何动画部分时都可见。

用一系列的图层样式使第一层霓虹灯焕然一新。添加一个内发光添加一个明亮的白色中心,一种能散发出彩色光环的外部光芒,接下来是附加的投影,以覆盖不同大小的更多光晕。

所有这些图层样式结合在一起,产生了相当逼真的霓虹灯效果,与砖墙背景相互作用。

复制图层样式并将其粘贴到下一个图层上,然后编辑设置以更改发光体的颜色以匹配元素。

通过将相同的图层样式粘贴到使用相同颜色霓虹灯的任何其他图层上节省时间。

所有图层样式就位后,霓虹灯开始看起来不错,但一些简单的动画确实能让它变得生动。

对构成每个火箭形状的所有元素进行分组,以便可以轻松地为动画打开或关闭这些元素。

使时间线面板在窗口菜单中可见,然后创建一个新的帧动画。

对于第一帧,关闭所有被照亮的霓虹灯层,使暗管与砖墙背景保持相对。将此帧的持续时间更改为1秒。

添加新框架并打开第一个霓虹灯层的可见性。不延迟此帧,因此灯光立即闪烁。

在不延迟的情况下添加两个后续帧,将红色和蓝色Neons添加到标志中,每一个都立即闪烁着照亮了标志。

在下一帧中,打开第一个火箭层的可见性,并将持续时间更改为1秒。

在下一帧中关闭火箭组并打开第二个火箭层,以给人留下移动火箭船的印象。

创建另一个层并打开/关闭层组,以使最终火箭可见。

最后三帧可以复制以扩展动画。或者,动画可以由这三层组成,无限循环,而无需初始的“打开”效果。

动画霓虹标志效果

最后的霓虹标志效果可以导出为动画gif供网络使用,或传输到视频软件以创建更好的质量循环。

访问此下载

想要更多吗?看看这些伟大的相关产品

以下资源成本很低,beplay足球但我绝对建议你去看看这些能产生类似霓虹灯效果的高级设计资源。beplay足球

霓虹灯文本层样式和附加

霓虹灯文本层样式和附加

霓虹现实画笔集

霓虹现实画笔集

霓虹字母套件

霓虹字母套件

六百五十四
分享
在Pinterest上共享
31评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

31评论

  1. 创建动画效果不是一件容易的工作,但您的循序渐进的教程非常有助于向初学者介绍这些有吸引力的效果。在参观了你们的两个教程之后,我发现这个主题很有帮助,也很容易理解。保持高水平,通过辅导来教人。

  2. 喜欢这个教程,但是当我试图以GIF格式保存时,它并不像动画那样保存,只是一张照片!请帮忙

评论现已关闭