Электронные издания - Владимир Вуль

Следующая версия этого пакета 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 кадров, активен из них самый первый. В нижней части этой палитры предусмотрены органы управления видеоплеером. Нажав на кнопку Проигрывание (светлый треугольник, острый угол которого направлен вправо) мы увидим последовательную активизацию кадров в палитре при одновременном изменении положения самолета в верхней части рисунка.