Фотошоп уроки Создание анимированного баннера в Фотошоп

Создание анимированного баннера в Фотошоп

20

Чтобы привлечь пользователей с других ресурсов нам нужно создать собственный баннер в программе Photoshop. Этим мы и займемся в сегодняшнем уроке.

728x90_1

Приступим к  первой части создания баннера – его визуальному оформлению.

Создаем документ с размерами 728х90 пикселей, либо любым другим стандартным размером.

Берем инструмент Horizontal Type Tool и пишем название своего сайта, либо рекламный слоган.

Теперь настраиваем стиль текста и рамку вокруг баннера.

Затем добавляем фон страницы и отдельные элементы: кнопки, надписи и т.д.

После того, как вы закончили с подготовкой слоев, приступаем непосредственно к самой части создания анимации.

728x90

Запускаем панель, нажав на панели управления Window-Animation.

Должно появиться окно, которое изображено на рисунке ниже.

animation-panel

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

Далее разбираем, как она работает.

Слева на панели вы видите слои, которые только что создали, а справа временную шкалу с указанием времени.

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

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

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

frames

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

После выполнения трансформации над слоями, нам нужно сохранить баннер в формат GIF.

Нажимаем Alt+Shift+Ctrl+S и выбираем значения ширины, высоты, количества цветов и другие параметры баннера.

Жмем кнопку OK.

Получился следующий результат:

468x60