Главная / Творчество / Уроки / Компьютерная графика / Создаем анимированные картинки в Image Ready
Создаём анимированные картинки в Image Ready. Урок 1: Основы
Текст и скриншоты: Слесарев Максим
Последняя редакция от 05.07.09.
Привет! Если ты хочешь научиться создавать и редактировать анимированные картинки в программе Adobe Image Ready, то ты по адресу! Прочитав этот урок, ты уже сможешь создавать полноценную анимацию. В последующих же уроках я расскажу, как можно оптимизировать работу с анимированными изображениями, а также по-максимуму использовать ресурсы программы для разработки особо сложных анимированных картинок.
Сначала немного теории!
В каком формате будут наши анимированные картинки? Один из самых распространённых форматов таких изображений - *.gif. Этот формат изображений был специально создан для использования и передачи в Интернете (разработка велась ещё до появления глобальной сети) компанией Compuserve Inc. Поддержка анимации - одна из особенностей этого формата. К прочим "фичам" можно отнести поддержку реакции на действия пользователя и поддержку прозрачности (прозрачного фона). Но не обошлось и без недостатков: в изображении стандарта GIF не может присутствовать более 256 цветов (в профессиональных программах, как Image Ready, предусмотрена возможность поиска похожего на выбранный пользователем, но использующегося в web-цвета).
Теперь немного о выбранной нами программе. Image Ready поставляется вместе с одним из самых совершенных графических редакторов - Adobe Photoshop - и оптимизирована под разработку графики для Интернет-сайтов. Казалось бы, зачем использовать именно Image Ready, если можно сохранять изображения в формате *.gif даже в Paint? Начнём с того, что Image Ready сохраняет графику с минимальной для указанного формата потерей качества. На этом примере видна разница между двумя одинаковыми рисунками, сохранёнными в разных программах. Кроме того, рисунки, сохранённые в IR, часто весят меньше, чем сохранённые в других утилитах аналогичного назначения. Короче говоря, Image Ready всем хорош и работать лучше всего именно в нём. Впрочем, встроенные редакторы гифок и анимированных блинков есть ещё в очень многих программах, среди которых и утилиты для работы с гипертекстовой разметкой Hot Dog Professional, Coffee Cup и прочие. В любом случае, принцип разработки анимации *.gif везде примерно одинаков, и данная статья может оказаться вам полезной, даже если вы не используете именно Image Ready! На момент написания мануала последней является версия Image Ready CS2, мы же опишем работу в Image Ready 7 (хотя различия минимальны). Стоит добавить, что в пакетах программ Creative Suite 3 и 4 (CS3, CS4) от компании Adobe программа Image Ready отсутствует, а часть ее возможностей (в том числе и создание анимации) присутствуют в Photoshop CS3 и CS4 (для отображения панели редактирования анимации нажмите Window -> Animation).
Приступим-с!
Давайте больше не будем терять времени и сразу же приступим к созданию какой-нибудь несложной анимированной картинки! Положим, у нас есть спрайт-лист с изображением Lamp Post (чек-пойнт) из игры Sonic The Hedgehog и перед нами стоит задача анимировать этот объект. Скачайте этот спрайт-лист, чтобы пробовать всё на практике параллельно чтению урока. Открываем Image Ready (или Photoshop CS3/CS4) и загружаем этот спрайт-лист (File -> Open...). Сразу же проверьте, открыто ли окно Animation программы и, если нет, откройте его из основного меню наверху: Window -> Animation. Отлично. Выбираем инструмент Zoom Tool (горячая клавиша Z) и приблизим открытое изображение несколько раз в целях удобства работы.
Вообще анимированная картинка представляет собой набор последовательно отображаемых кадров. Эти самые кадры как бы наложены друг на друга и становятся видимыми/невидимыми в запрограммированное аниматором время. Теперь подумаем: какого размера должна получиться анимированная картинка, чтобы в ней могли поместиться все кадры анимации и основание столбика было всегда в центре на одном и том же месте? Самым широким является четвёртый (центральный) спрайт. Но ведь в полном цикле оборота будет ещё кадр, представляющий собой зеркально отображённый четвёртый спрайт, поэтому мы должны к ширине этого спрайта добавить ещё ширину красного шарика (28 + 12 пикселов). Высоту берём первого спрайта слева, так как на нём запечатлён стоячий "в полный рост" столбик с шариком наверху. Однако высоту высчитывать уже необязательно. Выделяем первый спрайт при помощи квадратного выделения Marquee Tool (горячая клавиша M) и нажимаем Edit -> Copy. Теперь создаём новый файл (File -> New...); размеры скопированного ранее выделения должны по умолчанию быть вписаны в поля Width (Ширина) и Height (Высота). Высоту оставим, а ширину изменим на 40 пикселов (28 + 12, помните?). Чтобы наш столбик был на прозрачном фоне, убедимся, что в рамке "Contents Of First Layer" выбрана опция Transparent (Прозрачность), после чего нажмём ОК.
Вставим рисунок первого кадра в новое изображение, нажав Edit -> Paste. Выделенный ранее фрагмент должен появиться ровно в центре изображения; если это не так, то переместите его туда. Аналогичным образом поочерёдно скопируем все спрайты полуоборота столбика и разместим их так, чтобы основание Lamp Post было ровно в центре изображения и прилегало к нижнему краю рисунка. При этом в окне Layers (Слои), по умолчанию расположенном в нижней правой части экрана, появятся несколько пронумерованных слоёв с именами Layer 1, Layer 2, Layer 3, ...4, ...5 и т. д. Для полного цикла оборота нам не хватает отражённых копий слоёв № 2, 3, 4, 5 и 6. Поочерёдно продублируем их (нажмите в окне Layers правой кнопкой на каждом из них и выберите в появившемся контекстном меню пункт Duplicate Layer) и, выделяя теперь уже копии старых слоёв, нажмём Edit -> Transform -> Flip Horizontal. Полученный слои опять же поместим в нужном месте (чтобы столбик был в центре). Помните, что в процессе выполнения выше описанных операций можно делать некоторые слои временно невидимыми (для этого нажмите на иконку глаза напротив временно ненужного слоя, чтобы вернуть - нажмите на пустую клеточку, чтобы иконка глаза вновь появилась и слой опять стал видимым).
Теперь давайте разместим все слои-кадры в порядке их следования в анимации, для чего нужным образом перетащим слои (для перетаскивания нажмите на строку слоя и, не отпуская кнопки мыши, передвиньте вверх или вниз) и придадим им порядок снизу вверх (или наоборот): Layer 1, Layer 2,... Layer 7, Layer 6 copy, Layer 5 copy,... Layer 2 copy (и всё-таки ориентируйтесь не по названию, а по маленькой иконке-пиктограмме слоя, ведь это лишь один из вариантов расположения, который "сработает" у вас только в том случае, если вы в точности повторяли выше описанные действия). Вот то, что у нас получилось.
Как вы уже могли заметить, прозрачность обозначается клетчатым полем. Но у нас столбики на синем фоне, который портит весь вид! Давайте же его уберём: выберите инструмент Magic Wand Tool (горячая клавиша W), в полях наверху установите
Tolerance (Допуск) = 1, уберите галочки у пункта Contiguous, если она там стоит; после кликните на синей области каждого слоя (помните, что при этом ненужные слои можно временно скрывать) и каждый раз выполните команду Edit -> Cut. Посмотрите, что у вас должно получиться, если вы вновь сделаете видимыми все слои. Но нам теперь нужно, напротив, все слои скрыть, что я и предлагаю вам сделать.
Ура, приступаем непосредственно к кадрированию! Обратимся к окну Animation (Анимация), которое открыли в самом начале работы. По умолчанию уже создан первый кадр. Внизу на рамке этого кадра можно заметить надпись "0 sec" и стрелочку. Это время задержки кадра (изначально 0, то есть нет задержки), которое можно установить самому или выбрать из одно из стандартных значений, кликнув по стрелочке. Давайте установим время задержки, равное 0,1 секунды. В самом низу окна слева есть надпись "Forever" и опять же стрелочка. Это настройка повтора анимации; Forever заставляет анимацию проигрываться бесконечное количество раз (отобразив последний кадр, программа вновь перейдёт к первому), установленная опция Once заставит анимацию остановиться на последнем кадре, также можно установить количество раз проигрывания анимации (в меню, появляющемся при клике по стрелочке). Оставим опцию Forever. Сделаем видимым первый слой. Теперь у нас есть первый кадр анимации, в котором отображается первый слой (Layer 1). Чтобы создать следующий кадр, кликните по ма-а-аленькому значку с изображением листочка с загнутым краем (справа от надписи Forever) или нажмите на стрелочку на правой стороне окна Animation и выберите пункт New Frame. В созданном кадре опять же отображается первый слой; убедившись, что в окне Animation выделен второй кадр, скройте указанный слой и на этот раз сделайте видимым следующий, второй слой. И так создайте кадры анимации со всеми слоями (в нашем с вами случае в каждом кадре должен отображаться лишь один слой)! Анимация готова! Чтобы насладиться полученным результатом, нажмите на кнопочку Play (внизу, в окне Animation). Осталось лишь сохранить картинку в формате *.gif, для чего нажмите File -> Save Optimized As... (в Photoshop CS3/CS4 следует нажать File -> Save For Web & Devices... и выбрать из выпадающего списка формат *.gif) и задайте какое-либо имя, например, LampPost.gif.
Заключение
Как видите, создание анимации - не такой уж и сложной, но зато очень увлекательный процесс! Попрактикуйтесь, создайте несколько анимированных картинок! В следующем уроке я расскажу, как можно оптимизировать процесс создания анимации и расскажу о некоторых специальных функциях программы Image Ready! До встречи в следующем уроке!
Главная / Творчество / Уроки / Компьютерная графика / Создаем анимированные картинки в Image Ready
