Эффект изображения в огне

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

дополнительные материалы к урокам демо версия урока

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

Начальное изображение Вы можете скачать из «Исходников».

1. Первое, что мы сделаем – это откроем наше исходное изображение в программе Adobe Photoshop и разблокируем слой с изображением.

Теперь нам нужно взять инструмент «Перо» (P) и с его помощью аккуратно обвести наш автомобиль по контуру.

После этого, при помощи сочетания клавиш Ctrl + Enter образуем выделение.

образуем выделение в Photoshop

Теперь нажмите сочетание клавиш Ctrl+Shift+I для того, чтобы инвертировать выделение. В итоге выделенным станет весь фон, на котором располагается машина.

Пойдем в меню Edit – Fill. В открывшемся окне в пункте «Contents» выберите «Color», после чего выберите черный цвет и нажмите «Ок».

закрашиваем фон черным цветом

После этого, Вы должны увидеть, что машина осталась на черном фоне.

машина на черном фоне

Теперь можете снять выделение сочетанием клавиш Ctrl+D.

2. Следующим этапом создания огненного изображение будет задание некоторых стилей нашему слою.

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

задаем стиль градиента для слоя

3. Для продолжения работы нам потребуются специальные кисти. Это кисти с эффектом дыма. Скачать эти кисти Вы можете по следующей ссылке.

После того как скачаете архив с кистями, разархивируйте его. Теперь перейдите обратно в Photoshop, выберите инструмент «Кисть» (B). В меню настроек кисти выберите «Load Brushes…» и после этого в появившемся окне выберите файл со скачанными кистями.

загружаем кисти дыма в Photoshop

После этого в палитре кистей появятся новые кисти с эффектом дыма.

4. Создайте новый слой выше нашего основного слоя. Выберите в панели инструментов черный цвет для «Foreground color».

Теперь выберите одну из новых кистей с эффектом дыма и на новом слое (примерно в середине изображения автомобиля) поставьте отпечаток этой кистью.

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

Добавьте стиль «Outer Glow» с такими же настройками, как Вы видите на скриншоте ниже.

добавляем эффект outer glow для слоя с отпечатком кисти

Сейчас этот эффект выглядит немного странно, но скоро мы это исправим.

5. Пойдите в меню Layer – New Fill Layer - Gradient. В появившемся окне «Gradient Fill» выберите такой же градиент и такие же настройки, как Вы видите на скриншоте ниже.

создаем слой с градиентной заливкой

После нажмите «Ок».

Убедитесь, что Ваш новый слой с градиентом активен, пойдите в меню Layer – Create Clipping Mask (или нажмите сочетание клавиш Alt + Ctrl + G).

создаем из градиентного слоя clipping mask

6. Выберите инструмент «Ластик» (E). Жесткость установите на 0%, размер я взяла равный 600px.

Теперь при помощи ластика сотрите слишком яркие части, стоя на слое с отпечатком кисти. Постарайтесь добиться, чтобы эффект пламени смотрелся более реалистично. При необходимости используйте «Свободную Трансформацию» (Ctrl + T), чтобы как-то деформировать Ваше пламя.

делаем эффект пламени реалистичным

7. Выделите оба слоя: с отпечатком кисти и градиентный слой «clipping mask» и продублируйте их.

Сделайте активным продублированный слой с отпечатком кисти, нажмите сочетание клавиш Ctrl + A для того, чтобы выделить содержимое слоя и нажмите Del, чтобы удалить отпечаток кисти с продублированного слоя.

Теперь выберите какую-то другую кисть с эффектом дыма и примените ее к этому слою.

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

создаем новый язык пламени для изображения

Проделайте процедуру шага 7 еще несколько раз, пока не покроете пламенем изображение машины так, чтобы Вас это устраивало.

покрываем огнем все изображение

8. Давайте сделаем пламенные светящиеся следы из-под колес машины.

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

Возьмите овальную мягкую кисть диаметром около 5 px. С зажатой клавишей Shift (для того, чтобы линия получилась идеально прямой) проведите линию.

Теперь при помощи «Свободной трансформации» (Ctrl + T) наклоните линию под нужным углом и поставьте ее под колеса машины (также Вы можете расширить или сжать линию до необходимой толщины).

Возьмите «Ластик» (E) и с его помощью сотрите ненужные места, которые накладываются на сами колеса автомобиля. Сделайте так, чтобы казалось, что след выходит из-под колес, но не накладывается на него.

Таким же образом создайте еще один след из-под другого колеса.

создаем пламенные следы из-под колес

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

Теперь Вы можете посмотреть на Ваше изображение, подкорректировать слои с пламенем. Возможно, где-то Вы захотите стереть какую-то часть или немного деформировать.

Подправьте все детали и добейтесь лучшего эффекта.

Наше изображение в огне готово!

эффект изображения в огне

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

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

Также Вы можете поделиться этим уроком со своими друзьями при помощи кнопок социальных сетей.

С Вами на связи была Анна Котельникова. До встречи в следующих публикациях (чтобы их не пропустить подписывайтесь на обновление блога).

Успехов Вам и Неиссякаемого Вдохновения!

5 способов скругления углов в css3, дающие разные результаты

Как удачно организовать FAQ-раздел на сайте

Веб-дизайн в стиле: «Сшитая веб-страница»

Понравилась статья? Поделись с друзьями!


Не нашли того, что искали? Воспользуйтесь расширенным поиском!

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail:


Комментарии к этой статье:

Добавить Комментарий:


Введите сумму чисел с картинки:

Почему стоит подписаться на обновления блога

Будьте в курсе новых публикаций на Блоге!

rss podpiska

Введите Ваш E-mail: