Как сделать прозрачную анимацию падающего снега в фотошопе для сайта?

Привет друзья!

В канун нового года поступил заказ сделать прозрачную gif анимацию падающего снега для одного сайта

Для начала определимся с размерами картинки. Финальная картинка у нас будет размером 256x128px. Но для того чтобы нам нарисовать падающий снег нам нужна высота в 2 раза больше. Поэтому открываем фотошоп и создаем новый документ (Ctrl+N) размером 256 на 256 пикселей.

Создаём новый слой (Ctrl+Shift+N) и переходим к настройки кисти для рисования снежных хлопьев =). Задаем настройки как на рисунках ниже:

Делим наш рисунок пополам с помощью линейки (Ctrl+R) и выделяем нижнюю область с помощью инструмента выделения (M):

Рисуем снежинки на нашем холсте, используя разный размер для кисти. В данном уроки мы рассматриваем как нарисовать анимацию на прозрачном фоне, по этому мы будем использовать вместо инструмента кисть - карандаш. Для удобства, я на время использовал черный фон:

Отлично! Теперь копируем наш слой (Ctrl+J):

И сдвигаем его на вверх, затем объединим 2 верхних слоя со снегом(Ctrl+E):

В окне анимации создадим новый кадр:

В новом кадре, сдвигаем наш слой в низ:

На данном этапе можно обрезать нашу картинку до нужного размера (Ctrl+Alt+C):

Настало самое время что-нибудь нарисовать за снегом. Например название нашего дневника разработчиков =). Скрываем слой со снегом и над черным фоном мы напишем Lird.ru:

Немного приукрасим надпись добавив снега над буквами:

Затем удалим наш черный фон и в окне анимации нажмем на кнопку Tweens Animation Frames для того-чтобы добавить, к примеру, 25 кадров между начальным положением снега и конечным:

Выделим все кадры и поставим в Select Frame Delay Time (время отображения кадра) -> 0.1.

На данном этапе у нас уже должна получиться зацикленная анимация, но с небольшой задержкой в конце:

Это нам мешает последний кадр, который нужно удалить:

Все! Нажимаем Ctrl+Alt+Shift+S и выбираем сохранить как .gif

Результат: