Створіть світловий текстовий ефект

Sep 13, 2025

Як

Часто це найпростіший ефект, який виглядає найбільш вражаючим, а текст Neon - це один з таких проектів. Це також набагато легше створити неоновий ефект, який виглядає реалістичним, ніж ви думаєте. Хоча цей весь навчальний посібник використовує лише одне фонове зображення, ваш мозок трюків полягає в тому, щоб побачити це як реальний, функціонуючий неоновий знак - це сила Photoshop CC Стилі шарів. Дізнайтеся більше про Дивовижні речі, які ви можете зробити з шарами Photoshop .

Отримати Adobe Creative Cloud

Той факт, що цей весь цей проект побудований з нуля - від шрифту до кольорів світиться, до кінцевої анімації - означає, що є багато можливостей для творчості. Ви можете вибрати саме те, що ви хочете, щоб кожну частину цього ефекту виглядати.

Неон продовжує бути популярним. Демонструючи насичені тони проти темного, приглушений фон - це чудовий спосіб представити a Цільова сторінка , a Дизайн логотипу або заголовок, і це легко анімувати свою роботу та зберегти його як GIF з низьким розміром файлу (збережіть файли в безпеці в хмара зберігання ). Давайте зануримося в те, як його створити.

Створення шрифту, який буде відображатися на новому веб-сайті? Вам потрібно Веб-будівельник і відмінний веб хостинг .

01. Почніть створювати шрифт

Use Photoshop's Pen tool to draw the letter 'a' — Використовуйте інструмент для пера Photoshop, щоб намалювати першу літеру

Створіть новий документ 550x550px у Photoshop, і піднімайте сітку, натиснувши CMD / Ctrl + ' . Створіть новий шар і з інструментом пера, намалюйте свою першу літеру. Залишити прогалини в персонажі, оскільки це буде неонним шрифтом. Одного разу ви щасливі, натисніть удар на вкладці "Шляхи", щоб залучити в листі.

02. Робота через алфавіт

dollar and pounds signs in Photoshop — Не забувайте про спеціальні символи

Створіть стільки символів, скільки хочете, з пером на новому шарі кожного разу. Якщо ви хочете, додати в деякі спеціальні символи, такі як символи валют, пунктуації та акцентну літери. Слідуйте за тим самим основним стилем, з яким ви почали, тому ваш шрифт є згуртованим.

03. Перейдіть у шрифт

fontcreator trial — Там безкоштовна пробна версія FontCreator, якщо вам це потрібно

Якщо у вас є Високологічний шрифт Це є частиною, де ви можете перетворити свої символи в шрифт. Якщо ви цього не зробите, безкоштовна пробна версія. Вставляючи кожен персонаж у шрифт, ми можемо створити зручний шрифт для Photoshop.

Працюйте своїм способом через шрифт, двічі клацнувши кожен персонаж і вставити у вашій ручці. Переконайтеся, що кожна буква знаходиться на тій же базовій лінії.

04. KERN Ваш текст

check your kerning — Завжди двічі перевірте свій ключ

Кернінг - це простір між кожним з літер (для отримання додаткової інформації, подивіться на нашу Типографічний глосарій ), а опція Auto-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 + Клацніть правою кнопкою миші шар і перейдіть до параметрів змішування та GT; Зовнішнє світіння. Там вводять непрозорість 50%, поширення 5% і розміром 63px. Тепер ви можете побачити ваш текст Neon, який починає виглядати набагато більш реалістичним. Виберіть яскравий колір.

Клацніть на Bevel і Emboss, як і раніше, у варіанті стилів шару. Виберіть Глибину: 250%, Розмір: 5px, пом'якшення: 2px. Використовуйте режими підсвічування та тіні, щоб додати трохи глибину тексту, а також відтворювати ці параметри, доки ви не знайдете правильну суміш.

08. Грайте з тінями

drop shadow in Photoshop — Не обманюйте ваш зовнішній світ

Для внутрішньої тіні виберіть той самий яскравий колір, який ви вибрали для зовнішнього світіння. Все, що вам потрібно буде змінити, це розмір, залежно від того, наскільки великий текст. Змінити це і залиште всі інші значення на 0.

Оскільки неонний текст буде трохи сидіти з стіни, нам знадобиться тонка тінь, але не надто сильно, як ми не хочемо компромісувати зовнішнє світіння. Використовуйте низьку непрозорість, і дайте цю ще кілька відстані та розміру.

09. Світло його

string added to text in Photoshop — Переконайтеся, що рядок слідує через всі символи

Перейдіть до текстового шару, кара / Клацніть правою кнопкою миші та виберіть Стилі копіювання шару. Натисніть на шар тварина, кара / Клацніть правою кнопкою миші та виберіть Стилі Вставити шар. Двічі клацніть значок FX і поверніть рожеві кольори до зеленого кольору, щоб трохи відтворити текст.

Візьміть інструмент ручки та створіть рядок через текст неона та тварин, які ви створили. Переконайтеся, що це випливає через всі символи, а потім інсульт з # 808080, з 2PX щіткою, вибраною з 1% інтервалом.

10. Додайте краплю

add a drop shadow in Photoshop — Дайте струнну скошую і трохи тіней

Перейдіть до параметрів змішування для ряду, який ви тільки що ви зробили. Голова до того, щоб дати йому тонку форму, і теж дасть йому тонку тінь. Змінні тут залежать від розміру та форми створеного рядка, тому просто експериментуйте, щоб побачити, що працює.

11. Створіть "Off" версію

flickering effect in Photoshop — Тепер зробіть негнучу копію, щоб ви могли створити мерехтний ефект

Давайте створимо шар тексту, який не світить, тому ми можемо анімувати мерехтіння на деяких літерах. Дублюйте текстовий шар, а потім приховайте зовнішній стиль свічення. Встановіть внутрішню тінь до # 808080, а потім змінити легкість цього шару до -50, використовуючи відтінок / насиченість ( cmd / ctrl + У ).

На свіжому текстовому шарі, захопити інструмент Marquee і виберіть кілька букв, які ви хочете коротко вимкнути в анімації. Зробіть дублікації цього шару, з цими листами, замаскованими, доки у вас не вистачить шарів для створення анімації.

12. Анімація вашого дизайну

export animation as a gif in Photoshop — Експортувати як анімований GIF, і ви добре йти

Перейдіть до верхнього праворуч від Photoshop та виберіть Motion як варіант робочої області. Хронологія анімації з'явиться внизу; Тут ви можете визначити, які шари показані або приховані, однак, ви хочете, щоб вони були.

Створіть нові кадри вздовж дна з різними літерами або світяться, або не світяться, залежно від того, чи є шар видимий чи ні. Встановіть час анімації кожного шару за допомогою невеликої стрілки на кожному кадрі. Зберегти як GIF, використовуючи збереження для Інтернету.

Ця стаття була опублікована в веб-дизайнері, журнал "Творчий веб-дизайн", пропонуючи експертні підручники, найсучасніші тенденції та безкоштовні ресурси. Підписатися на веб-дизайнер тут .

Пов'язані статті:

40 повинні див. Приклади кінетичної типографії
Як створити анімований ефект типу
Створіть свій власний 3D-шрифт

Створіть світловий текстовий ефект

01. Почніть створювати шрифт

02. Робота через алфавіт

03. Перейдіть у шрифт

04. KERN Ваш текст

05. Налаштуйте документ Photoshop

06. Введіть текст

07. Створіть свічення

08. Грайте з тінями

09. Світло його

10. Додайте краплю

11. Створіть "Off" версію

12. Анімація вашого дизайну

Як - Найпопулярніші статті

Як вимкнути веб-сповіщення для Windows, MacOS та Android

Як прискорити ретепологію в майя

Як стискати зображення: довідник веб-дизайнера

Affinity Designer: Як використовувати експорт Persona

Як використовувати веб-шрифти

Розсіяні дерева з V-Ray

Намалюйте класичну сцену казкової казки з procreate

Як створити реалістичну тканину CG

Категорії