Текст книги "Электронные издания"

4.8. Подготовка GIF-анимации в интегрированном пакете Photoshop – ImageReady

Известно, что программный пакет Photoshop уже много лет занимает лидирующее положение в издательском деле и полиграфии. Однако длительное время фирма Adobe не предпринимала специальных усилий для адаптации его к нуждам Web-дизайнеров и специалистов по подготовке электронных публикаций. Лишь во второй половине 90-х годов была сделана попытка выпуска специализированного редактора растровой Web-графики – ImageReady 1.0. По существу это был тот же Photoshop, лишенный множества специальных функций – таких как цветовая и тоновая коррекция, настройка печати, управление цветом, работа с цветовыми каналами. Дополнительно в редактор были включены средства оптимизации изображений для основных сетевых форматов: JPEG и GIF. Редактор не пользовался особой популярностью. Поэтому фирма Adobe предложила пользователям альтернативный вариант – интегрированный графический пакет Photoshop 5.5 и ImageReady 2.0, в котором пользователь имел возможность пользоваться привычным пакетом Photoshop для подготовки обычной графики, переходя в ImageReady в тех случаях, когда необходимо было адаптировать эти изображения к использованию в сети Интернет.

Следующая версия этого пакета Photoshop 6.0 и ImageReady 3.0 была значительно усовершенствована как в части растровой графики, так и Webдизайна. Именно на ней мы остановимся подробнее. Прежде всего, отметим, что, как и в предыдущей версии, используются по существу две различные программы. В результате на 32 Мбайта увеличивается потребность в оперативной памяти при одновременном запуске Photoshop и ImageReady. Большее пространство необходимо и для организации виртуальной памяти с помощью жесткого магнитного диска. Даже передача изображения из одного пакета в другой производится с организацией промежуточного файла на жестком диске. Тем не менее, пользователь получает, как это будет видно из дальнейшего описания, множество дополнительных возможностей и удобств, что уже сделало это программное средство достаточно популярным.

Интерфейс пакета 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) можно таким же образом позиционировать текст во всех кадрах анимации.

Контрольные вопросы

1. Какие программные средства вы знаете для создания гипертекстовых документов? С какими из них вы уже работали?

2. Что такое гипертекстовых документ? Какие его основные признаки?

3. Какие из редакторов MS Word можно использовать для создания гипертекстовых документов? В каком или каких форматах могут подготавливаться эти документы?

4. Какие дополнительные команды, появившиеся в MS Word 97 обеспечивают возможность создания гипертекстовых документов? В каком меню они находятся?

5. Какому тэгу и с каким параметром соответствует команда Закладка? Какое значение придается этому параметру?

6. Чем отличается тэг при работе с внутренней гиперссылкой? Если вы забыли это, перейдите в режим просмотра исходного HTML-кода и, найдя нужный тэг, выпишите ответ на этот вопрос.

7. Чем отличаются последующие версии MS Word от MS Word 97? По вашему мнению, упростилась ли в них процедура создания гипертекстовых документов? В чем вы видите дополнительные преимущества или недостатки?

8. Как перевести MS Word 97 в режим HTML-редактора? К какой группе HTML-редакторов его следует отнести?

9. В чем вы усматриваете изменение интерфейса редактора MS Word 97 при переводе его в режим редактирования HTML-документов? Какие новые инструменты появляются в панели Форматирование?

10.Какие изменения в составе команд можно отметить в меню Формат? С чем они связаны?

11.Что изменилось в диалоговом окне Шрифт? Сколько различных размеров (кеглей) шрифтов сохранилось и какие они? Сколько осталось вкладок в этом окне?

12.В чем вы усматриваете изменения в диалоговом окне Список? Сколько в нем вкладок осталось и какие они? Почему это так? Что вы можете сказать относительно маркеров? Попробуйте сопоставить их разновидности с теми, которые были рассмотрены во 2-ой главе? К каким выводам можно придти?

13.Для чего используется команда Стиль и соответствующее ей диалоговое окно? Как связать определенный стиль с текстовым фрагментом? Для чего используется кнопка Организатор в диалоговом окне Стиль?

14.Как создать новый стиль, если вам это требуется?

15.Как создать фоновую окраску (тонирование) HTML-документа? Как выбрать цветовой оттенок для фона?

16.Можно ли создать в HTML-документе текстурный рисунок? Как выбрать одну из имеющихся в наличие текстур? Можно ли создать новую текстуру?

17.Какими способами можно разместить рисунок на полосе HTML-документа? Как это делается на практике?

18.Активизируйте команды меню Вставка и попробуйте выбрать те из них, которые не потребуются в режиме редактирования HTML-документа. Проверьте правильность вашего выбора.

19.Можно ли вставить в документ в этом редакторе видеоклип? Как это сделать практически?

20.А можно ли вставить в HTML-документ звуковой фрагмент? Какой именно? Как это сделать?

21.Вспомните, какие формы были рассмотрены во второй главе? Что это такое и зачем они нужны? Есть ли в данном редакторе средства для работы с формами? Если есть, то какие именно формы и как их вставить в содержание HTML-документа?

22.Сможете ли вы вставить какие-либо формы в документ? Попробуйте вставить область для ввода нескольких строк текста. Попытайтесь также сделать в своем документе бегущую строку. Какие диалоговые окна вы использовали в процессе своей работы с этими формами?

23.Можно ли редактировать с помощью Word 97 исходный HTML-код документа? Если да, то что для этого требуется предварительно сделать?

24.Чем отличаются друг от друга HTML-редакторы 1-ой и 2-ой групп? К какой группе относится редактор Word 97, работающий в режиме редактирования HTML-документов?

25.Перечислите известные вам HTML-редакторы 1-ой группы. С какими из них вы знакомы? Работали? Какой из них, по вашему мнению, лучше и почему?

26.Попробуйте сравнить как HTML-редакторы Word 97 и Netscape Composer. С каким из них, по вашему мнению, удобнее работать и почему? Какой из них представляется вам более мощным?

27.Как подготовить гипертекстовый документ в формате PDF? Какой программный пакет можно для этого использовать?

28.В каких случаях используется формат PDF? Вам приходилось сталкиваться с файлами этого формата? Когда он предпочтительнее?

29.Какие средства используются для подготовки анимационных файлов в формате GIF? В чем их важное достоинство?

30.Каковы цветовые возможности анимационных GIF-файлов? Как оптимизируется такой файл, и какие средства сжатия в нем используются?

31.Какие особенности вы можете указать у интегрированного программного пакета Photoshop – ImageReady? Что можно сказать относительно уровня интеграции и способов обмена файлами внутри него?

32.Чем отличается набор палитр в пакете ImageReady от Photoshop? Какие новые палитры появились в ImageReady? Для чего они предназначены? В чем особенности интерфейса ImageReady?

33.Какими способами возможно создавать анимационные файлы в пакете ImageReady? Чем отличаются они друг от друга и можно ли их использовать совместно?

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

35.Что вы можете сказать по поводу диалогового окна Tween? Как оно используется в процессе создания анимации?

36.Как создавать анимацию, изменяя степень прозрачности объекта? Какие параметры задаются в диалоговом окне Tween?

37.Каким образом задаются параметры GIF-анимации? Можно ли ускорить или замедлить появление отдельных кадров изображений?

38.Какие средства предусмотрены в интегрированном пакете для оптимизации анимации? Какие палитры, команды и диалоговые окна при этом используются? Можете ли вы сформулировать, какими путями осуществляется оптимизация? Используются ли при этом цветовые палитры, размещенные внутри файла и каким образом?

39.Можно ли иначе создать анимационный файл в интегрированном пакете Photoshop-ImageReady? Как при этом используется Photoshop?

40.Можно ли редактировать ранее созданную в любом пакете GIF-анимацию с помощью этого интегрированного пакета? Если да, то каким образом можно это сделать? Как при этом используется каждый из пакетов, входящих в интегрированную пару?