Анимированный юзербар в котором падает снег

Урок по созданию анимированного юзербара на котором падает снег.

В этом уроке мы рассмотрим, как создать анимированный юзербар на котором будет падать снег. В данном уроке будет использоваться Фотошоп С5 / Photoshop CS5.

Для создания анимированного юзербара нам потребуется любая картинка с персонажем.

Анимированный юзербар в котором падает снег

Создаем новый документ (Ctrl + N), размером 350х40px и переносим туда картинку.

Пишем любое слово, любым шрифтом.

Теперь перейдем к созданию снега.

Создаем еще один новый документ размером 350х160px. Фоновый слой заливаем черным цветом и создаем новый слой. Затем переименовываем его в «снег»

Анимированный юзербар в котором падает снег

Теперь выбираем кисть белого цвета мягкой формы и с динамикой рассеивания. Можно выбрать любую кисть для снега, пусть то мягкие кружочки или снежинки… главное, что бы они были разного размера.

Я использовала кисть Char_Paint_Splatter hfpvthjv 50px, которую можно скачать тут.

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

Анимированный юзербар в котором падает снег

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

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

Запускаем панель анимации Window -> Animation (Окно>Анимация). Выставляем для первого кадра – время 0,1сек. Затем создаем еще один кадр.

Анимированный юзербар в котором падает снег

Теперь передвигаем слой со снегом вниз, аккуратно с помощью клавиши вниз на клавиатуре.

На рисунке показано, как будет располагаться слой со снегом за пределами юзербара.

Теперь нажимаем на кнопку создания промежуточных кадров. И выставляем количество кадров – 20.

Анимированный юзербар в котором падает снег

И сохраняем!

Заходим File /Save for Web….( Файл/ сохранить для Web…) (Alt+Shft+Cntr+S).

И в параметрах выставляем Gif