Gif-анимация: первые шаги
Теоретические аспекты создания анимационных gif’ов
Сегодня Web-страница, выполненная без Web-анимации, не может восприниматься как полноценная. Сделать статическую страницу живее помогут анимационные gif’ы. Довольно долго для их создания Web-дизайнеры вынуждены были использовать целый набор специализированных программ от различных разработчиков. И лишь с выходом приложения Adobe ImageReady, включенного в графический пакет Adobe Photoshop начиная с версии 5.5, ситуация кардинально изменилась. Программа ImageReady, предназначенная для придания Web-страницам интерактивности при помощи разнообразных графических элементов, открыла перед Web-дизайнерами огромные возможности в плане обработки графики. Сюда можно отнести не только создание gif-анимации, но и решение вопросов по оптимизации изображений, «разрезанию» картинок, разработке rollover-элементов, созданию карт гиперсвязей и пр.
При этом Photoshop и ImageReady тесно взаимосвязаны — для перехода из одной программы в другую достаточно щелкнуть на соответствующей кнопке в панели инструментов (например, для перехода из Photoshop в ImageReady — на кнопке «Jump To ImageReady»). Программы полностью совместимы и прекрасно дополняют друг друга, а редактируемый файл без проблем можно перемещать между программами во время работы с ним или в процессе сохранения, не опасаясь потери информации либо тех или иных повреждений. В то же время каждая из программ имеет свою специализацию в плане Web-графики: как правило, подготовку и редактирование графики лучше проводить в Photoshop, хотя многие операции возможны и в среде ImageReady, а наложение динамических эффектов, оптимизацию и, конечно же, анимацию — в ImageReady.
Теоретические аспекты создания анимационных gif’ов
Как известно, gif-анимация является последовательностью кадров, исходный графический материал для которых может быть предварительно подготовлен как в самом ImageReady, так и в Photoshop, а выбор приложения определяется особенностями конкретной анимации.
Анимация в ImageReady основывается на слоях, поэтому, например, предварительно созданный в Photoshop в формате PSD графический файл рисунка, содержащий несколько слоев, позволяет быстро получить анимацию, в основе которой окажутся изображения данных слоев, — это первый способ создания кадров, формирующихся непосредственно на основе слоев. Осуществляется эта операция с помощью команды Make Frames From Layers (Создать кадры из слоев); в итоге получается, что для каждого отдельного слоя изображения создается свой кадр. Слои обеспечивают удобный способ композиционного построения изображения из различных графических и текстовых элементов и позволяют применять к различным элементам изображения всевозможные фильтры, тем самым обеспечивая получение разнообразных эффектов. Кроме того, слои хоть и присутствуют во всех кадрах, могут включаться по мере необходимости только в некоторых из них и иметь при этом различные яркость и метод наложения.
Второй, принципиально иной способ создания кадров, — автоматическое формирование промежуточных кадров, что существенно ускоряет получение плавных анимаций, поскольку отпадает необходимость создавать каждый кадр вручную. Для реализации этого способа определяются ключевые кадры, после чего программа автоматически формирует всё, что должно быть в промежутках между ними. Как правило, данный прием применяется в анимациях с перемещениями объектов и деформациями, но ImageReady может автоматически строить и такие промежуточные кадры, в которых постепенно изменяется прозрачность и/или расположение слоев и пр.
Основной при разработке анимаций является палитра Animation, в которой находятся сами кадры, — если палитры нет на экране, то ее нужно открыть, воспользовавшись командой Window->Show Animation (Окно->Показать анимацию). В палитре Animation необходимо выбрать конкретный кадр, в результате он появится в рабочем окне редактирования, где его можно будет подвергнуть различным преобразованиям: редактированию, наложению эффектов и пр.
Прямо в окне программы можно просмотреть результат, щелкнув на кнопке Play, и при необходимости внести требуемые изменения, например скорректировать длительность отображения каждого кадра, цикличность и пр. По умолчанию задержка отображения у всех кадров равна нулю — в этом случае кадры мгновенно сменяют друг друга. Чаще всего такой вариант не устраивает, тогда следует установить нужное время проигрывания для каждого кадра, щелкнув на поле «0 sec.». Для того чтобы указать время проигрывания, отсутствующее в меню, необходимо в меню «0 sec.» выбрать вариант Other и ввести в диалоговом окне нужное значение.
По окончании работы программа позволяет сохранить файл анимации с оптимизацией, то есть с уменьшением объема, исключив из него информацию о статичных областях изображения с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией) — в итоге будет создан сжатый файл с расширением gif. А если предполагаются какие-то доработки, то стоит сохранить неоптимизированное изображение, применив команду File->Save (Файл->Сохранить), — тогда полученный файл окажется в формате PSD и его можно будет в любой момент доработать.
 |
|
Gif-анимация на практике
Проблема интерактивности Web-страниц сегодня столь актуальна, а ImageReady настолько популярен у Web-дизайнеров, что в Сети совсем несложно найти полезные советы по разработке анимаций.
В поисках интересных примеров стоит посетить, например, сайты http://www.metamorephosis.com/, http://www.computerarts.co.uk/ и http://www.graphics.ru/, ознакомиться с соответствующими уроками на http://www.webclass.ru/, http://www.anriintern.com/ps/make_bann.html, на http://graphicssoft.about.com/cs/imagereadyani/#m. Или заглянуть по следующим адресам: http://www.uwplatt.edu/~web/wtc/animation.html, http://comers.citadel.edu/tutorials/gifTutorial.htm http://shrek-ludoed.narod.ru/imageready.htm и http://www.virtualartroom.com/animation_IR_layers.htm. Интересующимся вопросами морфинга не следует пропускать ресурсы http://www.creativemac.com/2003/01_jan/tutorials/imageready0301133.htm и http://www.design.iastate.edu/LABS/pc_tutorials/imageready/. А с вариантами более трудоемких анимаций на примере фотоизображений стоит ознакомиться на сайтах http://graphicssoft.about.com/library/tuts/bltut26a.htm и http://www.digitalvideoediting.com/2002/09_sep/tutorials/layeranimir020903.htm.
В данном уроке, учитывая, что пользователь только начинает постигать азы разработки анимационных gif’ов, остановимся на самых простых примерах, которые часто используются дизайнерами при создании баннеров-логотипов.
Плавная смена текста
Данный эффект обеспечивает плавное превращение одного текста в другой. Мы рассмотрим его упрощенный вариант, а с более эффектным, но и более трудоемким примером реализации аналогичной анимации вы сможете ознакомиться, заглянув по адресу http://user.fundy.net/morris/redirect.html?photoshop12.shtml.
Откройте Photoshop, создайте новый рисунок в режиме RGB и с прозрачным фоном и напечатайте исходный текст (рис. 1).
Сделайте дубликат слоя, воспользовавшись командой Layer->Duplicate Layer (Слой->Дублировать слой), а затем примените к новому дубликату слоя фильтр «Размытие в движении»: Filter->Blur->Motion Blur (Фильтр->Размытие->Размытие в движении) при параметрах Angle (Угол) равном 0 и Distance (Дистанция) равном 25 (рис. 2).
Затем создайте новый слой командой Layer->New Layer (Слой->Новый слой), напечатайте конечный текст, откорректируйте его положение по отношению к исходному тексту, сделайте дубликат слоя и размойте дублирующий слой в движении при указанных выше параметрах (рис. 3). В итоге будут созданы четыре слоя (рис. 4).
На следующем этапе перейдите в программу ImageReady, откройте меню палитры Animation, щелкнув на черной стрелке в правом верхнем углу палитры, и выберите команду Make Frames From Layers (Создать кадры из слоев) — рис. 5. В итоге будут созданы четыре кадра, каждый из которых соответствует определенному слою, а окно палитры Animation примет вид, как на рис. 6.
После этого установите продолжительность каждого из созданных кадров — в данном случае взят следующий вариант: 1 с для первого кадра, 0,1 — для второго, 1 с — для третьего и 0,1 — для четвертого кадра. Затем сохраните анимацию с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). Полученный результат будет подобен тому, что показан на рис. 7.
Анимация масштабирования
Данный эффект одинаково часто применяется как к тексту, так и к другим объектам. Для его реализации откройте Photoshop, создайте новый рисунок в режиме RGB и сформируйте исходное изображение, например как на рис. 8.
Перейдите в программу ImageReady, создайте четыре дубликата слоя с изображением, воспользовавшись командой Layer->Duplicate Layer (Слой->Дублировать слой), — рис. 9.
Теперь удалите слой с фоном, а затем, последовательно выбирая каждый из слоев, воспользуйтесь командой Edit->Transform->Numeric (Редактировать->Трансформация->Цифровой) и измените значение параметра Percent в группе Scale следующим образом: для первого слоя на 20%, для второго и последующих, за исключением последнего, — на 40, 60 и 80%. В итоге изображение примет вид, как на рис. 10.
Активизируйте меню палитры Animation, щелкнув на черной стрелке в правом верхнем углу палитры, и выберите команду Make Frames From Layers (Создать кадры из слоев) — в итоге появится пять кадров, а окно палитры Animation примет вид, как на рис. 11.
Установите подходящую длительность кадров — в данном примере взято одинаковое время 0,2 с для каждого кадра. Затем сохраните файл с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). Анимация будет подобна той, что приведена на рис. 12.
Мигающий текст
Откройте Photoshop, создайте новый рисунок в режиме RGB и напечатайте на белом фоне произвольный текст, например как на рис. 13. Одновременно с этим откройте вспомогательный файл, с помощью которого вы собираетесь осуществить эффект мигания, — в данном случае был использован рисунок Peppers.jpg из папки Samples из Photoshop 7.0 (рис. 14).
Выделите интересующую часть изображения на вспомогательном рисунке и перетащите ее на напечатанный текст, воспользовавшись инструментом Move tool. Затем примените команду Layer->Group with Previous (Слой->Группировать с предыдущим). В результате текст примет вид, как на рис. 15, а окно слоев будет выглядеть в соответствии с рис. 16.
Перейдите в программу ImageReady и продублируйте кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation. После этого для второго кадра скорректируйте непрозрачность слоя Layer1 подходящим образом, например до 80%, и определите длительность кадров. В итоге палитра Animation станет выглядеть, примерно как на рис. 17.
По окончании измените режим смены кадров с варианта Automatic на вариант Restore to background, щелкнув правой кнопкой на каждом из кадров и откорректировав режим. Затем сохраните файл с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). В итоге будет получена анимация примерно такого вида, как на рис. 18.
Шевелящийся текст
Откройте ImageReady, создайте на прозрачном фоне новый файл и напечатайте исходный текст (рис. 19). Перейдите в окно слоев и сделайте три копии исходного слоя, трижды последовательно применив команду Layer->Duplicate Layer (Слой->Дублировать слой) — рис. 20.
Активизируйте второй слой и воспользуйтесь фильтром «Рябь» Filter->Distort->Ripple (Фильтр->Искажение->Рябь) с параметрами, как на рис. 21. Затем последовательно наложите этот же фильтр на третий слой при значении Amount (Количество) в 75% и на четвертый слой при значении Amount (Количество) в 100%.
Откройте меню палитры Animation, щелкнув на черной стрелке в правом верхнем углу палитры и выберите команду Make Frames From Layers (Создать кадры из слоев) — в итоге будут созданы четыре кадра, каждый из которых будет соответствовать определенному слою, а окно палитры Animation примет вид, как на рис. 22. После этого установите продолжительность каждого из созданных кадров, примерно как на рис. 23.
Затем сохраните анимацию с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). Полученный результат будет напоминать рис. 24.
Выскакивающий текст
Откройте Photoshop, создайте новый рисунок в режиме RGB и напечатайте исходный текст (рис. 25), размещая каждую букву на отдельном слое (рис. 26).
Перейдите в программу ImageReady, активизируйте палитру Animation (рис. 27) и установите подходящую длительность кадра — в данном примере взят вариант в 0,4 с.
Затем создайте нужное количество дубликатов кадра — оно зависит от количества букв в слове, последовательно щелкая на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation — в данном случае потребуется 9 кадров (рис. 28).
После этого нужно будет скорректировать видимость/невидимость конкретных слоев в каждом из кадров в соответствии с рис. 29, включая/выключая параметр Indicates layer visibility (Индикация видимости слоя) в окне Layers.
И на заключительном этапе измените режим смены кадров с варианта Automatic на Restore to background — для этого потребуется последовательно щелкать правой кнопкой на каждом из кадров в окне Animation и корректировать режим. Затем сохраните файл с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). В итоге будет получена анимация примерно такого вида, как на рис. 30.
Плазменный текст
Откройте ImageReady, на прозрачном фоне создайте новый файл и напечатайте произвольный текст (рис. 31).
Щелкните правой кнопкой на слое с текстом в палитре Layers и переведите изображение в растровый формат, выбрав команду Rasterize Layer (Растеризация слоя), а затем измените стиль слоя с помощью команды Layer->Layer Styles->Satin (Слой->Эффекты слоя->Атлас) — рис. 32, 33. Это приведет к открытию палитры свойств слоя (рис. 34).
Создайте три дубликата слоя, воспользовавшись командой Layer->Duplicate Layer (Слой->Дублировать слой) — рис. 35.
После этого для второго, третьего и четвертого слоев измените параметры эффекта Satin, ориентируясь на рис. 36, 37 и 38 соответственно — для этого щелкайте каждый раз на эффекте Satin в палитре Layers, а затем в окне свойств слоя корректируйте его параметры.
На следующем этапе создайте кадры в соответствии с имеющимися слоями, выбрав команду Make Frames From Layers (Создать кадры из слоев) из меню палитры Animation, установите подходящую длительность кадров и измените режим смены кадров с варианта Automatic на вариант Restore to background, щелкнув правой кнопкой на каждом из кадров и откорректировав режим. В результате анимация будет состоять из четырех кадров, а окно палитры Animation примет вид, как на рис. 39.
Затем сохраните файл с оптимизацией с помощью команды File->Save Optimized (Файл->Сохранить с оптимизацией). Анимация будет напоминать ту, что приведена на рис. 40.
Точечная генерация текста
Данный эффект идеально подходит для анимации титров. Для его реализации откройте Photoshop, создайте новый рисунок в режиме RGB с белым фоном и напечатайте исходный текст (рис. 41).
Щелкните правой кнопкой на слое с текстом в палитре Layers и переведите изображение в растровый формат, выбрав команду Rasterize Layer (Растеризация слоя), а затем шесть раз проведите дублирование слоя, воспользовавшись командой Layer->Duplicate Layer (Слой->Дублировать слой). В результате палитра Layers примет вид, как на рис. 42.
Выключите значки видимости на всех копиях текстового слоя, в палитре Layers выберите первую копию и примените к ней фильтр Filter->Texture->Grain (Фильтр->Текстура->Зерно) с параметрами, как на рис. 43, — текст станет напоминать тот, что приведен на рис. 44. Затем этот же фильтр последовательно примените в отношении вышележащих слоев, меняя значение параметра Intensity (Интенсивность) на 29, 40, 55, 72, 90 и 100 соответственно для каждого из слоев. По окончании сделайте невидимыми все слои, кроме фонового (рис. 45).
Теперь запустите ImageReady и продублируйте кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation (рис. 46).
Активизируйте второй кадр и на панели Layers сделайте видимым самый верхний слой. Затем продублируйте второй кадр и сделайте видимым на нем второй сверху слой и продолжайте данный процесс, пока не дойдете до последнего слоя. Повторяйте процесс, создавая новые кадры и отображая последовательно нижние слои. В итоге получится восемь кадров, а окно палитры Animation примет вид, как на рис. 47.
По окончании установите длительность для каждого кадра — в данном примере взят следующий вариант: 0 с — для первого и второго кадров; 0,1 — для третьего кадра; 0,2 — для кадров с четвертого по седьмой и 0,5 — для восьмого кадра. Затем сохраните файл с оптимизацией, применив команду File->Save Optimized (Файл->Сохранить с оптимизацией), и получите анимацию, примерно как на рис. 48.
Постепенное проявление
Этот эффект используется весьма часто в отношении любых объектов, в том числе и текстовых. Для его реализации откройте Photoshop, создайте новый рисунок в режиме RGB с белым фоном и напечатайте исходный текст (рис. 49).
Перейдите к ImageReady и продублируйте кадр, щелкнув на иконке Duplicates current frame (Дублировать текущий кадр) палитры Animation. На первом кадре сделайте слой с текстом невидимым, а на втором — видимым, но уменьшив значение параметра Opacity (Непрозрачность) до 10% (рис. 50).
Затем продублируйте второй кадр еще девять раз, каждый раз увеличивая непрозрачность
текстового слоя на 10%: для третьего кадра — 20%, четвертого — 30%
и так далее до последнего кадра — 100%. После этого подберите нужную для
каждого кадра длительность — в данном случае для всех кадров она равна
0,2 с (рис. 51). По окончании сохраните файл с оптимизацией,
применив команду File->Save Optimized (Файл->Сохранить с оптимизацией). Результат
будет напоминать тот, что приведен на рис. 52.
