Онлайн учебник по работе
с программой ImageReady

Создание графики для сайта

Редактирование анимации

Если после создания анимации вы отредактируете пикселы слоя (например, раскрасите, откорректируете цвет и яркость или каким-либо образом преобразуете слой), то внесенные изменения автоматически будут применены ко всем кадрам анимации, в которых виден данный слой.

Если же вы спрячете или покажете слой, измените расположение элемента слоя, непрозрачность или режим смешивания либо измените эффект слоя в одном кадре, эти изменения не будут скопированы в другие кадры. Дело в том, что такие изменения производятся с помощью палитры Layers (Слои) и не затрагивают реально существующих точек слоя. Если же необходимо внести перечисленные изменения во все кадры анимации, то в меню палитры Animation воспользуйтесь командой Match Layer Across Frames (Привести в соответствие слои во всех кадрах).

Так как некоторые виды изменений, вносимых с помощью палитры Layers (Слои), могут быть выполнены при помощи установки в диалоговом окне Tween (Промежуточные кадры) флажков Position (Расположение), Opacity (Непрозрачность) и Effects (Эффекты), то в любой момент можно изменять значения перечисленных параметров для отдельных кадров, не затрагивая остальные.

Команда Match Layer Across Frames удаляет все изменения, которые были внесены в слой при создании промежуточных кадров. Если это недопустимо, редактируйте кадры анимации при помощи методов, описанных в разделе «Применение второго анимационного эффекта к существующей анимации».

Воспроизведение анимации в обратном порядке до первого кадра

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

1. Выделите последний кадр на палитре Animation (Анимация).
2. Щелкните по кнопке Tween (Промежуточные кадры), расположенной на этой же палитре.
3. Поставьте переключатель Layers (Слои) в положение All Layers (Все слои), установите флажки для всех параметров, выберите пункт First Frame (Первый кадр) в меню Tween with (Диапазон промежуточных кадров) и введите соответствующее значение в поле Frame to Add (Добавить кадры).
4. Щелкните по кнопке ОК.

Применение второго анимационного эффекта к существующей анимации

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

1. Выберите или создайте слой, к которому следует применить анимационный эффект.
2. На палитре Animation (Анимация) щелкните по тому кадру, с которого будет начинаться эффект анимации (рис. 23.144).
3. Расположите изображение слоя желаемым образом в кадре, соответствующем началу анимационной последовательности. При необходимости отрегулируйте его непрозрачность или примените какие-либо эффекты (рис. 23.145).
4. Щелкните по конечному кадру анимационной последовательности.
5. В конечном кадре измените положение изображения слоя или значение непрозрачности, удалите или, наоборот, примените эффекты слоя. Не снимайте выделение со слоя!
6. Если при выполнении шагов 2-4 выбраны первый и последний кадры анимации соответственно, то выполните команду Select All Frames (Выделить все кадры) из меню палитры Animation. Если же при выполнении этих шагов первый и последний кадры анимации выбраны не были, то щелкните по кадру (для шага 2), затем, нажав клавишу Shift, щелкните по кадру, который будет последним. Теперь выделен некоторый ряд кадров. 7. Щелкните по кнопке Tween (Промежуточные кадры), расположенной на палитре Animation, чтобы сразу же создать промежуточные кадры. Второй способ: в меню палитры Animation выполните команду Tween. Установите переключатель Layers (Слои) в положение All Layers (Все слои), установите флажки для тех параметров, которые только что изменили (Position (Расположение), Opacity (Непрозрачность) или Effects (Эффекты)), а затем щелкните по кнопке ОК. На рис. 23.146 показаны начальный кадр (эффект Outer Glow, непрозрачность 4%), промежуточный и последний кадр (эффект Outer Glow, непрозрачность 100%) второго эффекта анимации.

Рис. 23.144. Первая анимация

Рис. 23.145. Результат применения к слою iogо команды Invert и эффекта Outer Glow

Рис. 23.146. Результат добавления второго эффекта анимации

Второй эффект анимации будет постепенно «проявляться» в кадрах, выбранных на таге 6. Существовавшие до этого анимационные эффекты будут сохранены.

Уменьшение размера изображения

Если созданная анимация слишком велика для воспроизведения в браузере либо слишком долго загружается на Web-страничку, то можно выполнить следующие действия: уменьшить размер файла с помощью команды Image Size (Размер изображения) в меню Image (Изображение) или обрезать изображение. Независимо от того, какой способ выбран, убедитесь, что работаете с копией файла (чтобы создать ее, воспользуйтесь командой File > Save As (Файл > Сохранить как)).

1. Выполните команду Image > Image Size (Изображение > Размер изображения).
2. Уменьшите значения в полях Width (Ширина) и Height (Высота) до 200x200 пикселов (или 150x300) либо итого меньше (рис. 23.147).
3. Убедитесь, что в меню Quality (Качество) выбран вариант интерполяции Smooth (Bicubic) (Гладкая (Бикубическая)).
4. Щелкните по кнопке ОК.

Рис. 23.147. Диалоговое окно Image Size в программе ImageReady

Рис. 23.148. Кнопки управления воспроизведением на палитре Animation

Рис. 23.149. Последовательность кадров на палитре Animation

Рис. 23.150. Панель опций инструмента Crop

Обрезка изображения

1. Если при анимации изображение движется от одного края основного окна к другому, то на палитре Animation (Анимация) щелкните по кадру где-то в середине анимационной последовательности (рис. 23.148 и 23.149). Если изображение остается в центре основного окна, то щелкните по любому кадру.
2. Откройте палитру Info (Информация) и перетащите ее, чтобы отделить от группы палитр.
3. Выберите инструмент Crop (Кадрировать), нажав клавишу С, или щелкните по пиктограмме.
4. На панели опций поставьте переключатель Cropped Area (Отсекаемая область) в одно из положений - см. рис. 23.150:
   • Delete (Удалить) - чтобы удалить точки, расположенные за границами рамки;
   • Hide (Спрятать) - чтобы сохранить эти точки. Воспользуйтесь данной опцией, если элемент слоя движется от одного края изображения к другому либо элемент фонового слоя движется позади меньшего объекта слоя, находящегося на переднем плане. При воспроизведении анимации спрятанные области будут отображаться за пределами границ рамки кадрирования. Позднее с помощью инструмента Move (Перемещение) можно вручную скорректировать расположение слоя относительно границ рамки кадрирования.
5. Перетащите курсор инструмента Crop (Кадрировать) по диагонали, чтобы указать меньшие размеры изображения (рис. 23.151), наблюдая за значениями W и Н (размеры рамки для обрезанной области) на панели Info (Информация). Если необходимо, переместите границы созданной рамки, чтобы достичь желаемого размера. Уменьшите размеры примерно до 200x200 пикселов (или 150x300 пикселов) или еще меньше (см. ниже первый совет).
6. Чтобы применить эффект кадрирования, дважды щелкните мышью внутри рамки или нажмите клавишу Enter.
7. Предварительно просмотрите анимацию (как это сделать, написано в разделе «Предварительный просмотр анимации») - см. рис. 23.152.

200x200 (или 150x300) пикселов - это рекомендуемый размер рамки кадрирования. Если необходимо использовать другие размеры, то в палитре History (История) щелкните по элементу состояния, предшествующему применению команды Crop (Кадрировать). Каждый раз просматривайте полученный результат с помощью команды File > Preview in [browser] (Файл > Предварительный просмотр в [браузер]) программы ImageReady. А чтобы увидеть реальное воспроизведение анимации, загрузите ее на Web-страничку, чтобы потом просмотреть через Internet.

Скорость воспроизведения анимации частично определяется скоростью центрального процессора в компьютере пользователя, версией используемого браузера и объемом оперативной памяти, в данный момент выделенной для него.

Рис. 23.151. Рамка кадрирования

Рис 23.152. Постепенное исчезновение изображения за границами рамки кадрирования

Другие способы сокращения размеров файлов

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