跳到主要内容

创建发光的霓虹灯文字效果

通常情况下,这是最引人注目的最简单的效果,而霓虹灯文字就是这样一个项目。创建一个看起来比你想象的逼真的霓虹灯效果也要容易得多。虽然这整个教程只使用了一个背景图像,但是你的大脑会将自己视为一个真实的,功能正常的霓虹灯 - 这就是力量Photoshop CC的图层样式。了解更多相关信息你可以在这里用Photoshop的图层做些惊人的事情

事实上,整个项目是从头开始构建的 - 从字体到发光的颜色,再到最终的动画 - 意味着有很大的创造空间。您可以准确选择您想要的效果的每个部分。

霓虹灯继续受欢迎。在黑暗柔和的背景下显示饱和的色调是一种很好的呈现方式登陆页面, 一个标志设计或标题,并且很容易为您的工作设置动画并将其另存为文件较小的GIF。让我们深入探讨如何创建它。

01.开始创建字体

Use Photoshop's Pen tool to draw the letter 'a'

使用Photoshop的钢笔工具绘制您的第一个字母

在Photoshop中创建一个新文档550x550px,然后通过点击调出网格CMD / CTRL +”。创建一个新图层并使用钢笔工具勾画出您的第一个字母。留下角色的空白,因为这将是一个霓虹风格的字体。一旦你开心,在Paths选项卡中点击Stroke来绘制字母。

02.通过字母表工作

dollar and pounds signs in Photoshop

不要忘记特殊字符

根据需要创建任意数量的字符,每次使用Pen在新图层上。如果您愿意,可以添加一些特殊字符,例如货币符号,标点符号和重音字母。遵循您开始使用的相同基本样式,因此您的字体具有凝聚力。

03.进入FontCreator

fontcreator trial

如果您需要,可以免费试用FontCreator

如果你有High-Logic FontCreator,这是您可以将字符转换为字体的部分。如果不这样做,可以免费试用。通过将每个字符粘贴到FontCreator中,我们可以为Photoshop创建一个可用的字体。

通过双击每个角色并粘贴在笔画工作中,逐步完成FontCreator。确保每个字母都在同一基线上。

04.克恩你的文字

check your kerning

总是仔细检查你的字距

字距是每个字母之间的空格(有关更多信息,请查看我们的字母印刷术语表),FontCreator中的自动字距调整选项自然地将您的字母空格化,以使字体看起来整洁。试试这个选项,确保每个字母看起来都很好。

完成后,导出字体并将其安装到计算机中。这将自动将其添加到Photoshop CC。

05.设置Photoshop文档

photoshop document palette

使用我们建议的调色板或创建自己的

在Photoshop中创建一个新文档。在新图层上,使用大画笔创建调色板。我们选择#501d26,#af273d,#f74663,#ffdae1,#35e985和#b2dcc4。

然后找到合适的背景图像并将其拖动到Photoshop中。创建一个新图层,将其填充为深红色并复制。将一个图层设置为“乘法”,将一个图层设置为“颜色”。创建亮度/对比度图层并在亮度中设置为-75。复制此内容并屏蔽中心以显示晕影。

06.输入文字

default text in Photoshop

输入一些文本并对其进行栅格化

抓取“类型”工具并选择您的字体(如果您之前没有创建字体,只需单独放置每个字母)。之前拼出你的文字CTRL +右键点击图层并选择栅格化类型。

07.创造一个光芒

add a bevel in Photoshop

用可爱的斜角给你的文字更深入一点

CTRL +右键点击图层,然后转到“混合选项”>“外发光”。在那里,输入50%的不透明度,5%的扩展和63px的大小。现在,您可以看到您的霓虹灯文字看起来更加逼真。选择鲜艳的颜色。

单击“斜角和浮雕”,仍然在“图层样式”选项中。选择深度:250%,尺寸:5px,柔化:2px。使用“突出显示”和“阴影”模式为文本添加更多深度,并使用这些选项直到找到正确的混合。

08.玩弄阴影

drop shadow in Photoshop

不要用你的投影弄乱你的外发光

对于内阴影,选择您为外发光选择的相同亮色。这里你需要编辑的只是大小,取决于文本的大小。更改此项并将所有其他值保留为0。

由于霓虹灯文字会稍微偏离墙壁,我们需要一个微妙的投影,但不要太多,因为我们不想妥协外发光。使用低不透明度,并给这个更多距离和大小。

点亮它

string added to text in Photoshop

确保字符串跟随所有字符

转到文本图层,CTRL/右键单击并选择“复制图层样式”。点击动物图层,CTRL/右键单击并选择“粘贴图层样式”。双击FX图标并将粉红色变为绿色,与文本形成鲜明对比。

抓住钢笔工具,通过霓虹灯文本和您创建的动物创建一个字符串。确保它贯穿所有字符,然后用#808080划线,选择2px画笔,间距为1%。

10.添加阴影

add a drop shadow in Photoshop

给字符串一个斜角和一点投影

转到您刚刚制作的字符串的混合选项。前往斜面,给它一个微妙的形状,并给它一个微妙的投影。这里的变量取决于您创建的字符串的大小和形状,因此只需尝试查看哪些有效。

11.创建一个“关闭”版本

flickering effect in Photoshop

现在制作一个不发光的副本,这样你就可以创建一个闪烁的效果

让我们创建一个没有发光的文本层,这样我们就可以为一些字母上的闪烁设置动画。复制文本图层,然后隐藏外发光样式。将内阴影设置为#808080,然后使用色调/饱和度将此图层的亮度更改为-50(CMD / CTRL+ü)。

在发光的文本图层上,抓住选框工具并选择要在动画中短暂关闭的几个字母。复制此图层,将这些字母遮盖,直到您有足够的图层来创建动画。

12.动画你的设计

export animation as a gif in Photoshop

导出为GIF动画,你很高兴

转到Photoshop的右上角,选择Motion作为工作区选项。动画时间线将显示在底部;在这里,您可以定义显示或隐藏的图层,无论您希望它们存在多长时间。

沿着底部创建新框架,各种字母要么发光要么不发光,具体取决于图层是否可见。使用每个帧上的小箭头设置每个图层动画的时间。使用Save For Web保存为GIF。

本文最初发表于Web Designer,这是一本创意网页设计杂志 - 提供专家教程,前沿趋势和免费资源。在此订阅Web Designer

相关文章:



翻译字数超限