X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Урок №1. Плавный переход с одной картинки в другую

Приклад
  • 2024-04-19
  • 12927 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

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

Плавный переход

Давайте приступим к уроку. Первое что нужно сделать, это открыть Photoshop и создать новый файл нужного Вам размера.

Создать файл

В моем случаи, это будет квадрат 500 на 500 пикселей.

Размер изображения

Далее нужно вставить две нужный Вам картинки в этот файл, между которыми будет осуществлен плавный переход. Я выбрал абстрактный фон, просто для примера. Справа в слоях у Вас появится два новых слоя.

2 новых слоя

Теперь нужно добавить слой-маску верхнему слою. Для этого выберите пункт меню - Слои - Слой-маска - Показать все.

Слой маска

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

Выбрана маска

Далее нужно выбрать в панели инструментов, инструмент - Градиент.

Инструмент градиент

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

Стиль градиента

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

Вести курсором

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

Результат до плавного перехода:

до перехода

После:

После плавного перехода

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

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 9, в среднем: 4.1 из 5