Новости проекта:

Программы скачать
Конкурсы
Заработать на сервер

Как сделать анимированный GIF банер

2012.12.10 07:50:05
Как сделать анимированный GIF банер
[#1]
Avatar
Сообщений: 1547
21.63
Администратор

0

1 из Примеров работы банера в формате gif изготовленного в фотошопе.

Img


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

Теперь разберем вот этот банер на примере

Img


Банер имеет три этапа подачи информации.

1. Первый текстовый блок "Создать свой сайт" подразумевающий вопросительную информацию.

2. Второй текстовый блок "Может каждый" как бы ответ на него.

3. Сама информационная суть банера. То есть четко сформулированный ответ, где этому научиться))

Создадим новый документ с размерами 468х60 пикселей.

Img


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

Img


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

Теперь идем в выпадающее меню window и включаем панель Animation.

Img


Здесь отображаются такие же слои, только с возможностью развертывания каждого.

Img


В развернутом состоянии каждый слой имеет несколько параметров.

Position - отвечает за перемещение картинки находящейся на данном слое.

Opaсity - отвечает за прозрачность

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

Text wrap(если это текстовый слой) Предназначен для искривления текста.

Каждый из этих параметров, имеет свою временную дорожку, на которой можно располагать маркеры, как-бы фиксируя текущее состояние.

Метод построения анимации прост до безумия. К примеру, нам нужно, чтобы картинка двигалась слева на право. Для этого нажимаем на часы рядом с надписью Position, после чего перемещаем бегунок справа в нужную точку временной шкалы и просто тащим картинку в сторону. Программа сама добавит все нужные кадры. Вам останется всего лишь отрегулировать промежуток времени, при помощи маркеров на временной шкале. Таким же образом работает прозрачность, добавление стилей и искривление текста.

Проделайте этот шаг с анимацией исчезновения текста на первом слое "Создать свой сайт". Если Вы внимательно посмотрите на банер вверху урока, то заметите что помимо исчезновения текста там присутствует еще и засветка. Анимация засветки аналогична действиям прозрачности, но при включенном эффекте засветки outer glow в свойствах слоя. Начальный кадр - засветка с параметром = 0, а в конечном:

Img


Также, на слое есть эффект inner glow, он отвечает за внутреннюю засветку текста. Выполняемые действия идентичны. Начальный кадр - маленькое значение, конечный - большое.

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

Img


И еще один, последний слой под номером 3, на временной шкале начинает действовать, когда второй стал полностью прозрачным.

С первого раза красиво вряд ли получится, поэтому придется постараться, но все приходит с опытом.

После того как каждая из частей будет четко соответствовать своему участку времени, можете считать, что все готово. Теперь нажимаем Ctrl+Shift+Alt+S(Save for Web) и сохраняем наш баннер в формате GIF, он как Вы уже знаете, поддерживает сохранение анимации.
--------
PAYEER кошелёк на каждый день. Открыть счёт.
Открой счёт и торгуй крипто валютами - регистрация
545
Серверов всего
475
Серверов онлайн
2174
Игроков онлайн
Добавить сервер
Конкурс лучшего форумчанина
1.  Место свободно
2.  Место свободно
3.  Место свободно