Часто это самые простые эффекты, которые выглядят наиболее яркими, а неоновый текст — один из таких проектов. Также намного легче создать неоновый эффект, который выглядит реалистичным, чем вы думаете. В то время как весь этот учебник использует только одно фоновое изображение, ваш мозг пытается понять это как настоящий, функционирующий неоновый знак — это сила стилей слоя Photoshop CC.
. Тот факт, что весь этот проект построен с нуля — от шрифта до цветов свечения, до возможной анимации — означает, что есть много возможностей для творчества. Вы можете выбрать именно то, что хотите, чтобы каждая часть этого эффекта выглядела.
Неон продолжает оставаться популярным. Отображение насыщенных тонов против темного, заглушенного фона — отличный способ представить целевую страницу, дизайн логотипа или заголовок, а также легко оживить вашу работу и сохранить ее как GIF с низким размером файла. Давайте погрузимся в его создание.
Создайте новый документ 550x550px в Photoshop и поднимите сетку, нажав cmd / ctrl + '. Создайте новый слой и с помощью инструмента «Перо» нарисуйте свою первую букву. Оставьте пробелы в характер, так как это будет шрифт неонового стиля. Как только вы счастливы, нажмите «Обводка» внутри вкладку «Пути», чтобы нарисовать букву.
02. Работа через алфавит
Если у вас есть High-Logic FontCreator, это та часть, где вы можете превратить своих персонажей в шрифт. Если вы этого не сделаете, доступна бесплатная пробная версия. Вставляя каждого персонажа в FontCreator, мы можем создать пригодный шрифт для Photoshop.
Проработайте свой путь через FontCreator, дважды щелкнув каждый символ и вставив в свою работу Pen. Убедитесь, что каждая буква находится на одной базовой линии.
04. Kern ваш текст
Кернинг — это пространство между каждым из (для получения дополнительной информации ознакомьтесь с нашим типографическим глоссарием), а опция автоматического кернинга в FontCreator, естественно, пробегает ваши письма, чтобы шрифт выглядел аккуратно. Попробуйте эту опцию и убедитесь, что каждая буква выглядит хорошо.
Как только он будет завершен, экспортируйте шрифт и установите его на свой компьютер. Это автоматически добавит его в Photoshop CC.
05. Настроить документ Photoshop
06. Введите текст
Type в некотором тексте и растеризовать его
Захватить инструмент «Тип» и выбрать ваш шрифт (если вы раньше не создали шрифт, просто поместите в каждую букву отдельно). Выделите текст перед ctrl + щелчком правой кнопкой мыши слой и выберите Rasterize Type.
07. Создать свечение
Дать ваш текст немного глубже с прекрасным скосом
ctrl + щелкните правой кнопкой мыши слой и перейдите к Blending Options> Outer Glow. Там вводится непрозрачность 50%, разброс 5% и размер 63 пикселей. Теперь вы можете видеть, что ваш неоновый текст начинает выглядеть намного реалистичнее. Выберите яркий цвет.
Нажмите на Bevel and Emboss, все еще в опции Layer Styles. Выберите Глубина: 250%, размер: 5 пикселей, Смягчение: 2 пикселя. Используйте режимы «Выделение» и «Тень», чтобы добавить немного больше текста в текст и играть с этими параметрами, пока не найдете правильный микс.
08.
Не испортите свое внешнее свечение теневой тканью
Для Inner Shadow выберите тот же яркий цвет, который вы выбрали для Outer Glow. Все, что вам нужно изменить, это размер, в зависимости от того, насколько большой текст. Измените это и оставьте все остальные значения равными 0.
Как неоновый текст будет немного сидеть у стены, нам понадобится суб tle drop shadow, но не слишком много, так как мы не хотим компрометировать Outer Glow. Используйте низкую непрозрачность и дайте ей еще немного расстояния и размера.
09.
Убедитесь, что строка следует за всеми персонажами
Перейдите в текстовый слой, ctrl / щелкните правой кнопкой мыши и выберите «Копировать стили слоя». Нажмите на слой животного, ctrl / щелкните правой кнопкой мыши и выберите «Вставить слои». значок FX и превратить розовые цвета в зеленый цвет, чтобы немного контрастировать с текстом.
G rab инструмент пера и создать строку через неоновый текст и животных, которые вы создали. Убедитесь, что он следует всем символам, а затем потяните # 808080 с помощью кисти 2px, выбранной с шагом 1%.
10. Добавить drop-shadow
Выполните колонну скосом и немного тени для сбрасывания
Перейдите к параметрам наложения для строки, которую вы только что создали, идите в Bevel, чтобы придать ей тонкую форму и придать ей тонкую тень. Здесь переменные зависят от размера и формы строки, созданный, так что просто экспериментируйте, чтобы увидеть, что работает.
11. Создайте версию 'off'
Теперь сделайте непрозрачную копию, чтобы вы могли создать мерцающий эффект
Давайте создадим слой текста который не светится, поэтому мы можем анимировать мерцание на некоторых из букв. Дублируйте текстовый слой, затем скройте стиль Outer Glow. Установите Inner Shadow на # 808080, затем измените Lightness этого слоя на -50, используя Hue / Saturation ( cmd / ctrl + U ).
On светящийся текстовый слой, возьмите инструмент Marquee и выберите несколько букв, которые вы хотите отключить в анимации. Сделайте дублирование этого слоя, при этом эти буквы замаскированы, пока у вас не будет достаточных слоев для создания анимации.
12. Анимация вашего дизайна
Экспорт в виде анимированного gif, и вы хорошо поедете
Пойдите в верхнюю правую часть Photoshop и выберите «Motion as Workspace». Временная шкала анимации появится внизу: здесь вы можете определить, какие слои отображаются или скрыты, пока вы их не хотите.
Создайте новые кадры по низу с разными буквами либо светящимися или не светится, в зависимости от того, является ли этот слой видимым или нет. Установите время анимации каждого слоя с помощью маленькой стрелки на каждом кадре. Сохранить как GIF, используя «Сохранить для Интернета».
Эта статья была первоначально опубликована в веб-дизайнере, журнале креативного веб-дизайна, предлагающем экспертные руководства, передовые тенденции и бесплатные ресурсы. .