ДВАДЦАТЬ ВОСЬМОЙ УРОК
Анимация для ленивых
На прошлых уроках нам пришлось изрядно попыхтеть, вырисовывая каждый кадр. Но, оказывается, существует интересная функция "Tween", которая облегчает в некоторых случаях жизнь аниматорам (это я про нас с вами) и предоставляет всю скучную работу автомату. Убивать при этом никого не нужно.
Предположим, нам нужно, чтобы какой-то предмет переместился из пункта А в пункт Б. Предположим, что этим предметом будет кораблик. И пусть он у нас плывет по морю. Возможно, у меня не очень получится красиво и в Третьяковку мои шедевры не поместят. Но то, что их увидит не одна тысяча человек - ручаюсь!
Итак, я в программе Image Ready открываю File|New и выбираю следующие настройки (рис. 125):
Рис. 125. Открытие нового файла
Обратите внимание, что я выбрала Web Banner (468x60). Да! Я сейчас сделаю банер. Как правило банеры бывают стандартных размеров: 468х60, 340х60 и 88х31. Я всегда путаюсь в этих размерах, а потому страшно благодарна Image Ready за помощь своей, увы, не крепкой памяти.
Рисую небо и море. Оно у меня будет неподвижным, спокойным и тихим. Так сказать, полный штиль. Поэтому я рисую его не добавляя новых слоев. Вот так (рис.126):
Рис. 126. Ничего особенного.
Кораблик не будет стоять на месте. А поэтому я создам новый слой и на этом новом слое нарисую кораблик. Опять все объясняю подробно. Тем более, это мне совсем не трудно (рис. 127):
Рис. 127. Создаем новый слой и на нем рисуем кораблик
Дальше уже интересней. Переходим к панели Animation, нажимаем на пиктограмму Duplicate New Frame внизу панели и видим перед собой следующую картину Неайвазовского (рис. 128):
Рис. 128. Сейчас у нас два одинаковых фрейма!
Теперь я возьму и передвину с помощью инструмента Move Tool (его можно выбрать и нажав клавишу "V") кораблик во втором фрейме к левому краю картинки, вот так:
Рис. 129. Работа во втором фрейме
Ну, а теперь совсем легко (хотя когда нам было трудно?), нажимаем треугольник-стрелочку в верхнем правом углу панели Animation и выбираем пунктик Tween, о котором я упоминала в самом начале урока (рис.130).
Рис. 130. Выбор Tween
У меня появилась следующие настройки по умолчанию (рис. 131):
Рис. 131. Настройки Tween
Я пока не буду их изменять. Просто нажму OK и получу вот что (рис. 132):
Рис. 132. Пожарный катер
Думаю, вы уже поняли, что Tween добавляет фреймы между выделенными кадрами с заданной последовательностью. Мы добавили 5 кадров для такой последовательности. В следующем примере я вернусь к первначальным установкам, как на рис. 129 и увеличу число добавленных кадров до 20, и кроме того, во втором фрейе я установлю Opacity для слоя кораблика равным 50%. Вернее, сначала установлю Opacity, а потом уж сделаю Tween. Думаю, на рисунке будет более понятно (рис. 133):
Рис. 133. Во втором фрейме делаем кораблик полупрозрачным
И вот что получилось:
Рис. 134. Вторая попытка
Как видите, кораблик плывет медленнее. Это уже не пожарный катер, а скорее прогулочный. И, кроме того, по мере своего продвижения он постепенно теряет свою прозрачность. Может, конечно, эта прозрачность тут ни к селу ни к городу, и многие будут ломать себе голову, что я хотела этим сказать... боюсь они этого никогда не узнают.
Для суперленивых
В принципе, можно сделать банер и из одного фрейма! Да! Этим мы сейчас и займемся. Открываю новый документ File|New и выбираю там половинчатый банер (рис. 135):
Рис. 135. Половинчатый банер
Выбираю на панели инструментов T - Type (его можно выбрать, нажав клавишу "Т"), и красным цветом пишу фразу www.dikarka.ru. Для тех, кто не знает, как пользоваться этим инструментом, я нарисовала цифрами, где можно выбрать разные опции (рис. 136).
Рис. 136. Для тех кто не знает
1 - выбор шрифта (у меня выбрано courier;
2 - размер шрифта (у меня - 36px);
3 - цвет шрифта (видно невооруженным глазом что красный)
4 - если вам мало этих настроек, можно еще вызвать дополнительную панель и там выбрать не только выше перечисленное, но и дополнительные настройки (например, расстояние между буквами).
Но тут существует еще одна проблема. Если вам нужно написать слова по-русски, то вы не сможете это сделать. Но есть выход их безвыходных положений! Просто нужно прыгнуть из Image Ready в Adobe Photoshop, нажав на Jump to Photoshop в нижней панели инструментов (либо просто нажав ctr+shift+M), как показано на рисунке цифрой 5
5 - прыгаем в Adobe Photoshop,
Там нас ждет наш рисунок, делаем надпись русскими буквами, тем же макаром прыгаем обратно в Image Ready, где наш ждет уже исправленная картинка, и чешем дальше. То есть делаем анимацию.
Надеюсь у вас к этому моменту уже что-то написано или нарисовано. И все это в одном фрейме! Теперь нажимаем стрелочку в верхнем правом углу панели Animation и просто выбираем Make Frames From Layers, теперь у нас стало два фрейма. Затем опять нажимаем ту же стрелочку и выбираем Tween со следующими опциями (рис. 137):
Рис. 137. Выбор опций
Осталось сохранить нашу анимацию File Optimized As и любоваться на свое творение (рис. 138):
Рис. 138. Добро пожаловать!
Подытоживая всю информацию по предыдущим урокам, посвященную программе Image Ready, я понимаю, что не смогла все рассказать об этой программе. В принципе, я вообще не собиралась ее касаться, потому как раньше в ней не работала, а потому опыта почти никакого. Все, что я вам объяснила можно сделать спокойно в программе Flash, а уж там я чувствую себя как рыба в воде. Да и сделать с Image Ready сложную анимацию довольно хлопотное дело. Но для несложных банеров вполне достаточно.
Вы можете совмещать в одной анимации все предложенные способы, создавать сколько угодных слоев, применять к слоям любые действия, стили и фильтры. Во многом она похожа на Adobe Photoshop, так что не должно у вас вызвать какиех-то трудностей. Возможно, я еще вернусь к этой программе, а возможно и нет. Я и так застряла в ней на несколько уроков, хотя намеревалась ограничиться одним. Самое обидное, что когда только начинаешь разбираться, так и хочется заниматься только этим. Но я не могу себе этого позволить.
Так что, когда вам надоест заниматься Image Ready, приходите на следующий урок. А я уже буду вас там поджидать с Картами Изображений.
Ну, а еще, могу предложить замечательный сайт - коллеги по ремеслу - Понятные уроки Фотошоп на globator.com, где научат вас делать не только баннеры, но и другие замечательные вещи с помощью замечательных программ Adobe Photoshop и Image Ready.
Успехов!
(В. Ахметзянова, 2005 г)