Photoshop: GIF-анимация дождя с помощью фильтров

Примерно 11 минут чтения

Главная/ Уроки PS/ Photoshop: GIF-анимация дождя с помощью фильтров

Основа анимации дождя в PS — запись операции плюс «Шкала времени». Запишите операцию, которая создаёт слой с каплями, чтобы слои размножались сами, превратите её в покадровую анимацию на шкале времени и экспортируйте GIF. Файл получается небольшим, поэтому годится и для фона страницы, и для стикера, а Online PS тоже умеет записывать операции.

1️⃣ Подготовка

  1. Откройте Online PS (zaixianps.cc).
  2. Нажмите Ctrl+O (или Файл → Открыть в левом верхнем углу), чтобы загрузить фоновое изображение, на которое пойдёт дождь.
  3. Убедитесь, что фоновое изображение — нижний слой на панели «Слои» (обычно он называется Фон; если он заблокирован, дважды щёлкните по нему, чтобы разблокировать как обычный слой).

2️⃣ Создайте операцию и запишите слой с каплями

  1. Нажмите Alt+F9, чтобы открыть панель «Операции».
  2. Нажмите Создать новый набор в правом верхнем углу панели и назовите его Default Actions 1.
  3. Внутри набора нажмите Создать новую операцию и задайте:
    • Имя: Rain
    • Набор: Default Actions 1
    • Функциональная клавиша: F2
  4. Нажмите Запись (красная точка начнёт мигать), чтобы начать запись.
  5. Запишите слой с каплями
    1. Нажмите Shift+Ctrl+N, чтобы создать новый слой, — по умолчанию он получит имя Слой 1.
    2. Выделив Слой 1, нажмите Shift+F5, чтобы открыть «Заливку», и в диалоге задайте:
      • Содержимое: Чёрный
      • Режим: Обычный
      • Непрозрачность: 100%
    3. Выберите Фильтр → Шум → Добавить шум с такими значениями:
      • Количество: 20%
      • Распределение: По Гауссу
      • Монохромный: ✅ (отмечено)
      ※ Количество шума определяет, насколько плотными и крупными будут капли: слишком много — изображение станет серым и мутным, слишком мало — движение почти не читается.
    4. Затем выберите Фильтр → Размытие → Размытие в движении с такими значениями:
      • Угол: 90° (строго вниз)
      • Смещение: 25 пикселей
    5. В списке Режим наложения слоя Слой 1 выберите Осветление. Капли теперь выглядят как прозрачные белые штрихи.
    6. Если вокруг капель появляются тёмные края или шум, нажмите Ctrl+T («Свободное трансформирование») и немного увеличьте слой, чтобы его края вышли за холст, — так нежелательный цвет скроется.
  6. Когда всё это сделано, нажмите Остановить запись внизу панели «Операции» (значок квадрата), чтобы закончить запись.

3️⃣ Пусть операция размножит слои за вас

  1. Не закрывая панель «Операции», выделите только что записанную операцию Rain.
  2. Нажмите F2 дважды. Операция выполнится два раза и создаст Слой 2 и Слой 3 — всего три слоя с каплями.
  3. На панели «Слои» теперь должно быть:
    Фон, Слой 1, Слой 2, Слой 3.

4️⃣ Соберите покадровую анимацию (GIF) на «Шкале времени»

  1. Откройте Окно → Шкала времени (Окно → Шкала времени).
  2. По умолчанию диалог предлагает Создать видеошкалу времени — нажмите внизу слева Создать покадровую анимацию (не видео).
  3. Создайте анимацию из трёх кадров
    1. Кадр 1 появляется по умолчанию. Щёлкните по подписи времени под кадром и задайте 0,1 секунды.
    2. На панели «Слои» оставьте включёнными только Фон и Слой 1, остальные выключите.
    3. Нажмите Дублировать выбранные кадры в правом нижнем углу шкалы времени, чтобы создать кадр 2.
      • Время тоже задайте 0,1 секунды.
      • Включите Фон и Слой 2, остальные скройте.
    4. Нажмите «Дублировать выбранные кадры» ещё раз, чтобы создать кадр 3.
      • Время остаётся 0,1 секунды.
      • Включите Фон и Слой 3, остальные скройте.

    Обратите внимание: в каждом кадре используется следующий слой с каплями (кадр 1 → Слой 1, кадр 2 → Слой 2, кадр 3 → Слой 3), а фоновый слой виден всё время.

  4. В Параметрах цикла в левом верхнем углу шкалы времени выберите Постоянно, чтобы GIF повторялся бесконечно.
  5. Нажмите Воспроизведение на шкале времени для предпросмотра. Если всё выглядит правильно, переходите к следующему шагу.

5️⃣ Экспорт в GIF (для веба)

  1. Используйте Alt+Shift+Ctrl+S (или меню Файл → Экспортировать как → GIF...).
  2. В открывшейся панели настроек хорошо работают такие значения:
    • Цвета: 256 (лучшее качество)
    • Размер: оставьте исходную ширину и высоту (или масштабируйте сами)
    • Цикл: Постоянно
    • Задержка кадра: 0,1 секунды (уже задана на шкале времени)
    • Прочее: оставьте отмеченной «Единую цветовую палитру»
  3. Нажмите «Сохранить» и скачайте созданный .gif-файл.

🎉 Готово!

Теперь у вас есть GIF-анимация дождя, готовая для веб-страницы, соцсетей или любого места, где нужен движущийся дождь.

Источники

  • Официальная документация Adobe Photoshop
  • HTML5 и принципы современной обработки изображений на фронтенде
  • Online PS
← Вернуться к списку уроков