Электронные издания

Интерфейс пакета ImageReady 3.0 представлен на рис. 4.52. Внешне он напоминает интерфейс Photoshop 6.0. Похожая панель инструментов и ряд других палитр, но есть и существенные различия. Прежде всего, они проявляются в развитых и удобных для пользователя средствах оптимизации графического файла. Для этого в окне любого графического документа имеются 4 вкладки: исходное или изображение (original), оптимизированное изображение (optimized), два варианта изображения (исходное и оптимизированное или два оптимизированных с различными параметрами оптимизации) – 2-up и 4 варианта изображения, из которых пользователь может выбрать наилучший по его визуальной оценке (4-up). Именно этот последний вариант представлен на рис. 4.52. В каждой из 4 областей изображения помимо самого изображения указывается, в каком типе файла оно сохранено, каковы его характеристики качества, информационный объем графического файла и время его передачи по сети при заданной пропускной способности. В примере на рис. 4.52 это время изменяется от 28 до 9 секунд при пропускной способности сети в 28,8 Кбит/с.

Другое важное отличие пакета ImageReady состоит в использовании специальных палитр, таких как Animation (Анимация) и Rollover (Ролловер). На рис. 4.52 эти палитры показаны в нижней части рисунка в виде единого блока, в который также входят Image map (Карта ссылок) и Slice (Фрагмент). Именно эта группа палитр отличает ImageReady от Photoshop. Палитра Animation позволяет создавать анимационные GIF-файлы, а палитра Rollover – интерактивные элементы Web-страницы.

Рис. 4.52. Интерфейс пакета Adobe ImageReady 3.0

Из инструментов, представляющих интерес при разработке Web-страниц, отметим размещенное в 3-ей строке первой колонки панели инструментов средство для создания и выбора областей карты ссылок. Области могут быть трех видов: прямоугольные, круглые и многоугольные. Инструмент Фрагмент , расположенный в той же строке, что и Карта ссылок , но в правом столбце, позволяет разрезать изображение на прямоугольные фрагменты (собственно Фрагмент ) и выбрать нужный из них ( Выбор фрагмента ).

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

Возможно использование одного из 2 способов создания анимационных GIF-файлов. В первом случае задается исходное и конечное состояния объекта анимации и количество промежуточных изображений или состояний, причем сами промежуточные изображения создаются в пакете ImageReady автоматически. Такой вариант, как мы уже отмечали, используется и во многих других программных средствах для создания анимации. Другой подход состоит в том, что слоистая структура изображения, используемая как в пакете Photoshop, так и в ImageReady, обеспечивает создание анимации. Средствами последнего расположенные в отдельных слоях изображения можно автоматически преобразовать в изображения, хранимые в анимационном GIF-файле. Нетрудно заметить, что второй способ является более общим: он пригоден не только в тех случаях, когда требуется передать движение, перемещение одного или нескольких объектов, но и тогда, когда отдельные изображения в анимационном файле не связаны или слабо связаны друг с другом. Первый же способ является более простым, т. е. требует меньших усилий от разработчика. Остановимся на обоих этих способах более подробно.

Вначале рассмотрим на примере – как создать анимацию, зная начальную и конечную позиции движущегося объекта. Пусть у нас имеется некий пейзаж, который мы будем использовать как фон, на котором мы наблюдаем движение некоторого объекта. В качестве объекта можно выбрать самолет. На рис. 4.53 показан пейзаж, основой которого является озеро. Затем мы открываем изображение самолета и копируем это изображение в дополнительный слой пейзажа. Для этого следует открыть оба изображения в рабочем окне пакета Photoshop 6.0 и активизировать изображение самолета. Далее в меню палитры Слои выберем команду Дублировать слой и в открывшемся диалоговом окне Копировать слой (рис. 4.54) укажем имя нового слоя (Layer 2) и документ, в котором он размещен.После этого преобразования в предыдущем рисунке (см. рис. 4.53) появится еще один слой, в котором будет размещен самолет. Далее переключимся в пакет ImageReady, для чего имеется команда Перейти к в меню Файл . Здесь следует активизировать палитру Animation , в которой мы увидим миниатюру нашего двухслойного изображения: самолет на фоне облаков пейзажа с озером. Как показано на рис. 4.55, самолет расположен в левой верхней части изображения (соответственно и миниатюры). На рис. 4.55 представлено первое (или начальное) изображение для будущей анимации. Именно под таким номером оно отображается в палитре Animation . Теперь следует создать конечное изображения. Для этого в меню палитры Animation , показанном на рис. 4.56 следует выбрать команду Новый кадр . После этого в палитре Animation появится еще одна миниатюра, теперь с номером 2. Это и будет последний кадр анимации. Поэтому активизируем в нем тот слой, где находится изображение самолета и с помощью инструмента Перемещение (Move Tool) из панели инструментов пакета сдвинем изображение самолета к правой кромке рисунка. Это и будет конечный кадр анимации. Ему соответствует изображение, представленное на рис. 4.57.

Рис. 4.53. Пейзаж с озером

Далее сам ImageReady автоматически создаст промежуточные кадры анимации. Для этого воспользуемся командой Промежуточный меню палитры Animation . Эта команда активизирует очень важное диалоговое окно Tween (промежуточные кадры), представленное на рис. 4.58. Остановимся подробнее на установках, которые можно осуществить с помощью этого окна. В верхней части окна расположен переключатель Layers (Слои). Он находится в одной из 2 позиций: All Layers (Все слои) или Selected Layer (Выбранный слой). В нашем случае начальное и конечное изображения связаны с различными слоями, поэтому следует установить этот переключатель в первую позицию.

Рис. 4.54. Диалоговое окно Копировать слой

Рис. 4.55. Пейзаж с самолетом и палитры Animation и Слои

Рис. 4.56. Пейзаж с самолетом и палитра Слои , а так же Animation с открытым контекстным меню

Группа флажков Parameters (Параметры) задает способы и средства создания анимации, иначе говоря, здесь задаются те параметры, которые изменяются от одного кадра анимации к другому. В частности, флажок Position (позиция) определяет такой вид анимации, при котором от кадра к кадру изменяется положение объекта. Иначе говоря, с помощью этой опции анимация задается путем перемещения объекта. Флажок Opacity (непрозрачность) определяет анимацию в форме изменения прозрачности объекта. Установка флажка Effects позволяет задать параметры тех или иных эффектов. В раскрывающимся списке Tween with (переход между) определяется между какими кадрами следует вставлять промежуточные изображения. В списке предусмотрены 3 различных значения: Selection (выбор), First Frame (первый кадр) и Previous Frame (предыдущий кадр). В приведенном на рис. 4.57 примере активен 2-ой кадр, поэтому установлено по умолчанию значение Previous Frame , т. е. промежуточные кадры будут вставлены между 1-ым и 2-ым (текущим) кадрами. Наконец, внизу окна Tween имеется счетчик Frames to Add (количество добавляемых кадров). В примере на рис. 4.58 эта величина установлена равной 5. Естественно, что чем больше промежуточных кадров, тем более плавно, незаметнее будут изменения от кадра к кадру в процессе анимации. Но при этом пропорционально возрастает размер анимационного GIF-файла. В результате выполнения всех описанных операций мы получим изображение, представленное на рис. 4.59. В палитре Animation имеется уже 7 кадров, активен из них самый первый. В нижней части этой палитры предусмотрены органы управления видеоплеером. Нажав на кнопку Проигрывание (светлый треугольник, острый угол которого направлен вправо) мы увидим последовательную активизацию кадров в палитре при одновременном изменении положения самолета в верхней части рисунка.

Рис. 4.57. Конечный кадр анимации

Рис. 4.58. Диалоговое окно Tween

Для предварительного просмотра анимации можно воспользоваться кнопкой Preview in Default Browser (просмотр в браузере, установленном по умолчанию). Кнопка эта расположена в нижней части панели инструментов и легко узнаваема по своей пиктограмме. Отметим, что с помощью палитры Animation возможна точная регулировка времени задержки на экране каждого кадра анимации: для этого следует вывести указатель мыши на черную треугольную стрелку в нижней части кадра и выбрать нужное время из открывающегося списка. В нижней строке палитры Animation помимо инструментов для управления воспроизведением анимации имеются также кнопки для дублирования или уничтожения активного кадра.

Мы рассмотрели режим анимации с изменением положения объекта. Попробуем на примере продемонстрировать получение аналогичного эффекта путем изменения непрозрачности. Для этого вновь откроем в пакете Photoshop 6.0 пейзаж, представленный на рис. 4.53 и самолет. И снова скопируем самолет в отдельный слой того файла, в котором сохранен пейзаж. Затем переместим самолет в левый верхний угол изображения аналогично представленному на рис. 4.55. Далее перейдем в ImageReady 3.0. Вновь активизируем слой, содержащий самолет, и в меню палитры Layers (Слои) активизируем команду Layer Options (Опции слоя). У нас появится одноименное диалоговое окно, показанное на рис. 4.60.В этом диалоговом окне параметр Opacity (непрозрачность) сделаем равным 0. Таким образом, в начальной позиции (кадр 1) слой с самолетом будет полностью прозрачен, и самолет виден не будет. Затем, как и в первом случае, вставим новый кадр. В нем с помощью той же команды Layer Options изменим прозрачность нового слоя (параметр Opacity сделаем равным 100%) и переместим самолет в крайнюю правую позицию. Следующим шагом с помощью команды Промежуточный меню палитры Animation вставим между двумя созданными кадрами необходимое число промежуточных. Кроме того, в диалоговом окне Tween , инициируемом командой Промежуточный (см. рис. 4.58) установим не только флажок Position , но и Opacity . В результате на промежуточных кадрах анимации самолет будет не только перемещаться, но одновременно будет меняться его прозрачность.

Рис. 4.59. Анимация (7 кадров) с активным первым кадром

В примере на рис. 4.61 число промежуточных кадров, по-прежнему, равно 5. На рис. 4.61 активен 4 кадр анимации и видно полупрозрачное изображение самолета. На конечном, 7 кадре, он уже полностью непрозрачен. Эффект особенно заметен на рис. 4.62, где представлены все последовательные кадры анимации. На первом кадре самолет совсем не виден (если бы был виден, то был бы распложен вблизи левой границы кадра). А на 7 кадре самолет полностью непрозрачен и улетает за правую границу кадра. Как следует из нашего примера, используя не только перемещение, но и изменение прозрачности объектов можно получить интересные и неожиданные анимационные эффекты. Чаще всего используют постепенное проявление какой-либо надписи после перемещения некоторого объекта. Например, я видел рекламный баннер в виде анимационного GIF-файла, в которой появлению надписи предшествует перемещение (качение) колеса автомобиля. В другом примере надпись проявляется после пролета самолета. Во всех этих случаях надпись неподвижна, т. е. в диалоговом окне Tween (см. рис. 4.58) активизируется только единственный параметр – Opacity .

Рис. 4.60. Диалоговое окно Layer Options

Уже не раз отмечалась особая важность оптимизации GIF-анимации. Именно оптимизация позволяет предельно сократить размер файла, практически не меняя его изобразительных характеристик. В результате удается достаточно быстро загрузить файл в браузере пользователя. Для установки параметров оптимизации в ImageReady имеется специальная палитра Optimize . Для того чтобы устанавливать параметры оптимизации и наблюдать одновременно как изменяется оптимизируемое изображение, следует в рабочем окне программы вместо вкладки Original активизировать вкладку Optimized . Все перечисленное представлено на рис. 4.63. Каким же образом и в какой последовательности рекомендуется оптимизировать анимацию? Прежде всего, в палитре Optimize следует установить формат GIF, так как именно в нем выполнена анимация. Остальная часть изображения может быть оптимизирована в своем собственном формате. Ниже раскрывающегося списка выбора формата находится другой, называемый Color Reduction Algorithm (алгоритм уменьшения количества цветовых тонов). В нем рекомендуется выбрать строку Selective (избирательный), который позволяет качественно заменить группу различных цветов одним усредненным тоном. Далее следует методом проб и ошибок оценить необходимое разнообразие цветовых тонов. В большинстве случаев рекомендуется выбирать значение 64, хотя иногда можно уменьшить эту величину до 16. В той же строке справа расположен список Colors , где и следует установить указанное значение. Строкой ниже слева размещается еще один раскрывающийся список Dithering Algorithm (алгоритм сглаживания). В примере на рис. 4.63 в списке по умолчанию установлено значение Diffusion , т. е. диффузионное сглаживание. Во многих случаях можно выбрать значение No Dither , т. е. отсутствие сглаживания. При этом качество изображения ухудшится незначительно, а анимационный файл станет заметно компактнее. Все установки, которые делаются, немедленно учитываются в анимационном файле и их целесообразность может быть оценена визуально.

Рис. 4.61. Анимация (7 кадров) с активным 4-тым кадром и изменением прозрачности

Рис. 4.62. Последовательно смонтированные кадры анимации с перемещением самолета и изменением прозрачности слоя, где расположен самолет

Для GIF-анимации существует и другой способ оптимизации. Как видно из рис. 4.56 в меню палитры Animation имеется специальная команда Оптимизировать анимацию (Optimize Animation). Команда вызывает одноименное диалоговое окно, показанное на рис. 4.64. В окне расположены 2 флажка: Bounding Box и Redundant Pixel Removal . Первый флажок задает оптимизацию, состоящую в автоматической обрезке каждого кадра изображения таким образом, чтобы в нем оставались только те области, которые изменились по сравнению с предыдущим кадром. Второй флажок определяет удаление в последующих кадрах тех пикселов, которые не изменяются от кадра к кадру. Нажав кнопку OK в диалоговом окне, мы обеспечим оптимизацию анимации выбранным способом.

Рис. 4.63. Интерфейс ImageReady с активной палитрой Optimize справа и активной вкладкой Optimized в рабочем окне программы

Как уже ранее говорилось, более универсальным способом создания анимации является двухэтапный процесс, при котором вначале с помощью средств пакета Photoshop создается файл в формате PSD, где каждый слой хранит одно из графических изображений, которые впоследствии предполагается использовать в составе анимационного файла. Затем, этот PSDфайл передается в пакет ImageReady. И уже в рамках этого пакета слои преобразуются в отдельные кадры изображений, используемые в процессе анимации. Для этого преобразования в меню палитры Animation (см. рис. 4.56) предусмотрена специальная команда Сделать кадры из слоев. После этого остается только оптимизировать анимацию рассмотренными ранее методами.

Рис. 4.64. Диалоговое окно Optimize Animation

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

В чем же может состоять такая модернизация? Прежде всего, это может быть добавление, удаление или изменение местоположения отдельных кадров анимации. Для этого следует загрузить анимацию в ImageReady, активизировать палитру Animation , выделить в ней нужный кадр и произвести над ним соответствующее действие. Можно также загрузить кадры анимации как отдельные слои и затем работать отдельно с любым из слоев, внося в него необходимые изменения.Во многих случаях анимационный файл содержит текстовые фрагменты в одном или нескольких кадрах. Со временем может возникнуть необходимость в изменении рекламного текста. Реже у дизайнера возникает потребность изменить какие-нибудь параметры текстового блока в целом, например, гарнитуру, кегль или начертание. Для выполнения такой задачи следует в загруженной анимации выделить слой с этим текстом в палитре Слои . Затем активизировать палитру Текст и произвести нужные действия, например, изменить гарнитуру. С помощью инструмента Перемещение можно изменить положение текста в плоскости изображения. При необходимости, с помощью команды Подогнать слой под кадры палитры Animation (см. рис. 4.56) можно таким же образом позиционировать текст во всех кадрах анимации.