Простая анимация снега

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

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

Как же создать анимацию снега в программе Фотошоп? Способов существует немало, и сегодня хочу представить самый, на мой взгляд, простой из них. Снег у нас будет падать сверху вниз, а рисовать его мы будем  белой кистью. Хотелось бы рассмотреть два различных способа рисования инструментом Кисть, а заодно и познакомиться с некоторыми её настройками.

Открываем выбранное изображение в программе Фотошоп. Лучше, если файл с изображением не будет слишком большим, тогда не возникнет задержек при сохранении анимированного файла в формате GIF.

выбираем картинку для создания анимации снега

Создать новый слойТеперь создаём новый слой, нажав в палитре Слои (Layers) соответствующую кнопку  Новый слой (New Layer). На нём будем рисовать снег. Для этого выбираем на палитре Инструменты Кисть (Brush Tool) (или нажимаем клавишу B). Далее выберем основной цвет — белый. Чтобы сделать это быстро, достаточно нажать клавишу D — Установить цвета по умолчанию (Set Colors to Default), т.е. основной — чёрный, фоновый — белый (или нажать пиктограмму «цвета по умолчанию» на палитре Инструменты). Далее нажать X — поменять цвета местами, т.е. основным будет белый. Эту же функцию выполняет стрелочка над окошком основного/фонового цветов.поменять местами основной и фоновый цвет в Фотошоп

На панели параметров выбираем настройки кисти: размер 30 пикс, жесткость 60%, и произвольно ставим отпечатки круглой кисти по всему слою, не слишком густо. рисуем снег для анимации в Фотошоп

Чтобы снег выглядел натурально, сделаем отпечатки разных размеров. Уменьшаю кисть: размер 14 пикс, жесткость 35%, и снова рисую снежинки. рисуем снег для создания анимации в Фотошоп

Затем уменьшаю кисть до 6 пикс и продолжаю рисовать. Мне хотелось добавить фигурных снежинок, поэтому в выпадающем списке загруженных кистей выбираю кисть в форме снежинки, размером 20 пикс.

Кисть снежинка для создания анимации снега в Фотошоп

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

Анимация снега в ФотошопДобившись желаемого внешнего вида снега, делаем копию слоя со снегом: перетягиваем в палитре Слои (Layers) наш слой на значок   Нового слоя. Теперь у нас три слоя: наша картинка (фон) и два одинаковых слоя со снегом, назову их Снег 1 и Снег 2.

Находясь на слое Снег 2, инструментом Перемещение (Move) (можно выбрать клавишей V) кликаем в самом низу слоя и, удерживая кнопку мыши нажатой, тянем слой вверх, до тех пор, пока нижняя его граница не будет лишь слегка видна в верхней части изображения. Команда Просмотр => Показать => Границу слоя (Viewing => To show => Layer border) выделит границы передвинутого слоя (не обязательно проделывать это),  и мы увидим их четко:

Создание анимации снега

Теперь объединяем слои со снегом, нажав Ctrl + E.

Переходим к волшебству, заставим снег двигаться!

Окно => Анимация (или Шкала времени), при этом в нижней части экрана появится окно анимации.

Окно анимации

Кадр 1 анимации  снега в ФотошопВыбираем Создать анимацию кадра, при этом наше изображение отразится на шкале в качестве кадра 1.   Копируем кадр 1 (он выделен синим): нажмем кнопку Создать копию кадра в окне анимации:

создаем копию кадра анимации

На втором кадре нужно переместить слой со снегом (объединенный) инструментом Перемещение (Move) вниз, так, чтобы верхняя его граница совпала с верхней границей нашего изображения.

Для создания анимации снега в Фотошоп перетяните слой со снегом вниз

Теперь у нас есть два основных кадра с разной конфигурацией снега. Остальное программа сделает сама: создаст промежуточные кадры анимации. Выделяем оба кадра, удерживая Shift, и нажимаем кнопку Создание промежуточных кадров (Tweens animation frames):

Создание промежуточных кадров в анимации

и в открывшемся окне проставляем следующие значения:

Настройка промежуточных кадров анимации снега

(Tween With: Selection;    Frames to Add: 20;   Layers: All Layers;    Parameters: в каждом окошке должна стоять галочка)

Промежуточные кадры в анимации снега созданы

И  у нас уже 22 кадра. Чтобы анимация воспроизводилась без остановок, последний кадр удаляем, нажав на значок корзины. Теперь выделен синим 21-й кадр. Удерживая Shift, кликаем по кадру 1, тем самым выделяя все кадры, и открываем окно длительности анимации. Сейчас она равна 0 сек (видим на скриншоте), нажмем на треугольник и выберем 0,1 сек,  количество повторов внизу слева выбираем Постоянно. Готово, можем просмотреть, как будет воспроизводиться наш снегопад, нажав кнопку Воспроизведение.

Осталось лишь сохранить наш файл. Идем в Файл (File) => Сохранить для Web (Save for Web) (или комбинация клавиш Alt+Shft+Ctrl+S) и выбираем формат файла GIF, максимальное количество цветов 256Сохранение файла GIF

Получаем чудесную новогоднюю анимацию:

Анимация снега в Фотошоп

Итак, в первом варианте мы вручную рисовали каждую снежинку при помощи отпечатка кисти. Но можно настроить Кисть (Brush Tool) таким образом, чтобы смена размера отпечатков и их рассеивание происходило автоматически. Для этого активируем Кисть (B), основной цвет выбираем белый (см. выше) и нажимаем кнопку Палитра Кисти (Brushes panel)  на Панели параметров (или же клавишу F5; повторное нажатие клавишы закрывает палитру кисти).

В первой вкладке Форма отпечатка кисти (Brush Tip Shape) ставим интервал между отпечатками  75%:

Палитра Кисти при создании анимации снега в Фотошоп

Размер (кегль) я ставлю 10 пикс, непрозрачность  (opacity) — 50%, это для небольшого файла размером 400х300 пикс. Выбираем эти параметры произвольно.

Перехожу на вкладку Динамика формы (Shape Dynamics), кликнув по самому названию, а не просто поставив галочку в окошке:

Динамика формы отпечатка кисти в Фотошоп

и ставлю колебание размера (Size Jitter) 70%. Следующая вкладка — Рассеивание (Scattering):Настройка кисти рассеивание для создания анимации снега

рассеивание (Scattering) — 1000%, колебание счетчика (Count Jitter) — 50%.

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

Продолжаю равномерно покрывать снегом картинку, проводя кистью мазки, а не ставя единичные отпечатки. Затем действия точно такие же, как описано выше: копирую слой со снегом и перетягиваю максимально вверх. В моем случае на границе слоя видны половинчатые «снежинки», это явно испортит дело, убираю их Ластиком (Eraser Tool), клавиша Е.

Коррекция слоя со снегом для создания анимации снега в Фотошоп

Доводим дело до финиша, следуя инструкции. Полученный результат:

Анимация снега

Со Старым Новым годом вас! )))

Успешной работы!

17 комментарий на «Простая анимация снега»

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

    • Здорово. Красивая идея. «На севере диком…» ой, нет, не то)))
      Все получится, стоит только захотеть.

  2. Красота! Умеют же люди.:) Один раз попробовала эту программу и показалось что так сложно. Даже программу фотошопа удалила из компьютера. Наверное не мое :) или не готова еще . Спасибо!

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

    • Да, видеоредактор — как шляпа фокусника, много отличных эффектов легким движением руки! Это здорово, как говорится, до чего техника дошла: можно реализовать творческую идею, не затрачивая много времени на техническую часть. Я очень хочу научиться качественно оформлять и редактировать видео.

  3. Я уже давно делаю видосы в редакторе. Научилась многоуровневые делать,чтоб одно в одном.
    А фотошоп нифига(.
    А еще я не разбираюсь в разных терминах. Зачем они мне, если подумать, главно, понимать, что делать.

  4. Всё доходчиво и предельно просто!

    Спасибо Вам, Эмилия !

    Однако, у меня обоазовалась проблема: всё сделал, — когда включаю просмотр — всё работает и движется. Но когда пытаюсь сохранить, выскакивает табличка, что в фотошопе совершена ошибка и программа слетает с компа! Пытался пять раз — результат тот же.

    Может быть, подскажите что-то ?

    • Такое случается, когда на диске С остается мало памяти для сохранений программы. Ведь, если даже Adobe Photoshop установлен на другом диске, для адекватной работы программы требуется 1,5-2 Гб свободного места на диске С. Поэтому непременно очистите диск С от ненужных программ, временных файлов интернета. Установлен ли у Вас какой-либо «чистильщик» типа CCleaner, Advanced SystemCare и пр. (это бесплатные программы)? Тогда стоит ими воспользоваться. В самом Adobe Photoshop также можно подкорректировать настройки, чтобы он занимал меньше памяти компьютера. 1) Уменьшить число сохраняемых действий в палитре История: Редактирование-Установки-Производительность, История действий=10. 2) В окне «История» в правом верхнем углу открыть выпадающее меню — Параметры палитры История — снять флажок в первом окошке Автоматически создавать первый снимок (Automatically Create First Snapshot).
      Также в процессе создания анимации можно сделать не 20 промежуточных кадров, а хотя бы 10. Слегка изменится плавность движения, но не слишком заметно, зато файл при сохранении в формате gif станет весить почти в 2 раза меньше и, надеюсь, Ваш Photoshop сохранит его без возражений.
      Желаю удачи) Спасибо за отзыв!..

      • Владимир, видела Ваш второй комментарий, но он сразу почему-то пропал, возможно, удален по ошибке(. Однако прочесть я успела: Вы написали, что на С достаточно места, значит, причина в другом. Надеюсь, что все получится!

Добавить комментарий для Татьяна Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>