Как сделать огненный текст

Урок создания огненного текста в Фотошопе

Приветствуем вас на очередном уроке по Фотошопе, в котором мы научимся создавать огненные надписи.

У нас уже были подробные разборы на тему работы со шрифтами/текстом, например: “Как сделать золотые буквы в Фотошопе”

Даже если вам никогда не понадобится создание огненных букв в ваших работах, практика все равно доставит особое удовольствие.

Создание горящего текста в Photoshop

Для стилизации мы возьмем первую букву нашего логотипа – “M”.

Важно! Для достижения эффекта, слой с текстом (белым) должен быть черном фоне.

Подготовка текста: работа со стилями слоя

• Создаем один слой с черной заливкой и поверх него располагаем слой с белым текстом – буквой “M” (наш шрифт: Fira Sans SemiBold Italic):
  
• После, открываем параметры наложения (стили) для слоя с текстом, двойным кликом по нему. Можно также вызвать стили слоя, кликнув правой кнопкой мыши на слой и в выпадающем меню выбрать “Параметры наложения”:
  
• В открывшемся окне настроек ставим галку возле “Внешнее свечение”, тем самым активировав эффект. В параметрах эффекта выбираем в пункте “Цвет” оттенки красного/темно-красного, непрозрачность ставим на 80%, размах – 0%, режим наложения – “Экран”, а в поле размер все индивидуально. У нас получились такие настройки:
  
• После, активируем эффект “Наложение цвета” и выбираем в его настройках оттенок темно-оранжевого цвета, режим наложения – “Нормальный”, а непрозрачность – 100%, как показано на скриншоте ниже:
  
• Переходим к добавлению “Глянца”. Режим наложения выбираем “Умножение”, если не стоит по умолчанию, непрозрачность – 100%, в качестве цвета выбираем оттенки мутного темно-красного, угол поворачиваем на 30 градусов, контур – “по Гауссу”, а размеры и смещение индивидуально.
  
• Последний этап в настройках стиля слоя – активация «Внутреннего свечения». Режим наложения – “Линейный осветлитель”, непрозрачность – 100%, шум – 0%, цвет выбираем – мутно-желтый, метод – “Мягкий”, источник – “На краях”, стягивание – 0%, размер – индивидуально. См. скриншот ниже:
  
• Применяем изменения нажатием “ОК” и получаем предварительный результат до наложения огня:
  
• Теперь, прежде чем мы будем работать дальше, нужно растрировать слой с текстом. Просто нажимаем правой кнопкой мыши на слой с текстом и в выпадающем меню выбираем “Растрировать текст”, как показано на скриншоте ниже:
  А затем еще раз кликаем по слою и выбираем уже “Растрировать стиль слоя”:
  
• После переходим в главное меню “Фильтр” ->“Искажение” –>“Рябь”.
  В открывшемся окне настроек ряби передвигаем ползунок на глаз, но при этом размер нужно выбрать “Средний”. Кликаем “ОК”.
  

Наложение пламени на текст

Смотрите также: “Как включить сетку в Фотошопе CS и CC”

Мы подошли к самой интересной части – наложению заранее подготовленного изображения огня на букву. Если у вас еще нет такого изображения, то вы можете поискать его в в Google картинках. Стоит отметить также и то, что на букву М сложнее найти изображения пламени, поэтому лучше начинать эксперименты с буквы А.

Важно! Изображение огня должно быть на черном фоне!

• Когда пламя уже подобрано, необходимо разместить его на самом верхнем слое в палитре и поменять режим наложения на “Экран”, а ползунок непрозрачности сдвинуть на отметку 95%.
  
• Таким образом наша огненная буква уже почти готова. Но… Еще один момент. Если буква теряется на фоне пламени, то вы можете просто создать копию слоя с текстом. Можете создавать столько копий, сколько нужно, пока все не будет смотреться гармонично.
  

Результат

Вот и все. Теперь вы знаете как сделать огненный текст в Фотошопе. И, как оказывается, это не так сложно.

До встречи в наших следующих уроках!

Создаём Раскалённый Текст, используя Фильтр Пламя в Adobe Photoshop CC

Фильтр Генератор Пламени (Flame Generator) в Adobe Photoshop CC — это новая функция, предназначенная для визуализации реалистичного пламени на созданных контурах. В этом уроке я покажу вам, как стилизовать и текстурировать ржавый текст, а затем, как добавить пламя с помощью фильтра, а также некоторые другие текстуры дыма и искр, чтобы создать яркий раскалённый пламенем текст.

Исходные материалы

Следующие исходные материалы были использованы для создания данного урока:

1. Создаём Задний Фон и Текст

Шаг 1

Создайте новый документ со следующими размерами 1740 x 1170 px, залейте его цветовым оттенком #111111 .

Далее, создайте текст, используя шрифт Intro Regular, цвет шрифта #d2b593 , размер шрифта 350 pt, установите значение Трэкинга (Tracking) на 50, или используйте любое другое значение на своё усмотрение в зависимости какой результат вы хотите получить.

Шаг 2

Дважды щёлкните по слою с текстом, чтобы применить следующие стили слоя:

Добавьте стиль слоя Тиснение (Bevel and Emboss). Установите следующие настройки:

• Метод (Technique): Жёсткая огранка (Chisel Hard
• Размер (Size): 35
• Режим подсветки (Highlight Mode): Яркий свет (Vivid Light)
• Цвет: #fae8c1
• Режим тени (Shadow Mode): Затемнение основы (Color Burn)
• Цвет: #b07133

Шаг 3

Добавьте стиль слоя Контур (Contour) со следующими настройками:

• Контур (Contour): По Гауссу (Gaussian)
• Поставьте галочку в окошке Сглаживание (Anti-aliased)

Шаг 4

Добавьте стиль слоя Внутренняя тень (Inner Shadow) со следующими настройками:

• Режим наложения (Blend Mode): Затемнение основы (Color Burn)
• Цвет: #b0764c
• Смещение (Distance): 0
• Размер (Size): 8

Шаг 5

Добавьте стиль слоя Внутреннее свечение (Inner Glow) со следующими настройками:

• Режим наложения (Blend Mode): Linear Light (Линейный свет)
• Цвет: #dd8238

Шаг 6

Добавьте стиль слоя Внешнее свечение (Outer Glow) со следующими настройками:

• Режим наложения (Blend Mode): Linear Light (Линейный свет)
• Цвет: #edc09f

Шаг 7

Итак, мы стилизовали текст и придали ему 3D вид.

2. Добавляем Текстуру Ржавчины и Смягчаем Края Текста

Шаг 1

Откройте текстуру Ржавчины в программе Photoshop, переместите данную текстуру на наш рабочий документ, расположив поверх слоя с текстом. Переименуйте слой с текстурой в Текстуру (Texture), а затем поменяйте режим наложения для слоя с текстурой на Умножение (Multiply). Далее, щёлкните правой кнопкой мыши по слою с текстурой и в появившемся окне, выберите опцию Создать обтравочную маску (Create Clipping Mask).

После того, как вы преобразовали слой с текстурой в обтравочную маску к слою с текстом, вы можете применить масштабирование к текстуре, а также сместить её, чтобы поиграть с рисунком текстуры, пока вас не устроит результат.

Шаг 2

Выделите слой с текстом и слой с текстурой Ржавчины, продублируйте выделенные слои, а затем идём Слой- Объединить слои (Layer > Merge Layers), чтобы создать объединённый слой из дубликатов слоёв. Поменяйте режим наложения для объединённого слоя на Нормальный (Normal).

Шаг 3

Щёлкните правой кнопкой мыши по слою с текстом и в появившемся окне, выберите опцию Создать рабочий контур (Create Work Path).

Шаг 4

Выберите инструмент Палец (Smudge Tool). В настройках данного инструмента, установите мягкую круглую кисть, размер кисти 25рх, Интенсивность (Strength) на 50%, режим Нормальный (Normal).

Перейдите на объединённый слой с текстурой (Texture copy), а затем нажмите один раз клавишу (Enter), чтобы смягчить края. В качестве альтернативного варианта, вы можете выбрать инструмент Стрелка (Direct Selection Tool (A), щёлкните правой кнопкой по рабочему контуру и в появившемся окне, выберите опцию Выполнить обводку контура (Stroke path), далее, в выпадающем меню, выберите инструмент Палец (Smudge), уберите галочку в окошке Имитировать нажим (Simulate Pressure), а затем нажмите кнопку ‘OK‘.

Не меняя инструмент Стрелка (Direct Selection Tool), нажмите клавишу (Enter), чтобы удалить рабочий контур.

Шаг 5

Откройте исходное изображение Искры 1 в программе Photoshop, переместите данное изображение на наш рабочий документ, расположив поверх всех остальных слоёв, поменяйте режим наложения для данного слоя с искрами на Линейный осветлитель (Добавить) (Linear Dodge (Add), а затем идём Трансформация-Поворот на 90° по часовой стрелке (Transform – Rotate 90° Clockwise). Примените масштабирование на своё усмотрение.

Шаг 6

Далее, идём Изображение- Коррекция- Цветовой тон / Насыщенность (Image > Adjustments > Hue/Saturation), поставьте галочку в окошке Тонирование (Colorize), а также установите Цветовой тон (Hue) на 35, а Насыщенность (Saturation) на 50.

3. Добавляем Контуры и Эффекты Огня

Шаг 1

Выберите инструмент Перо (Pen Tool), а затем в панели управления данного инструмента, выберите режим Контуры (Paths). Что вам нужно сделать далее — это добавить пару прямых вертикальных контуров в произвольном порядке поверх текста.

Для этого, щёлкните один раз, где вы хотите начать контур, нажмите и удерживайте клавишу (Shift), а затем ещё раз щёлкните, где вы хотите остановить контур. Далее, удерживая клавишу (Ctrl), щёлкните где-нибудь рядом с контуром, таким образом, вы сможете начать создание отдельного нового контура.

Повторите процесс, пока вы не добавите ещё пару контуров поверх текста. Чем длиннее контуры, тем длиннее будут языки пламени.

Шаг 2

Создаёте новый слой поверх всех остальных слоёв, назовите этот слой Пламя (Flames).

Шаг 3

Далее, идём Фильтр- Рендеринг — Пламя (Filter > Render > Flame). Установите следующие настройки, которые указаны на скриншоте ниже:

Тип Пламени (Flame Type): Одно пламя вдоль контура (One Flame Along Path)

Это означает, что на каждом контуре будет только один язык пламени.

Этот параметр определяет ширину пламени в пикселях.

Данная настройка определяет количество линий в каждом пламени.

Данная настройки контролирует степень колебания пламени.

Любые значения больше 0 создадут неровности на краях.

Данная настройки контролирует непрозрачность пламени.

Если значение выставлено на 0, линии огня будут равномерно выравнены. Если выше 0, то линии пламени будут выставлены в случайном порядке.

Линии, создающие пламя, будут исходить из центра.

Поставьте галочку в окошке Сделать форму произвольной (Randomize Shapes).

Шаг 4

Как только вы нажмёте кнопку ‘ОК‘, языки пламени будут визуализированы. Выберите инструмент Стрелка (Direct Selection Tool), нажмите клавишу (Enter), чтобы избавиться от контуров.

4. Стилизуем Пламя

Шаг 1

Поменяйте режим наложения для слоя Пламя (Flames) на Осветление (Screen).

Шаг 2

Продублируйте слой Пламя (Flames).

Шаг 3

Дважды щёлкните по слою Пламя (Flames), чтобы добавить стиль слоя Внешнее свечение (Outer Glow) со следующими настройками:

• Режим наложения (Blend Mode): Линейный осветлитель (Добавить) (Linear Dodge (Add)
• Непрозрачность (Opacity): 60%
• Цвет: #e0b455
• Размер (Size): 70

Шаг 4

Таким образом, огонь стал ярче и более живым.

Шаг 5

Создайте новый слой ниже слоя Пламя (Flames), назовите этот слой Тёмные пятна (Dark Spots). Установите цвет переднего плана на #111111 , а затем выберите инструмент Кисть (Brush Tool). Установите мягкую круглую кисть, а теперь добавьте тёмные пятна у основания каждого пламени. Это сделает эффект более реалистичным.

5. Добавляем Дым

Шаг 1

Откройте исходные текстуры с Дымом 1 и 2 в программе Photoshop, переместите обе текстуры на наш рабочий документ, расположив их поверх всех слоёв. Поменяйте режим наложения для обоих слоёв на Светлее (Lighter Color). Данный режим позволит видеть текст за дымом. Примените масштабирование, поворот, а также поиграйте со смещением текстур, пока вам не понравится, как дым обволакивает текст.

Шаг 2

Выделите все слои с текстурой дыма, а затем идём Слой- Объединить слои (Layer > Merge Layers). Переименуйте объединённый слой в Дым поверх Текста (Smoke Top). Поменяйте режим наложения для данного слоя на Светлее (Lighter Color). Далее, нажмите значок Добавить слой-маску (Add layer mask) в нижней части панели слоёв.

Шаг 3

Выберите инструмент Кисть (Brush Tool), установите мягкую круглую кисть, цвет кисти чёрный. Находясь на слой-маске слоя с дымом, начните прокрашивать чёрной кистью, чтобы скрыть лишние участки дыма, сохранив эффект дыма поверх текста, а также немного над текстом.

6. Добавляем Искры

Шаг 1

Откройте исходное изображение с Искрами 2 в программе Photoshop. Переместите данное изображение на наш рабочий документ, расположив ниже слоя Тёмные пятна (Dark Spots), поменяйте режим наложения на для слоя с искрами на Линейный осветлитель (Добавить) (Linear Dodge (Add).

Шаг 2

Удерживая клавишу (Ctrl), щёлкните по миниатюре слоя с текстом, чтобы загрузить активное выделение.

Шаг 3

Ещё раз нажмите значок Добавить слой-маску (Add layer mask), чтобы добавить слой-маску к слою с искрами. Таким образом, мы удалим лишние фрагменты искр за пределами контура текста.

Шаг 4

Выберите инструмент Кисть (Brush Tool), установите мягкую круглую кисть, цвет кисти белый. Находясь на слой-маске слоя с искрами, прокрасьте кистью вокруг краёв и углов текста, чтобы восстановить на этих участках эффект искр. Таким образом, искры будут лучше совмещены с текстом, не оставляя много жёстких краёв.

7. Добавляем Эффект Дыма на Задний Фон

Шаг 1

Откройте исходную текстуру Дыма 3 в программе Photoshop. Переместите данную текстуру на наш рабочий документ, расположив поверх фонового слоя. Поменяйте режим наложения для данного слоя с текстурой дыма на Осветление основы (Color Dodge) Далее, идём Трансформация-Поворот на 90° по часовой стрелке (Transform – Rotate 90° Clockwise). Примените масштабирование при необходимости, расположив текстуру дыма за текстом.

Шаг 2

Идём Изображение — Коррекция — Цветовой тон / Насыщенность (Image > Adjustments > Hue/Saturation), поменяйте значение Цветового тона (Hue) на 162, а значение Насыщенности (Saturation) на 35.

8. Применяем Фильтр Размытие Диафрагмы

Шаг 1

Выделите все слои, которые у вас есть, продублируйте выделенные слои, а затем идём Слой — Объединить слои (Layer > Merge Layers), чтобы объединить выделенные дубликаты слоёв. Переименуйте объединённый слой в Заключительный (Final), а затем преобразуйте его в смарт-объект, для этого идём Фильтр > Преобразовать для смарт-фильтров (Filter > Convert for Smart Filters).

Шаг 2

Примените фильтр Размытие диафрагмы к слою со смарт-объектом, для этого идём Фильтр > Галерея размытия > Размытие диафрагмы (Filter > Blur Gallery > Iris Blur). В верхней панели настроек, установите Фокус (Focus) на 95%, а затем в правой панели Инструменты Размытия (Blur Tools), установите значение Размытия (Blur) на 10.

Поменяйте форму эллипса, щёлкнув и потянув за четыре опорные точки, которые соединены линией. А также настройте Область размытия, сместив более крупные точки, расположенные между центральной осью и внешней линией размытия. Вы можете также смещать точки по отдельности, нажав и удерживая клавишу (Alt), а затем щёлкнув и потянув за одну из точек.

Шаг 3

Размытие добавит красивый заключительный штрих к огненному эффекту.

Поздравляю! Мы завершили урок!

В этом уроке мы создали и стилизовали простой текст, используя пару стилей слоя, чтобы создать 3D вид. Далее, мы текстурировали текст с помощью текстуры Ржавчина, создали рабочий контур, размыли края текста текстурного слоя.

Затем мы создали пару контуров, использовали фильтр Пламя, чтобы создать небольшие языки пламени поверх текста, далее, мы стилизовали эти языки пламени, чтобы эффект огня выглядел ярче и более живым.

Мы добавили текстуру дыма поверх текста, включая текстуры с искрами, чтобы добавить больше интересных элементов к нему.

В заключение, мы добавили ещё одну текстуру дыма на зданий фон, а затем применили фильтр размытия, чтобы добавить больше глубины к заключительному результату.

Пожалуйста, не стесняйтесь оставлять свои комментарии, предложения, а также выкладывать свои работы.

Создаём Огненный Текст в Adobe Photoshop

Пирофобия — это чрезмерный страх или боязнь перед огнём. В этом уроке вы узнаете, как с помощью фильтра Flame Photoshop, текстур огня, дыма и искр, включая параметры наложения, фильтры и настройки, создать пылающий, огненный текст. Давайте приступим!

Данный текстовый эффект был вдохновлён другими текстовыми эффектами, которые доступны на сайте GraphicRiver.

Исходные материалы

Следующие исходные материалы были использованы для создания данного урока.

• Шрифт Aller Light
• Текстура Огня 0032
• Текстура Огня 0036
• Текстура Огня 0043
• Текстура Дыма
• Текстура искр 0023
• Текстура Искр 0017 Изображение 2 — Среднее

1. Создаём Задний Фон и Текстовые Слои

Шаг 1

Создайте новый документ со следующими размерами 1200 x 850 px. В нижней части панели слоёв, нажмите значок Создать новый корректирующий слой или слой заливку (Create new fill or adjustment layer) и в появившемся меню, выберите опцию Цвет (Solid Color). Установите следующий цвет заливки #1e100c .

Шаг 2

Создайте текст заглавными буквами, используя шрифт Aller Light. Установите размер шрифта на 350 pt, а также Трекинг (Tracking) на 100.

2. Создаём Обводку Контура и Слой

Шаг 1

Щёлкните правой кнопкой мыши по текстовому слою и в появившемся окне, выберите опцию Создать рабочий контур (Create Work Path).

Шаг 2

Отключите видимость текстового слоя, щёлкнув по глазку рядом с миниатюрой слоя, а затем создайте новый слой, назовите этот слой Огненная Обводка (Stroke Flames).

3. Применяем Фильтр Пламя

Шаг 1

Идём Фильтр – Рендеринг – Пламя (Filter > Render > Flame), нажмите кнопку ‘OK’, если появится окно с сообщением, что контур слишком длинный. Примечание переводчика: данный фильтр появился в версии Photoshop CC 2017

Далее, поиграйте с различными опциями и настройками для обводки контура эффектами огня, пока не получите тот результат, который вам нравится.

Настройки, которые были использованы в этом уроке:

Основные (Basic)

• Тип Пламени (Flame Type): 2. Параллельное Пламя вдоль Контура (Multiple Flames Along Path)
• Длина (Length): 115
• Поставьте галочку в окошке Произвольность Длины (Randomize Length).
• Ширина (Width): 35
• Интервал (Interval): 50
• Поставьте галочку в окошке Коррекция Цикличности Интервалов (Interval for Loops).
• Качество (Quality): Высокое (Плавное) (High (Slow)

Дополнительные (Advanced)

• Турбулентность (Turbulent): 35
• Зигзаг (Jag): 20
• Непрозрачность (Opacity): 50
• Линии Пламени (Сложность) (Flame Lines (Complexity): 29
• Нижнее Выравнивание Пламени (Flame Bottom Alignment): 20
• Стиль Пламени (Flame Style): 2. Интенсивный (Violent)
• Фигура Пламени (Flame Shape): 5. Направленная (Pointing)
• Поставьте галочку в окошке Произвольность фигур (Randomize Shapes).

Нажмите кнопку ‘OK’, чтобы применить фильтр. На рендеринг возможно уйдёт некоторое время, поэтому, подождите немного, пока фильтр не завершит работу.

Шаг 2

Если вас устраивает результат, тогда выберите инструмент Стрелка (Direct Selection Tool (A), а затем нажмите клавишу (Enter), чтобы избавиться от рабочего контура.

4. Создаём Слой с Текстурой Наложения

Шаг 1

Создайте новый слой поверх слоя Огненная Обводка (Stroke Flames), назовите этот слой Текстура Огня (Flame Texture), а затем залейте этот слой белым цветом.

Убедитесь, чтобы цвета переднего и заднего плана были установлены на чёрный и белый цвет.

Шаг 2

Щёлкните правой кнопкой мыши по слою Текстура Огня (Flame Texture) и появившемся окне, выберите опцию Преобразовать в Смарт-объект (Convert to Smart Object).

Шаг 3

Щёлкните правой кнопкой мыши по слою Текстура Огня (Flame Texture) и появившемся окне, выберите опцию Создать обтравочную маску (Create Clipping Mask).

Шаг 4

Идём Фильтр – Рендеринг – Облака (Filter > Render > Clouds).

5. Создаём Текстуру с помощью Фильтров

Шаг 1

Далее, идём Фильтр – Галерея фильтров (Filter > Filter Gallery), чтобы применить следующие фильтры:

Эскиз – Рельеф (Sketch > Bas Relief)

• Детализация (Detail): 13
• Смягчение (Smoothness): 3
• Свет (Light): Снизу (Bottom)

Шаг 2

Щёлкните по значку Новый слой эффектов (New effect layer) в нижнем правом углу, чтобы добавить другой фильтр, а затем ещё раз примените фильтр Рельеф (Bas Relief), используя те же самые настройки.

Шаг 3

Добавьте ещё один новый слой эффектов.

Штрихи – Разбрызгивание (Brush Strokes > Spatter)

• Радиус разбрызгивания (Spray Radius): 10
• Смягчение (Smoothness): 5

Нажмите кнопку ‘OK’, когда завершите.

6. Корректируем Параметры Наложения Слоя

Шаг 1

Поменяйте режим наложения для слоя Текстура Огня (Flame Texture) на Мягкий свет (Soft Light).

Шаг 2

Дважды щёлкните по слою Текстура Огня (Flame Texture), чтобы откорректировать настройки Параметров наложения (Blending Options). Мы собираемся настроить бегунки Данного слоя (This Layer) в настройках Наложение, если (Blend If).

Удерживая клавишу (Alt), потяните за правый бегунок, чтобы разделить его. По мере смещения половинки бегунка вправо, вы заметите, что текстура станет лучше совмещаться с эффектами огня.

То, что создаёт данный бегунок, препятствует взаимодействию более светлых участков текстуры с содержимым нижнего слоя.

Шаг 3

Поиграйте с различными значениями, пока вас не устроит результат.

Мы вернёмся к текстуре в конце урока, чтобы размыть её, поэтому, вы также можете немного изменить значения.

7. Добавляем Эффекты Огня

Шаг 1

Используйте любую текстуру Огня из набора: Текстура Огня 0032, Текстура Огня 0036 и Текстура Огня 0043, чтобы добавить к тексту.

Лучше всего добавлять исходные изображения в качестве Смарт-объектов (Smart Objects), поскольку, таким образом, вы можете внести изменения без воздействия на качество.

Для этого идём Файл – Поместить встроенные (File > Place Linked) и в появившемся окне навигации, откройте то исходное изображение, которое вы хотите добавить.

Шаг 2

Поменяйте режим наложения для данного слоя с текстурой Огня на Осветление (Screen).

Шаг 3

Нажмите клавиши (Ctrl+T), чтобы активировать режим Свободной Трансформации (Free Transform Mode), а затем сдвиньте, масштабируйте, поверните изображение, чтобы расположить текстуру поверх определённой области текста.

Нажмите клавишу (Enter), чтобы применить изменения.

Шаг 4

Далее, идём Изображение – Коррекция – Цветовой тон / Насыщенность (Image > Adjustments > Hue/Saturation). Установите значение Цветового тона (Hue) на 3, а значение Насыщенности (Saturation) на -35, или примените любые другие значения, чтобы совместить цвета пламени текстуры с цветом огненной обводки.

8. Добавляем Эффекты Огня

Шаг 1

Добавьте ещё одну текстуру Огня, расположив поверх другой области текста. Поменяйте режим наложения для данного слоя с текстурой Огня на Осветление (Screen), а также примените трансформацию при необходимости.

Чтобы продублировать коррекцию цвета, раскройте выпадающий список фильтра слоя с первой текстурой огня, далее, удерживая клавишу (Alt), зажав вкладку смарт-фильтра, перетащите на только что добавленный слой с текстурой огня.

Шаг 2

Повторите все действия, чтобы добавить столько эффектов огня к тексту, сколько необходимо.

Шаг 3

Поместите все слои с текстурой Огня в одну группу, назовите эту группу Огонь (Flames).

9. Добавляем Лёгкие Эффекты Дыма

Шаг 1

Добавьте любую текстуру Дыма, которая вам нравится в качестве смарт-объекта, а затем Поменяйте режим наложения для данного слоя с текстурой Дыма на Осветление (Screen).

Поместите текстуре Дыма поверх определённой области текста, примените трансформацию при необходимости.

Шаг 2

Нажмите клавиши (Ctrl+U) для коррекции Цветового тона / Насыщенности (Hue/Saturation). Поставьте галочку в окошке Тонирование (Colorize), а затем поменяйте значение Цветового тона (Hue) на 215, значение Насыщенности (Saturation) на 25, а значение Яркости (Lightness) на -60.

Шаг 3

Дважды щёлкните по слою Текстурой Дыма, чтобы откорректировать настройки Параметров наложения (Blending Options). На этот раз, мы собираемся настроить бегунки Подлежащего слоя (Underlying Layer) в настройках Наложение, если (Blend If).

Удерживая клавишу (Alt), потяните за правый бегунок, чтобы разделить его. По мере смещения половинки бегунка вправо, вы заметите, что текстура дыма станет лучше совмещаться с текстом и задним фоном.

То, что создаёт данный бегунок, защищает более светлые участки текстуры от воздействия текстуры Дыма.

Шаг 4

Щёлкните правой кнопкой мыши по слою Текстура Дыма и появившемся окне, выберите опцию Скопировать стили-слоя (Copy Layer Style).

Шаг 5

Добавьте эффектов дыма к тексту и к каждой добавленной текстуре дыма примените стили слоя, для этого, щёлкните по добавленному слою с текстурой дыма и в появившемся окне, выберите опцию Вклеить стиль слоя (Paste Layer Style).

Вы можете также продублировать коррекцию цвета Цветовой тон / Насыщенность (Hue/Saturation) точно таким же образом, как мы проделывали с текстурами огня.

Дважды щёлкните по вкладке Цветовой тон / Насыщенность (Hue/Saturation), которая расположена в выпадающем списке Смарт-Фильтров (Smart Filters), чтобы использовать другие значения в зависимости от текстуры, которую вы хотите добавить, а также от эффекта, который вы хотите создать.

Повторите все действия, пока вас не устроит результат.

Шаг 6

Поместите все слои с текстурой Дыма в одну группу, назовите эту группу Дым (Smoke), а также уменьшите значение Непрозрачности (Opacity) слоя с группой до (85%) или установите значение непрозрачности на своё усмотрение.

10. Добавляем Насыщенные Эффекты Дыма

Шаг 1

Далее, мы добавим эффекты дыма, чтобы усилить глубину.

Итак, добавьте ещё одну текстуру Дыма, поменяйте режим наложения для данного слоя на Светлее (Lighter Color), поместите данную текстуру поверх определённой области текста, а затем примените трансформацию при необходимости.

Шаг 2

Добавьте ещё текстур Дыма, используя тот же самый режим наложения, старайтесь уменьшить масштаб текстур, сделав немного меньше, чем лёгкие эффекты дыма.

Шаг 3

Поместите все новые слои с текстурой Дыма в одну группу, назовите эту группу Дым 02 (Smoke 02), а также уменьшите Непрозрачность (Opacity) слоя с группой до 50% или установите значение непрозрачности на своё усмотрение, в зависимости от того эффекта, который вы хотите создать.

11. Добавляем Искры

Шаг 1

Добавьте текстуру Искр 0023 поверх любой области текста, поменяйте режим наложения для данного слоя с текстурой на Линейный осветлитель (Добавить) (Linear Dodge (Add), а затем примените трансформацию при необходимости.

Шаг 2

Повторите все действия, чтобы добавить больше искр поверх всего текста.

Шаг 3

Поместите все слои с текстурой Искр в одну группу, назовите эту группу Искры (Sparks).

12. Создаём Внешнее Свечение

Шаг 1

Удерживая клавишу (Alt), перетащите слой Огненная Обводка (Stroke Flames) вниз, чтобы создать дубликат слоя, расположите дубликат слоя ниже оригинального слоя.

Шаг 2

Переименуйте дубликат слоя в Свечение (Glow), далее, щёлкните правой кнопкой мыши по данному слою и в появившемся окне, выберите опцию Преобразовать в смарт-объект (Convert to Smart Object).

Шаг 3

Далее, идём Фильтр – Размытие- Размытие по Гауссу (Filter > Blur > Gaussian Blur). Установите Радиус (Radius) размытия на 25.

Шаг 4

Поменяйте режим наложения для слоя Свечение (Glow) на Жёсткий свет (Hard Light), а также уменьшите значение Непрозрачности (Opacity) до 25%.

13. Добавляем Эффекты Дыма на Задний Фон

Шаг 1

Добавьте новую текстуру Дыма поверх всех остальных слоёв, а затем поменяйте режим наложения для данного слоя с текстурой на Осветление (Screen).

Примените масштабирование к текстуре, чтобы заполнить одну строну рабочей области.

Шаг 2

Нажмите клавиши (Ctrl+U) для коррекции Цветового тона / Насыщенности (Hue/Saturation). Поставьте галочку в окошке Тонирование (Colorize), а затем поменяйте значение Цветового тона (Hue) на 215, значение Насыщенности (Saturation) на 25, а значение Яркости (Lightness) на -83.

Не забывайте, что указанные значения были использованы в этом уроке, но вы в любой момент можете изменить их, чтобы подобрать более подходящие значения для своей работы и текстур.

Шаг 3

Далее, идём Фильтр – Размытие- Размытие по Гауссу (Filter > Blur > Gaussian Blur). Установите Радиус (Radius) размытия на 6. Основная цель здесь- это создать лёгкий эффект дымки вокруг текста.

Шаг 4

Повторите все действия, чтобы добавить ещё пару текстур дыма.

Шаг 5

Вы также можете усилить эффект за текстом.

14. Добавляем Текстуру на Зданий Фон

Шаг 1

Добавьте исходную текстуру Искры 0017 – Изображение 2 на наш рабочий документ, расположив поверх корректирующего слоя Цвет (Solid Color), а затем поменяйте режим наложения для данного слоя с текстурой искр на Линейный осветлитель (Добавить) (Linear Dodge (Add), а также уменьшите Непрозрачность (Opacity) слоя до 50%.

Трансформируйте текстуру при необходимости, чтобы заполнить задний фон.

Шаг 2

Если вы хотите избавиться от какой-либо части текстуры, нажмите значок Добавить слой-маску (Add layer mask) в нижней части панели слоёв, и не забудьте перейти на слой-маску, чтобы она стала активной для проведения коррекции.

Шаг 3

Установите цвет переднего плана на чёрный цвет, выберите инструмент Кисть (Brush Tool), установите мягкую круглую кисть, а затем прокрасьте поверх любых участков текстуры, который вы хотите скрыть.

15. Проводим Заключительную Цветовую Коррекцию

Шаг 1

В нижней части панели слоёв, нажмите значок Создать новый корректирующий слой или слой заливку (Create new fill or adjustment layer) и в появившемся меню, выберите опцию Поиск цвета (Color Lookup).

Выберите фильтр FoggyNight.3DL из выпадающего меню 3DLUT File, а затем уменьшите Непрозрачность (Opacity) данного корректирующего слоя до 10%.

Шаг 2

Перейдите на слой Текстура Огня (Flame Texture), а затем идём Фильтр – Размытие- Размытие по Гауссу (Filter > Blur > Gaussian Blur). Установите Радиус (Radius) размытия на 3, чтобы текстура не была слишком жёсткой.

Поздравляю вас! Мы завершили урок!

В этом уроке мы создали рабочий контур вокруг текста, а затем создали обводку из огня с помощью фильтра Пламя (Flame filter). Далее, мы добавили эффекты огня, дыма и искр, чтобы создать огненный эффект. Мы также использовали параметры наложения, коррекции, чтобы лучше совместить все элементы вместе. В заключение, мы добавили эффекты на задний фон и применили заключительные штрихи, чтобы создать заключительный результат.

Пожалуйста, не стесняйтесь оставлять свои комментарии, предложения, а также выкладывать свои работы.

Драматический эффект огненного текста в Photoshop

В Photoshop особенно тяжело изобразить пламя, но в этом уроке я покажу вам, как с помощью фотографии огня сделать соответствующий огненный текст. Мы отобразим это на красивом темном фоне с роскошным текстовым эффектом для законченного вида нашего изображения.

Это вторая из серии 5 статей на тему типографики в Photoshop. Если вы пропустили одну из них на прошлой неделе, перейдите на Create a Spectacular Grass Text Effect.

Часть 1. Фон.

Итак, создайте новый документ в Photoshop шириной 1920px и высотой 1200px. С помощью инструмента заливка градиентом, Gradient Tool (G), нарисуйте радиальный коричневый градиент (цвета от #5c3d09 до #1f1409), чтобы у вас получилось следующее:

Обратите внимание, что градиент не выровнен вертикально по центру, а находится немножко выше. Мы хотим, чтоб на нашем изображении верхняя часть текста было в пламени огня, потому верхняя часть изображения должна быть немножко светлее.

Шаг 2

Как и в статье о травяном тексте, у нас будет текстурированный фон. Но, вместо того, чтобы всё делать с нуля, я просто скопировал фон с предыдущего урока, объединил все слои, убрал насыщенность и у меня получилось то, что вы можете видеть ниже.

Если вам нужно всё делать с нуля, сначала перейдите на Bittbox, чтобы иметь оригинальные бумажные текстуры, а потом выполните шаги из предыдущего урока.

Шаг 3

Теперь мы установили режим наложения слоя на Overlay, чтобы соединить текстуру с фоном и — вуаля!

Шаг 4

И всё-таки, чтобы сделать текстуру ещё более выразительной, давайте перейдем в фильтр Texturizer. Для этого, создайте новый слой и залейте его коричневым/бежевым цветом — #66500f. Далее, перейдите в Filter > Texture > Texturizer и используйте текстуру Canvas, 80% для параметра Scaling, а Relief установите на 4.

Шаг 5

Когда у вас есть готовый слой текстуры, установите его режим наложения на Overlay. Это даёт нам дополнительные красивые детали для нашей текстуры, которая весьма хорошо выглядит, поскольку мы работаем на таком большом полотне.

Шаг 6

Далее, мы немножко снизим насыщенность нижней половина нашего изображения. Это для того, чтобы верхняя часть, где будет огонь, выглядела как будто с тёплым сиянием, в то время как нижняя часть — более холодной.

Потому создайте новый слой и выполните его заливку цветом #4b4f3b. Далее, добавьте к градиенту маску слоя, чтобы скрыть верхнюю часть (ваш эффект должен быть похож на приведенный ниже).

Теперь установите режим наложения слоя на Color а непрозрачность, Opacity, на 45% .

Часть 2. Текст+Сияние= Невероятное.

Хорошо, теперь у нас есть красивый фон! Давайте добавим текст. Я использовал шрифт Trajan, потому что он выглядит действительно драматично. В моём случае я использовал цвет текста #cb9328, потом установил режим наложения на Linear Dodge (Add) и непрозрачность, Opacity, на 8%.

Мы собираемся придать нашему тексту вид, как-будто його верхняя половина выходит из фона, имеет красный горячий цвет и окутана мерцающим пламенем. Это значит, что мы будем применять множество эффектов и масок к ним, чтобы видна была только верхняя часть, в то время как нижняя — плавно переходит в текст, который мы имеем в настоящий момент.

Шаг 8

Итак, сначала создайте новую группу слоев, куда мы будем помещать все наши текстовые слои, поскольку их будет много.

Далее, сделать дубликат слоя с текстом и задайте його цвет — #5e3f1c.

Шаг 9

Теперь установите режим наложения более нового текстового слоя на Overlay и непрозрачность, Opacity, на 70%. Текст должен выглядеть красноватым (как показано ниже).

Шаг 10

Опять сделайте дубликат текста и установите желтоватый цвет, #cb9328, для последнего дубликата. Установите режим наложения на Linear Dodge (Add), а непрозрачность на 30%.

Далее, мы добавим маску слоя и нарисуем градиент, чтобы последний слой текста «исчезал» как показано ниже, а под ним вы могли видеть комбинацию двух нижних текстовых слоев красноватого цвета.

Шаг 11

Далее мы продублируем текстовый слой ещё раз, но разместим його в самом низу. Цвет текста — черный, #000000. Или перейдите в Filter > Blur > Gaussian Blur. Вас попросят растрировать текст, нажмите да (yes), затем укажите радиус размытия, Radius, примерно около 4px.

Далее, удерживая клавишу Ctrl, кликните на любом другом слое текста и перейдите на чёрный слой, нажмите delete, чтобы у вас осталось только что-то похожее на тень. Затем сделайте дубликат этого слоя и объедините его с первым слоем, чтобы усилить эффект. У вас должно получиться что-то похожее на результат, показанный на скриншоте ниже.

Шаг 12

Ещё раз добавьте маску слоя, чтобы тень быстро исчезала, как показано ниже. Это создаст вид, как будто текст выходит из страницы.

Шаг 13

Теперь ещё раз сделайте дубликат нашего черного слоя и с помощью инструмента Smudge Tool (R) и довольно большой мягкой кисти, «запачкайте» тень вокруг, чтобы это выглядело как следы от огня.

Шаг 14

Вот, как теперь выглядит наш текст. Я, собственно, создал два комплекта «следов» от огня, а потом четыре комплекта слоев теней, каждый из которых немножко более размыт, чем предыдущий и более исчезает.

Шаг 15

Теперь пришло время сделать верхнюю светящуюся часть текста. Прежде всего, ещё раз сделайте дубликат текстового слоя, разместите его над всеми слоями, и примените к нему жёлтый цвет — #dc9a08.

Далее перейдите в Filter > Blur > Gaussian Blur, укажите радиус, Radius: 8px. Теперь выберите большую мягкую кисточку ластика и вытрите части внизу, чтобы создать неровный вид.

Шаг 16

Задайте режим наложения для первого слоя свечения на Soft Light. Возможно, вам захочется повторить эти шаги, больше поработать ластиком, чтобы верхние части ещё больше сияли.

Шаг 17

Теперь ещё раз сделайте дубликат текстового слоя и разместите его выше всех остальных слоёв. Последний также должен быть желтого цвета (#dc9a08).

Далее перейдите в Layer > Rasterize > Type и превратите текст в плоскую графику. Далее, удерживая клавишу Ctrl, кликните на слое и перейдите в Select > Modify > Contract, используйте значение 1px. Далее, нажмите Delete, чтобы удалить всё, кроме этого контура в 1px.

Шаг 18

Теперь укажите режим наложения для слоя контура Overlay. У вас должно получиться что-то вроде изображения, приведённого ниже.

Шаг 19

Теперь примените к слою контура в 1px маску, чтобы сделать эффект исчезновения сверху вниз, как мы делали это с другими слоями.

Затем продублируйте слой и перейдите в Filter > Blur > Gaussian Blur, указав значение 1px. Продублируйте этот слой ещё раз и примените размытие на 2px. Сделайте дубликат слоя ещё раз и укажите размытие 4рх.

Затем, удерживая клавишу Ctrl, кликните на любом текстовом слове, нажмите Ctrl+Shift+I, чтобы выполнить инверсию выделения, и, пройдясь по каждому слое сияния, нажимайте Delete, чтобы удалить любое размытие, которое осталось за границами слоя.

Суть этого в том, что мы хотим, чтобы края текста были горячего красного цвета, переходящего в общее сияние текста.

Шаг 20

Далее, мы дублируем все четыре слоя сияния и объединяем их вместе. В результате у нас будет слой оригинального ярко-жёлтого цвета над всеми остальными слоями.

Выберите инструмент Smudge Tool и поводите по тексту по направлению вверх, создавая эффект горячих волн, исходящих из текста, как показано ниже.

Шаг 21

Теперь установите режим наложения для этого последнего слоя на Overlay. У вас должно получиться следующее:

Шаг 22

Мы почти закончили наш текст. Я еще раз прошелся по слоям и сделал дубликаты некоторых из слоев сияния, чтобы создать еще более огненный вид. Свободно экспериментируйте, делая то же самое, чтобы получить реалистичное горячее красноватое сияние.

Шаг 23

Далее, учитывая мои последние обои, я добавил цитату под основным текстом. Это послужит красивым украшением для страницы. Попробуйте использовать цвета, которые будут хорошо сочетаться с фоном и текстовым слоем, которые не слишком выделяются, так как мы действительно хотим, чтобы этот элемент оставался второстепенным по отношению к основному тексту. В качестве шрифта я использовал Swiss Light Condensed и подготовил его, как и в предыдущем уроке о травяном тексте.

Часть 3. Пламя.

Наконец, когда мы завершили подготовительные работы, пришло время добавить сам огонь! Для этого нам нужны несколько изображений огня на чистом чёрном фоне. Трудно найти хорошие фото и лично я не смог найти действительно хорошую бесплатную фотографию. Потому в конце концов я использовал вот это изображение от Fotolia, которые вы можете приобрести, перейдя по ссылке ниже. Также было неплохое фото от Flickr, на которые я также вам дам ссылку, и с которым я завершил работу для буквы «E». Возможно, вы также захотите приобрести эту фотографию.

Техника копирования и наложения огня на самом деле очень простая. В действительности, я только недавно изучил эту технику, когда прочитал одну из статей Nik Ainley для журнала DigitalArts, которая называется Create Amazing Photomontages, где он использовал этот приём с водой.

Вот, что вам нужно сделать:

1. Откройте изображение огня в Photoshop.
2. Перейдите на вкладку каналов, Channels, и найдите канал с наиболее высоким контрастом. Для изображений с огнём это должен быть красный канал, Red Channel, и нажмите на нём.
3. Это сделает ваше изображение чёрно-белым и, поскольку мы находимся на слое с наиболее высоким контрастом, белый цвет будет казаться очень ярким. Теперь, удерживая Ctrl, нажмите на этот канал. Будут выделены все пиксели в этом канале.
4. Нажмите на канале RGB и скопируйте выделенные пиксели.
5. Теперь вы можете вставить пламя в ваш основной документ!

Это на самом деле очень, очень полезная техника для копирования чего-то полупрозрачного из однотонного фона, каким, например, является огонь. И, как вы увидите, просмотрев статьи Ника, это также прекрасная техника для копирования воды!

Шаг 25

Отлично, здесь мы вставили пламя огня на наше основное полотно. (Для ясности: я временно выключил видимость текстовых слоев). Как видите, мы получили пламя без черного фона и местами огонь прозрачный, что значит он будет выглядеть просто фантастически на нашем тексте.

Шаг 26

Следующее, что нам нужно сделать, это разделить наш один фрагмент огня на несколько частей. Просто продублируйте слой и выключить его видимость. Он будет как резервная копия. Затем с помощью инструмента перо, Pen Tool, разделите огонь по его контурам, чтобы он выглядел естественно. Здесь вы можете видеть, что я сделал 4 фрагмента огня из одного изображения. Вы также можете попробовать вращать их, чтобы они смотрелись более хаотично.

Установите режим наложения этих слоев на Screen, чтобы окончательно избавиться от любых оставшихся черных участков, а огонь казался ещё более прозрачным.

Шаг 27

Теперь, поскольку мой текст — это всего четыре буквы, мне нужно четыре отдельных языка пламени. Для четвертого фрагмента огня (для верхней части буквы Е) я выбрал фото от Flickr и проделал над ним те же шаги, что и для создания огня ранее. Я также немного сдавил фрагмент огня для этой буквы І, чтобы он выглядел более хаотично.

Шаг 28

На самом деле, применение эффекта огня настолько же легкое, как и передвижением языков пламени по тексту. Возможно, вы захотите попробовать сделать так, чтобы огонь соответствовал форме буквы, чтобы казалось, что пламя выходит из них.

Шаг 29

Здесь я разместил все четыре фрагмента огня на верхней части текста. Неплохо, но вы видите, что буквы I и R имеют одинаковый огонь, а также все языки пламени не очень большие.

Шаг 30

Потому здесь я пройдусь по каждому фрагменту огня и с помощью инструмента свободной трансформации, Transform Tool, вытяну их по вертикали. Также я разумно попользовался ластиком, чтобы сделать огонь над буквой I более уникальным.

Шаг 31

Чтобы сделать огонь ещё более светящимся, продублируйте каждый слой пламени и перейдите в Filters > Blur > Gaussian Blur, радиус, Radius: 3px, и установите непрозрачность на 15%, чтобы придать некоторое сияние по краям языков огня.

Шаг 32

Почти закончили! Вот, как выглядит композиция.

Шаг 33

Добавим последний штрих. Создайте новый слой над всеми остальными и нарисуйте радиальный чёрно-белый градиент как показано ниже. Установите режим наложения на Overlay, а непрозрачность на 40%.

Работу закончено!

И вот у нас есть текст с эффектом огня! В следующей статье из этой серии мы будем создавать воздушное изображение, впрочем это будет через 2, а не через одну неделю, поскольку несколько дней я буду отдыхать от работы.

Если вы заинтересовались созданием огня в Photoshop с нуля, вам вероятно понравится вот эта классическая статья, в которой по совпадению используется точно такое же начертание текста. Она написана для Photoshop 6 и я до сих пор помню, как читал ее полдесятилетия назад, но она до сих пор очень актуальна, даже несмотря на то, что скриншоты имеют хороший ретро интерфейс Мас.