Photoshop-help.ru » Уроки фотошоп » Анимация » Создание анимированных баннеров в Photoshop CS5

Создание анимированных баннеров в Photoshop CS5

Вот так выглядит баннер, который вы будете создавать.

Анимированные Gif-файлы никогда не пользовались достаточной популярностью и были мишенью множества шуток в дизайнерских сообществах. Это происходило потому, что анимационные картинки были не очень хорошего качества и изрядно отвлекали пользователя от контента страницы. Однако при правильном размещении, анимация может привлечь интерес к определённой области страницы. Сегодня мы покажем, как используя возможности Photoshop CS5, можно легко создать анимированный GIF. Давайте начнем!

Шаг 1

Создайте новый документ размером в 250 х 250 пикселей и установить разрешение в 70 пикселей, цвет фона измените на # f2f2f2.

Шаг 2

Поместите логотип в центральной верхней части холста.

Шаг 3

Напишите слоган под логотипом.

Шаг 4

Нарисуйте прямоугольник и залейте его цветом # 90909.

Откройте диалоговое окно Стиль слоя (layer styles)и выберите Тень (Drop shadow). Уменьшите Расстояние и Размер до 2 пикселей.

Далее добавьте Наложение градиента (Gradient Overlay) и установите Режим наложения на Умножение (Multiply) с Непрозрачностью в 28%.

Теперь добавьте Обводку (Stroke) и уменьшитt размер на 1 пиксель. Установите цвет # a31b1b.

Шаг 5

Добавьте несколько слоёв с текстом. В нашем случае мы добавили следующий текст: Tutorials, Articles, Tips, Freebies, Basix, Videos, Premuim, как показано на рисунке.

Растрируйте текстовые слои и создайте маску отсечения.

Шаг 6

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

Шаг 7

Чуть ниже картинки добавьте какой-нибудь текст.

Шаг 8

Создайте овальную область и залейте её цветом # fdfcfc.

Откройте диалоговое окно Стиль слоя (layer styles)и выберите Тень (Drop shadow). Уменьшите Расстояние и Размер до 1 пикселей.

Далее добавьте Внутреннее свечение (Inner Glow), здесь оставьте все как есть.

Далее добавьте Наложение градиента (Gradient Overlay) и установите Непрозрачность в 6%.

Шаг 9

Теперь, когда вы закончили создание всех слоев, можно приступать к работе над анимацией. Во-первых, откройте панель анимации Окно> Анимация (Window> Animation). Я буду использовать анимацию по временной шкале (а не покадровую анимацию).

Примечание: Эта функция доступна только в Photoshop Extended.

Теперь делаем все слои видимыми, но уменьшаем их Непрозрачность до 0%.

Шаг 10

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

Шаг 11

Ваша шкала должна быть похожа на приведенный ниже пример.

Шаг 12

Мы завершили нашу анимацию. Нажмите кнопку Выполнить, чтобы увидеть ваш результат. Вы можете изменить его в случае необходимости. Чтобы сохранить баннер, перейдите в меню Файл> Сохранить для Web и устройств. Затем используйте настройки из следующего изображения и нажмите кнопку Сохранить.