Выезжающий текст

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

Итак, я уже сделала заготовку бигбара.



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



Подготовка окончена - Пора переходить к анимации. Напоминаю, что владельцы Photoshop CS2 и ниже переходят в ImageReady (Ctrl+Shift+M), а обладатели Photoshop CS3 выбирают в меню пункт Window-Animation (Окно-Анимация). Для всех версий появится одинаковое окошко, в котором мы увидим один кадр:



Начинаем самое интересное )

Для этого первого кадра мы должны выставить движущиеся объекты в то положение, из которого они будут "выезжать". Я хочу, чтобы мой текст выезжал вообще из-за границы бигбара. При чем "цветы!" должны выехать сверху, а "моя страсть" - слева, при этом увезя с собой восклицательный знак. Теперь постараюсь как можно детальнее описать каждое свое действие.

1. Перемещаю восклицательный знак так, чтобы он оказался после слова "цветы".



2. Нажав Ctrl, я выбираю два слоя "цветы" и "!"



3. При активном инструменте Move (Перемещение) и нажатом Shift’е, кликаю 4 раза стрелку "вверх" на клавиатуре, чтобы перенести эти два слоя за границу бигбара. Shift удерживается для того, чтобы слои переносились быстрее - за один клик на 10px (см. анимацию ниже):



4. Как я уже писала, слой со словами "моя страсть" будет у меня выезжать слева. Поэтому я делаю активным этот слой и опять же: при активном инструменте Move (Перемещение) и так же нажатом Shift’е, кликаю стрелку "влево" на клавиатуре до тех пор, пока этот слой не уйдет за границу бигбара (у меня получилось 33 клика). Shift удерживается для того, чтобы слой переносился быстрее - за один клик на 10px (см. анимацию ниже):



Итак, первый кадр готов! Не удивляйтесь, но все правильно! Сейчас на нашем бигбаре вообще не видно текста!



Первая часть моей анимации состоит в том, что "приедут" два слоя "цветы" и "!". Делаем дубликат первого кадра:



Для второго кадра проделываем следующие действия:

1. Нажав Ctrl, я выбираю два слоя "цветы" и "!"



2. При активном инструменте Move (Перемещение) и так же нажатом Shift’е, кликаю 4 раза стрелку "вниз" на клавиатуре, чтобы перенести эти два слоя на их первоначальное положение:



Теперь в окне анимации, при активном втором кадре, нажимаю кнопочку Tweens:



Появляется окошко, в котором я выставляю следующие настройки:



После нажатия OK, Вы увидите, что кадров стало 12 (первый, последний и новосозданные 10 между ними). И если сейчас в панели анимации Вы нажмете play, то увидите такую анимацию:



Начало положено! Идем дальше!

Создадим дубликат последнего, двенадцатого слоя (как его сделать - описано чуть выше). Для тринадцатого кадра проводим следующие действия:

1. При активном слое "моя страсть" и инструменте Move (Перемещение), а также нажатом Shift, переносим слова "моя страсть" так, чтобы они оказались перед (!) восклицательным знаком:



2. Опять нажимаем кнопочку Tweens и выставляем следующие настройки:



Получаем уже такую анимацию:



Далее мне бы хотелось, чтобы слои "моя страсть" и "!" вместе поехали в конец бигбара и сложилась вся фраза. Для этого мы делаем дубликат 43 кадра. И для него делаем следующее:

1. Нажав Ctrl, я выбираю два слоя "моя страсть" и "!"



2. При активном инструменте Move (Перемещение) и так же нажатом Shift’е, кликаю стрелку "вправо" на клавиатуре до тех пор, пока я не увижу полноценную фразу:



3. Опять нажимаем кнопочку Tweens и выставляем следующие настройки:



Вот что получилось!



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



Еще можно назад "увезти" весть текст, но уже в другом направлении:



Все зависит от Вашей фантазии!
Надеюсь, что данный урок был для Вас полезен и понятен!
До новых встреч!