Уменьшение количества цветов

Для представления графики в Internet широко используются индексированные изображения. Они, как вы помните, позволяют передавать до 256 фиксированных цветов. Набор цветов изображения (палитра) хранится в файле вместе с изображением и используется браузером для демонстрации.

Изображения с индексированным цветом получают из полноцветных изображений путем уменьшения количества цветов. Как же передать 16 млн цветов полноцветного изображения 256-ю цветами индексированного? Для этого существует операция, называемая сглаживанием (dithering). Сглаживание построено на том же обмане зрения, что и типографская печать: несколько расположенных рядом точек разных цветов, будучи достаточно мелкими, производят впечатление точки "суммарного" цвета. Отличие изображения после типографской печати от индексированного только в том, что в первом случае используются четыре краски, а во втором — 256. Photo-shop в диалоговом окне Indexed Color, которое появляется после выполнения команды Image/Mode/Indexed Color... позволяет выбрать один из трех (Рисунок 9.2) вариантов сглаживания (или настройки цветов):

§ Pattern. Каждому из 16 млн. цветов сопоставляется определенная комбинация пикселов, имеющихся в палитре индексированного изображения. При пристальном рассматривании такая имитация выглядит как узор из цветных точек.
§ Diffusion. При таком алгоритме сглаживания происходит поочередное перекодирование каждого пиксела. После того, как выбрана подходящая комбинация индексированных цветов для представления первого пиксела, анализируется следующий. Вместо него добавляются пикселы, цвет которых вместе с цветом предыдущих даст требуемый. Эта операция проделывается со всеми пикселами изображения. Применение данного способа дает более привлекательный результат, поскольку не создает назойливо повторяющегося узора.
§ Noise. Как и Diffusion, дает случайное распределение пикселов, но гарантирует от проявления "узоров" в плавных градиентных переходах и погрешностей по краям изображения.
§ None. Этот метод сглаживания суть отсутствие сглаживания. В этом варианте для каждого цвета просто подбирается наиболее близкий из имеющейся палитры цветов. Это неминуемо приводит к сильному искажению цветов и применяется только в тех случаях, когда их количество лишь немного превышает 256.

Автоматические фрагменты

Вы определили фрагмент, который хотели бы иметь в виде отдельного изображения (и файла). Поскольку фрагменты могут иметь только прямоугольную форму, программа автоматически создала еще два фрагмента. Фрагменты, созданные пользователем (пользовательские) и автоматические, имеют для ImageReady разные свойства. Программа не может изменить расположение и размер тех фрагментов, которые создал пользователь. За размером и размещением автоматических фрагментов следит сама программа. Если вы измените размер пользовательского фрагмента, то все соседние автоматические фрагменты сами изменятся таким образом, чтобы не возникало "дырок" и перекрываний. Автоматические фрагменты имеют в левом верхнем пиктограммы серого цвета, а пользовательские — других цветов. Автоматические фрагменты отображаются более приглушенными цветами, чем пользовательские. Границы между автоматическими фрагментами отображаются пунктирной линией, а между пользовательскими — сплошной (Рисунок 10.32, б).

1. Выберите на палитре инструментов инструмент Slice Select. Он используется для уточнения размеров и положения фрагментов-
2. Щелкните курсором мыши в пределах созданного вами фрагмента. Этот фрагмент выделен. Изображение внутри выделенного фрагмента, будь он автоматическим или пользовательским, всегда показывается в оригинальной цветовой гамме. Его рамка приобрела восемь манипуляторов, которые используются для масштабирования.
3. Перетащите правый боковой манипулятор рамки немного вправо. Фрагмент увеличился по горизонтали. Автоматический фрагмент справа стал уже, а фрагмент снизу — шире. ImageReady самостоятельно скорректировал их размеры так, чтобы количество фрагментов оставалось прежним (Рисунок 10.33). Верните пользовательскому фрагменту исходный размер. Автоматические фрагменты снова скорректирует программа.
4. Щелкните курсором мыши в пределах правого автоматического фрагмента. Изображение внутри фрагмента стало ярким, фрагмент выделен. Обратите внимание, что рамка автоматического фрагмента не имеет манипуляторов, поскольку его размер устанавливается программой.
5. Автоматический фрагмент можно легко преобразовать в пользовательский. Выберите команду Promote to User-slice из меню Slices или контекстного меню, открывающегося щелчком курсором с помощью правой кнопки мыши в пределах автоматического фрагмента. Фрагмент приобрел манипуляторы масштабирования, и пиктограммы в его левом верхнем углу перекрасились в синий цвет.
6. Переместите левый боковой манипулятор выделенного фрагмента вправо. Поскольку ImageReady теперь не поддерживает его размер автоматически, перемещение границы фрагмента приведет к появлению дополнительного автоматического фрагмента, закрывающего возникшую "дырку" (Рисунок 10.34).

Фон Webстраницы

Фон Web-страницы

Как вы увидите позже, ImageReady позволяет создавать довольно сложные элементы и генерирует для них столь же сложный HTML-код. Часто удобнее всего взять его за основу страницы и добавить в специализированном редакторе остальные элементы. В таком случае удобно задать прямо в ImageReady один из главных атрибутов любой Web-страницы — фоновый цвет или текстуру. Он во многом определяет и то, как будет смотреться на странице изображение, над которым вы работаете. Задав фон в ImageReady вы получаете возможность сразу оценить вид изображения на выбранном фоне, используя команду Previewin.

1, Выберите команду HTML Background из меню File. Она открывает одноименное диалоговое окно, представленное на Рисунок 10.25.

GIFанимация

GIF-анимация

Завершим эту главу примером создания несложного баннера, в котором использована GIF-анимация. Для создания анимационных изображений ImageReady предлагает особый инструмент — палитру Animation (Рисунок 10.56). Палитра содержит миниатюры всех фаз анимации и управляет их очередностью и просмотром. Создание анимации во многом похоже на создание ролловеров. Основное отличие заключается в том, что состояний изображения может быть сколько угодно.

Рисунок 10.56. Палитра Animation

Градиентные заливки

Один из главных сюрпризов для начинающего пользователя Image Ready состоит в том, что в программе нет инструмента Gradient, без которого пользователь Photoshop не мыслит свою работу. Вместо инструмента разработчики снабдили Image Ready эффектом Gradient/Pattern, который применяется к слою, как и Drop Shadow, Bevel and Emboss и др. В этом есть определенное преимущество для Web-дизайнера, поскольку градиенты оказываются свободно редактируемыми.

1. Активизируйте слой Ocean в палитре Layers.
2. Нажмите кнопку с изображением буквы Т в нижней части палитры Layers, она открывает список доступных эффектов.
3. Выберите эффект Gradient/Pattern Вместо кнопки в палитре Layers можно было бы воспользовачься и командой Gradient/Pattern из списка Effects, вложенного в меню Layer. В документе появился линейный градиент с цветами по умолчанию Обратите внимание на появление строки этого эффекта у слоя Ocean в палитре Layers
4. Палитра Layer Options/Effects (которая теперь называется Gradient/Pattern) представляет собой упрощенный вариант диалогового окна GradientEditor в Photoshop (рис 10.15). Она тоже позволяет создавать градиенты с произвольным количеством промежуточных цветов и редактировать эти цвета. Список Gradient Style предлагает только два типа градиента линейный и радиальный. Оставьте градиент линейным Ползунок Angle задает угол линейного градиента (для радиального угол не имеет смысла и ползунок недоступен); сделайте угол равным 90°.

Интерактивные графические элементы для WWW

Хотя Photoshop 5.0, бесспорно, являлся одним из главных инструментов каждого профессионального Web-дизайнера, он не мог решить многие из повседневных задач, в первую очередь таких, как:

§ Создание анимационных GIF-изображений.
§ Создание интерактивных элементов навигации: кнопок и панелей.
§ Оптимизация изображений при экспорте в форматы, принятые в Internet;
§ GIF и JPEG. "Штатные" фильтры экспорта не позволяли достичь требуемой компактности графических файлов.
§ Создание карт ссылок на основе изображений.
§ Разрезание изображений на фрагменты, их независимая обработка и последующая сборка на Web-странице.

Для решения этих задач Web-дизайнеру приходилось использовать либо подключаемые модули для Photoshop сторонних фирм, либо вообще отдельные приложения. Фирма Adobe, зная о нуждах Web-дизайнеров, предложила |им отдельный редактор точечных изображений ImageReady 1.0. Он представлял собой Photoshop, облегченный за счет изъятия некоторых инструментов и функций, которые применяются при подготовке изображений для полиграфического тиражирования. Особенно это относится к цветовой и тоновой коррекции, управлению цветом, работе с каналами, печати. При этом существенно удешевилась программа и, кроме того, в нее были внесены дополнения, необходимые именно для Web-дизайнера, в первую очередь, связанные с оптимизацией изображений. Судя по всему, программа не пользовалась достаточной популярностью, поскольку была лишена той гибкости и богатства возможностей, которые обеспечили Photoshop безусловное лидерство на рынке. Первая версия ImageReady стала последней ее самостоятельной версией. Новый вариант ImageReady 2.0 стал частью Photo-shop 5.5. Таким образом, пользователям Photoshop не пришлось расставаться с любимой программой для реализации недостающих функций.

Примечание
Примечание
Подчеркнем, что ImageReady используется только в сфере Web-дизайна Если вы готовите материалы для полиграфического тиражирования, то можете не устанавливать этот компонент и не читать настоящую главу.

Интерфейс ImageReady

Перед вами главное окно Image Ready (Рисунок 10.2). В первый момент его легко перепутать с Photoshop, настолько похожи они внешне: та же панель инструментов, знакомые палитры. Как мы уже отмечали, такое сходство не случайно. Более внимательный взгляд отметит и множество особенностей. Во-первых, это несколько особых инструментов на палитре инструментов (Рисунок 10.3).

§ Инструмент Rounded Rectangle Marquee. Он предназначен для создания выделенных областей в форме прямоугольника со скругленными углами. Палитра свойств Options для этого инструмента содержит поле Radius, в котором задается радиус округления в пикселах.
§ Инструменты Rectangle, Rounded Rectangle и Ellipse сразу рисуют прямоугольник, прямоугольник со скругленными углами и эллипс, соответственно. Выделенная область при этом не создается, а фигура сразу оказывается залита текущим основным цветом.
§ Инструмент Slice предназначен для разрезания изображений на прямоугольные фрагменты, a Select Slice — для выделения таких фрагментов.

Кроме того, на панели инструментов имеются кнопки режимов Show Slices и Hide Slices, соответствующие одноименной команде-переключателю из меню Slices. В первом режиме отображаются границы фрагментов, на которые разрезано изображение, а во втором — нет (Рисунок 10.4).

Эффекты для слоев

Придадим территории всего континента эффект Drop Shadow, знакомый вам по Photoshop. В Image Ready для получения эффектов используются несколько иные элементы управления.

1. Перейдите к слою Europe в палитре Layers.
2. Нажмите кнопку с изображением буквы "f" в нижней части палитры Layers, она открывает список доступных эффектов.
3. Выберите эффект Drop Shadow. Вместо кнопки в палитре Layers можно было бы воспользоваться и командой Drop Shadow из списка Effects, вложенного в меню Layer.
4. Строка слоя Europe в палитре слоев приобрела дополнительную подстроку эффектов Effects. Расположенная на этой строке слева треугольная стрелка разворачивает список ассоциированных со слоем эффектов. Пока это только эффект Drop Shadow (Рисунок 10.13).

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

5. После добавления эффекта палитра Layer Options сменила свое название на Drop Shadow. Активизируйте ее (рис 10.14). Если такой палитры на экране нет, то откройте ее командой Show LayerOptions/Effects из меню Window. Она содержит настройки текущего эффекта, строка которого выделена в палитре Layers.

Карты ссылок

Изображения на Web-страницах часто используются как карта ссылок (image map). Щелчки курсором мыши в окне браузера на различных участках такого изображения приводят к загрузке разных страниц. Для реализации этого механизма отдельным фрагментам изображения необходимо сопоставить различные гипертекстовые ссылки.

Создадим изображение в Photoshop на основе карты Европы, которую мы создали. На карте цветом выделены несколько стран, в которые некая фирма организует туры. Изображение будет размещено на сайте этой фирмы и будет служить картой ссылок на страницы с подробной информацией о каждом туре. Иными словами, щелчок курсором мыши на территории каждой страны в этой карте должен приводить к отдельной Web-странице.

ImageReady предлагает удобный способ создания карт ссылок. Она автоматически генерирует необходимый код на основе разбивки на фрагменты, выполненной пользователем. Каждый фрагмент, которому назначается отдельная ссылка, должен занимать свой слой. Таким образом, URL-ссылка является атрибутом слоя. Для его ввода используется палитра Layer Options/Effects.

1. Откройте документ europe.psd и сохраните его под именем europe_map.psd с помощью команды Save As из меню File.
2. В палитре Layers выделите слой, соответствующий территории одной из стран, например, Holland.
3. В палитре Layer Options/Effects установите флажок Image Map. Он включает режим создания карты ссылок и открывает поля Shape и URL.
4. В поле URL вводится ссылка на какой-либо сетевой ресурс, которая сработает при щелчке курсором мыши на выбранном объекте в браузере. Допустим, вы предполагаете, что должна открыться страница holland.html, расположенная на сервере в том же каталоге, что и изображение с картой ссылок. В этом случае достаточно просто ввести имя файла документа в поле URL. Введите в это поле "holland.html".
5. Список Shape предоставляет выбор формы области изображения, откликающегося на щелчок курсором мыши в браузере. Это может быть прямоугольник (Rectangle), круг (Circle) или многоугольник (Polygon). Если форма фрагмента близка к одному из первых двух примитивов, то выбирайте соответствующий. Если форма области изображения более сложная, как и в нашем случае, то выберите последний вариант. Испльзование прямоугольной или круглой форм предпочтительно, поскольку приводит к генерации более компактного HTML-кода, а следовательно и более быстрой загрузке страницы.
6. Аналогичным образом введите имена документов для остальных стран. В качестве имени документа исполльзуте имя слоя . Обратите внимание, что имя показывается в палитре слоев непосредственно под именем каждого слоя (Рисунок 10.48.)

Обработка событий

Элементы дизайна, о которых идет речь, изменяют свое состояние (внешний вид) в браузере в зависимости от нескольких возможных событий:

§ Отсутствие событий — обычное состояние (событие Normal или Out). П Курсор мыши находится на элементе — событие Over или Up.
§ Курсор мыши находится на элементе и нажата левая кнопка мыши — событие Down.
§ Курсор мыши находится на элементе, левая кнопка мыши отпущена — событие Click.

На английском языке такие элементы называются rollovers (roll over = перекатываться, переворачиваться). К сожалению, в русском языке эквивалент этого термина отсутствует, а Web-дизайнеры называют их между собой ролловерами. Так мы и будем называть их далее, да простят нам столь прямое заимствование.

Ролловер в действительности представляет собой не одно, а несколько (до четырех) изображений. При возникновении перечисленных событий браузер заменяет одно из этих изображений другим. С каждым событием ассоциируется одно изображение. Совершенно не обязательно обрабатывать все четыре события и создавать четыре изображения. На практике чаще всего обходятся двумя: событиями Normal и Over. Обработкой этих событий, их регистрацией и загрузкой изображений, как раз и занимается сценарий JavaScript.

Определение фрагментов

1. Откройте изображение Europe.psd и сохраните под именем Europe sliced, psd в вашей рабочей папке.
2. Включите режим отображения Show Slices нажатием одноименной кнопки на палитре инструментов. Как видите, даже если изображение не разрезано, ImageReady считает его разрезанным, правда на единственный "кусок" Об этом говорит окаймляющая его рамка с порядковым номером фрагмента и специальной пиктограммой фрагмента (рис 10 31).

Определение состояний

Изображение подготовлено к созданию ролловеров. Теперь необходимо определить, в каких состояниях ролловеров что будет отображаться в браузере.
1. В палитре Layers отключите видимость всех слоев изображения, за исключением слоя Europe. Быстрее всего это сделать, щелкнув мышью на пиктограмме видимости слоя Europe и удерживая при этом клавишу <Alt>.
2. Выведите на экран палитру Rollover командой Show Rollover из меню Window. Она изображена на Рисунок 10.52. Основное пространство палитры занимают миниатюры состояний ролловера. Всегда определено только одно из них — Normal. В нижней части палитры находятся кнопки создания нового состояния (с изображением страницы), удаления существующего (с изображением мусорного ведра) и кнопка списка фрагментов.

Оптимизация анимации

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

Для всех кадров анимации используются одинаковые параметры оптимизации, включая индексированную палитру. Параметры оптимизации устанавливаются в палитре Optimize.

1. Перейдите на вкладку Optimized в окне документа, чтобы следить за результатом оптимизации.
2. В палитре Optimize установите палитру Selective.
3. Достаточным количеством цветов будет 16. Установите его в списке Colors.
4. Отмените сглаживание, выбрав в списке Dithering Algorithm вариант No Dither. Это сделает файл более компактным и совсем не ухудшит качества изображения.

Мы задали достаточно жесткий режим оптимизации, но он вполне оправдан. Исходное изображение самолета само по себе содержит совсем немного цветов и плавных цветов переходов. Размер файла после оптимизации написан в строке состояния окна документа: 11,85 Кбайт. Это вполне приемлемый размер для баннера.

Для GIF-анимации существуют и особые алгоритмы оптимизации.

1. Выберите команду Optimize Animation из меню палитры Animation. Она открывает одноименное диалоговое окно, предлагающее два направления оптимизации. Первое состоит в автоматической обрезке каждого кадра изображения, чтобы в нем оставались только изменившиеся области Второй путь состоит в удалении всех пикселов, которые не изменяются от кадра к кадру. Оба способа оптимизации приносят очень существенный выигрыш для большинства анимаций и мы рекомендуем их использовать.
2. Нажмите кнопку ОК. Анимация оптимизирована.

Оптимизация фрагментов

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

1. Для начала зададим единые параметры оптимизации для всех фрагментов. Перейдите на вкладку Optimized в окне документа.
2. Выделите все фрагменты командой All Slices из меню Select Если вы не можете обнаружить в меню Select такой команды, то включите режим показа фрагментов нажатием кнопки Show Slices на палитре инструментов или клавиши <Q> на клавиатуре.
3. В палитре Optimize выберите формат GIF, палитру Selective, режим сглаживания Diffusion и степень сглаживания 100% (мы хотим максимального качества). Установите количество цветов равным 16.
4. Спрячьте границы фрагментов нажатием кнопки Show Slices на палитре инструментов или клавиши <Q> на клавиатуре. Посмотрите на результат оптимизации. Границы фрагментов проступают достаточно четко (рис 10.41)

Оптимизация изображений

Полученное изображение непригодно для использования в Internet, поскольку находится в формате PSD и занимает уйму (по меркам сети) места, 370 Кбайт. Займемся его оптимизацией и экспортируем в один из форматов поддерживаемых браузерами.

1. Откройте палитру Optimize командой Show Optimize из меню Window.
2. В окне документа перейдите на вкладку Optimized. Перед вами результат оптимизации изображения в соответствии с параметрами, представленными в палитре Optimization. Изменение этих параметров приведет к немедленному обновлению изображения на вкладке Optimized в окне документа.
3. В списке Optimized file format выберите формат JPEG.
4. Перемещайте ползунок Quality справа (высокое качество) налево (низкое качество) до тех пор, пока не заметите появления нежелательных артефактов. У нас заметное проявление характерной "грязи" случилось примерно при 50%-ном значении качества.
5. Попытайтесь удалить артефакты предварительным размыванием изображения с помощью ползунка Blur. Следите за тем, чтобы изображение не слишком потеряло в резкости. Приемлемой величиной размывания будет 0,1—0,13 пиксела.
6. Взгляните на строку состояния в окне документа. Там отображается текущий размер оптимизированного файла (22 Кбайт) и оценка времени его загрузки (~9 сек) при выбранной скорости модема (28,8 Кбит/сек).

Совет
Совет
Если в строке состояния отображается что-то другое, то щелкните на черной треугольной стрелке, направленной вниз. Она открывает список информационных полей, которые могут отображаться строкой состояния. Это Original/OptimizedFile Sizes (начальный/конечный размеры оптимизированного файла), Optimized Information (информация об установках оптимизации). Image Dimensions (размеры изображения в пикселах), WatermarkStrength (яркость цифровой метки, см. гл. 13), Undo/Redo Status (количество шагов отмены и повторения в буфере ImageReady), Originalin Bytes (точный размер исходного изображения в байтах), Optimized in Bytes (точный размер оптимизированного файла в байтах), Optimized Savings (выигрыш от оптимизации в процентах) В этом же списке находятся типичные скорости модемов: 14,4; 28,8; 56,6 Кбит/сек. Выбор скорости оказывает влияние на оценку времени загрузки изображения в браузер. В общем случае разумно ориентироваться на скорость 28,8 Кбит/сек.

В результате оптимизации мы получили весьма существенный (94%) выигрыш в размере файла, сохранив приемлемое качество изображения. Но наилучшим ли способом проведена оптимизация? Может быть лучше использовать формат GIF?

1. Перейдите на вкладку 2-Up в окне документа. Перед вами одновременно оригинал (слева) и оптимизированное изображение (справа).
2. Щелкните курсором мыши в пределах левой половины окна документа. Это сделает активным оригинал изображения.
3. В списке Settings палитры Optimized выберите вариант GIF 32 Dithered.Это предустановленный вариант оптимизации в индексированный формат с 32-цвегной палитрой. Результат оптимизации находится в активной (левой) половине окна на месте оригинального изображения. С точки зрения размера файла (18 Кбайт) она явно эффективнее. Имея перед глазами результат одновременно двух вариантов оптимизации, вы можете выбрать наиболее подходящий.

4. При сравнении вариантов можно воспользоваться функцией предварительного просмотра изображения в браузере. Для этого следует выбрать команду Preview in из меню File. Она открывает список браузеров, установленных на вашем компьютере. ImageReady автоматически создаст временный оптимизированный файл изображения и необходимый для его демонстрации HTML-код, который и загрузит в браузер.
В принципе, вы можете еще поэкспериментировать с настройками оптимизации GIF: изменить размер палитры, степень сглаживания, параметр качества. Проделайте эту работу и оцените качество с точки зрения посетителя сайта. Сравните результат с предыдущим вариантом оптимизации в формат JPEG. Какой из них смотрится более выгодно и имеет меньший размер? Можно ли пренебречь потерей в качестве в пользу меньшего размера? Ответы на эти вопросы достаточно субъективны и давать их придется вам.

Примечание
Примечание
При оптимизации индексированных изображений часто приходится работать с их палитрой напрямую: редактировать цвета, приводить их полностью или частично к палитре Web, выборочно удалять цвета. Все эти манипуляции позволяет производить палитра Color Table. Работа с ней абсолютно идентична работе со вкладкой Color Table в модуле экспорта SaveFor Web Photoshop. По этой причине мы не будем повторяться и рассматривать ее в ImageReady.

1. Выберите наиболее подходящий вариант оптимизации щелчком курсором мыши в соответствующей половине окна документа.
2. Выберите команду Save Optimized As меню File.
3. В открывшемся окне введите имя оптимизированного файла, например "Europe_map", и нажмите кнопку Save. На многочисленных дополнительных настройках этого диалогового окна остановимся позднее. Оптимизированное изображение сохранено.
Подчеркнем, что если окно документа находится в режиме 2-Up или 4-Up, то команды Save Optimized и Save OptimizedAs (они отличаются точно так же, как Save и Save As) сохраняют тот: вариант документа который находится в активной части окна документа.
Какие варианты оптимизации будут отображаться в режимах Optimized, 2-Up и 4-Up окна документа, определяется установками программы Соответствующее диалоговое окно открывается командой Optimization из списка уста новок Preferences, находящегося в меню File (рис 10.24)

Оптимизация ролловеров

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

1. Выделите все фрагменты изображения командой All Slices из меню Select.
2. В палитре Optimize выберите формат JPEG из списка OptimizedFile Format и установите ползунок Quality посередине.
3. Перейдите на вкладку Optimized окна документа и убедитесь в приемлемости качества оптимизированного изображения. Оптимизация проделана.
4. Используйте команду Preview in из меню File для того, чтобы протестировать получившиеся ролловеры. Перемещайте курсор мыши по карте и наблюдайте появление фотографий (Рисунок 10.54).

Организация ссылок

Теперь, когда изображение разрезано на требуемое количество фрагментов, их надо ассоциировать с соответствующими документами. Для этого предназначена специальная палитра Slice (Рисунок 10.38). Если ее нет на экране, то выберите команду Show Slice из меню Window.

Особые инструменты ImageReady

Особые инструменты ImageReady

Создание изображений в Image Ready имеет ряд особенностей, которые следует учитывать. Возможности Image Ready несколько отличаются от Photoshop. Например, корректирующие слои ставшие давно привычными в Photoshop, отображаются в Image Ready, но недоступны для редактирования. С другой стороны, Image Ready, например, предоставляет два дополнительных эффекта для слоев (Color Fill и Gradient/Pattern), которых нет в Photoshop. При переносе в Photoshop изображения с такими эффектами последние просто пропадают. Подобные "чудеса интеграции" следует знать и учитывать в процессе работы в обеих программах.

Подготовка изображений

Для создания ролловера требуется создание серии изображений. Этим и займемся в настоящем разделе. Для примера добавим ролловеры к карте Европы, которую вы раскрашивали при изучении первого раздела. Пусть при размещении курсора мыши в браузере над территорией изображенных на карте стран, появляются фотографии с их видами. Для решения этой задачи кроме изображения карты нам понадобятся фотографии с характерными видами. Эти фотографии находятся на прилагаемой дискете: england.jpg, Sweden.jpg, france.jpg, holland.jpg, germany.jpg и italy.jpg.

1. Откройте документ europe.psd и сохраните его под именем europe_ rollover.psd с помощью команды Save As из меню File.
2. Сведите слои изображения командой Flatten Image из меню Layer.
3. Откройте все шесть файлов с видами стран.
4. Выберите инструмент Move из палитры инструментов.
5. Скопируйте каждый из них на отдельный слой документа europe_sliced.psd, перетаскивая с помощью мыши изображение из окна очередного документа или его палитры слоев.
6. Дайте каждому слою имя, совпадающее с названием страны, вид которой изображен на фотографии (England, Sweden, France, Holland, Germany и Italy). Слой с картой назовите Europe. На эти имена и будем ссылаться в дальнейшем.
7. Чтобы точно разместить изображения на карте, построим несколько направляющих. ImageReady имеет для этого замечательную команду Create Guides из меню View. Она открывает диалоговое окно, изображенное на Рисунок 10.49.

Подготовка изображения

Баннер, который мы создадим, будет изображать летящий самолет, оставляющий за собой рекламную надпись (Рисунок 10.57).

Предварительный просмотр

Предварительный просмотр

Изображение разрезано. Функция Preview in позволяет протестировать сборку изображения и ссылки еще до экспорта HTML-кода и фрагментов самого изображения.

1. Выберите установленный на вашем компьютере браузер из списка Preview in, находящегося в меню File. ImageReady запустит выбранный браузер и загрузит в него изображение по фрагментам. Ниже изображения вы увидите весь HTML-код, который понадобился для этого.
2 Подведите курсор мыши к любой из выделенных цветом стран Он примет вид, характерный для гипертекстовой ссылки Рядом с курсором возникнет подсказка, которую ImageReady автоматически сгенерировал из имен слоев. В результате, пользователь сразу увидит название страны, на которую указывает курсором В строке состояния браузера вы обнаружите ту фразу, которую ввели в поле Message палитры Slice.
3. Нажмите левую кнопку мыши и не отпускайте ее. Если вы пользуетесь Microsoft Internet Explorer версии 4.0 и выше, то увидите границы текущего фрагмента.
4. Отпустите кнопку мыши. Браузер попытается открыть документ, соответствующий ссылке, но не сможет этого сделать и выдаст ошибку №404 Если вы хотите серьезно протестировать ссылки, то вам все-таки придется сохранить документ.

Проблемы интеграции Photoshop и ImageReady

О том, насколько хорош ход, сделанный Adobe, можно поспорить. Вместо одной программы, Web-дизайнеру все равно приходится пользоваться двумя. Это не просто недостаточно удобно, но и приводит к неоправданной трате ресурсов компьютера: разработчики рекомендуют при одновременном использовании обоих компонентов дополнительные 32 Мбайт оперативной памяти и больше дискового пространства (для размещения виртуальной памяти обеих программ). Трата ресурсов эквивалентна дополнительному вложению денег в оборудование и потерям времени на переключение между приложениями. Что бы не говорили рекламные буклеты об интеграции Photoshop и ImageReady, это все-таки отдельные программы. Даже передача изображений из одной программы в другую происходит через файл на диске. Поэтому перед передачей изображения текущий документ необходимо сохранить на диске.

1. Создайте в Photoshop новый документ небольшого размера.
2. Нажмите кнопку Jump to default graphics editor or application на панели инструментов или нажмите комбинацию клавиш <Ctrl>-<Shift>+<M>. Таким образом осуществляется переключение между программами. Photoshop выдаст сообщение о необходимости сохранить документ в файл (Рисунок 10.1).

Расчет промежуточных фаз

Мы определили начальную и конечную фазы анимации. В первой фазе самолет еще не "прилетел", а в последней уже "улетел" и открыл рекламную надпись. А теперь почти фокус:

1. Выделите в палитре Animation миниатюры обеих фаз, щелкнув на каждой из них, и нажав клавишу <Ctrl>.
2. Выберите команду Tween из меню палитры Animation. Она открывает диалоговое окно, изображенное на Рисунок 10.59. Переключатель Layers переведите в положение All Layers, в группе Parameters установите только флажок Position, в поле Frames to Add введите число 10.
3. Нажмите кнопку ОК. ImageReady автоматически построит промежуточные кадры между двумя выделенными.
4. Теперь можно и посмотреть на готовую мультипликацию. Нажмите кнопку проигрывания анимации (треугольная стрелка вправо) в нижней части палитры Animation и посмотрите на результат в окне документа Вокруг кнопки проигрывания находятся еще четыре кнопки управления просмотром анимации, аналогичный тем, что вы видели на пульте управления проигрывателем компакт-дисков Это (левее) кнопка остановки. перехода к предыдущему кадру и к первому кадру. Справа находятся кнопки перехода к следующему и к последнему кадру.

Разбивка фрагментов

Теперь разрежем изображение на фрагменты, соответствующие территории стран.

1. Выделите правый фрагмент (фрагмент №3) с помощью инструмента SliceSelect.
2. Выберите команду Divide Slice из меню Slices или контекстного меню, открывающегося щелчком курсором с помощью правой кнопки мыши на выделенном фрагменте. Команда открывает одноименное диалоговое окно, представленное на Рисунок 10.35. Команда разбивает уже созданный фрагмент на несколько пользовательских фрагментов, а в диалоговом окне задаются параметры разбиения. Оно состоит из двух областей Divide Horizontally Into и Divide Vertically Into, в которых одинаковым способом задаются параметры горизонтального и вертикального разбиения соответственно.

Разбивка по заданному направлению включается флажком в верхней части области. Разбивку можно производить исходя из количества фрагментов одинаковой высоты (ширины), умещающихся в исходном фрагменте или размера получающихся фрагментов. В последнем случае используются поля ввода pixels perslice, где задаются размеры фрагментов по горизонтали (верхняя область) и вертикали (нижняя область). Если размер исходного фрагмента не делится точно на введенный, то последний фрагмент будет иметь меньший размер. В первом случае используются поля ввода slices down/across, evenly spaced. В верхней области задается количество фрагментов по горизонтали, а в нижней — по вертикали.

Разрезание изображений

Разрезание изображений

На Web-страницах изображения часто используются для организации меню. Щелчок в разных участках изображения приводит в действие различий гипертекстовые ссылки. Наиболее очевидным путем реализации такого элемента навигации является разрезание изображения на отдельные фрагменты (slice). После того как изображение разрезано, его можно собрать на странице, используя таблицы HTML Выполнение такой работы вручную весьма длительная и нетворческая работа. ImageReady может выполнить самую трудную ее часть за вас!

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

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

2. Поместите курсор мыши на миниатюру выделенного кадра.
3. Нажмите левую кнопку мыши.
4. Перемещайте мышь к соседнему кадру. Когда курсор мыши будет оказываться в промежутках между кадрами, вы увидите жирную вертикальную линию, точку вставки. Она показывает, куда будет помещен выделенный кадр, как только вы отпустите кнопку мыши.
5. Переместите кадр перед соседним, а затем верните его назад.
Вы можете отредактировать и компоненты изображения, не рискуя повторять это для каждого кадра.
1. Выделите слой с рекламным текстом в палитре Layers.
2. В палитре Type измените шрифт на какой-нибудь другой. Поскольку анимация основана на слоях изображения, шрифт изменится во всех кадрах анимации.
3. С помощью инструмента Move исправьте положение текста так, чтобы он оказался точно посередине документа. Положение текста изменится только в текущем кадре анимации.
4. Чтобы текст занял ту же позицию и в других кадрах, выберите команду Match Layer Across Frames из меню палитры Animation. Текущее состояние слоя будет распространено на все кадры анимации.

С помощью Image Ready вы можете редактировать и готовые анимации, например из GIF-файлов, которые вы загрузите с чужих страниц. Готовый файл с анимацией можно открыть командой Open и редактировать его так, будто он создан в ImageReady. При открытии анимации программа сама заполнит палитру Animation ее кадрами.

Вы также можете создать анимацию в Photoshop, располагая кадры анимации каждый на своем слое. Затем следует сохранить полученное многослойное изображение в формате PSD и открыть в ImageReady. В меню палитры Animation вы найдете команду Make Frames From Layers. Она автоматически заполнит палитру кадрами анимации, использовав для этого отдельные слои изображения.

предоставляющая возможности разрезания изображений, создания

Резюме

§ Специально для Web-дизайнеров в поставку Adobe Photoshop 5.5 включена программа ImageReady 2.0, предоставляющая возможности разрезания изображений, создания ролловеров, карт ссылок и GIF-анимации.
§ ImageReady очень похожа на Photoshop по внешнему виду и организации функций. Тем не менее, существует ряд особых изобразительных возможностей ImageReady, которые не поддерживаются Photoshop и наоборот.
§ Оптимизация изображений при экспорте изображений в форматы GIF, JPEG и PNG осуществляется с помощью палитр Optimize и Color Таblе. Работа с ними аналогична работе с фильтром Save For Web в Photoshop.
§ Команда Preview in осуществляет предварительный просмотр изображений, ролловеров, и анимации в любом установленном на компьютере браузере.
§ ImageReady предоставляет удобные функции для создания фоновых текстур. К ним относятся фильтры DitherBox и Tile Maker и диалоговое окно HTML Background.
§ ImageReady позволяет разрезать изображения на фрагменты и автоматически генерирует HTML-код для их сборки на Web-странице.
§ ImageReady позволяет создавать ролловеры и автоматически генерирует для них необходимый JavaScript-код.
§ ImageReady позволяет создавать карты ссылок, обрабатываемые клиентом и/или сервером, и автоматически генерирует необходимый HTML-код.
§ Специальная палитра Animation в ImageReady предоставляет все необходимые средства для создания GIF-анимации Программа также позволяет автоматически рассчитывать промежуточные кадры между парой заданных соседних кадров. Поддерживается оптимизация анимационных изображений.

Требование сохранить

Рис 10.1. Требование сохранить файл при переключении между Photoshop и ImageReady

Примечание
Примечание
Для переключения между приложениями в меню File каждого из них имеется специальный список Jump to. Он содержит названия программ, к которым возможно переключение. Программа установки поместит в него ссылки на все приложения фирмы Adobe Illustrator, GoLive, PageMill и др. Вы можете самостоятельно дополнить этот список подходящими программами других производителей, если вам приходится работать с ними. Для этого нужно всего лишь поместить ярлык (shortcut) выбранной программы в соответствующую папку, вложенную в папку \Helpers каталога Photoshop Если вы, например, хотите внести в меню Jump to Microsoft Frontpage, то поместите его ярлык в лапку \Helpers\Jump To HTML Editort.

3. Нажмите кнопку Save и в открывшемся стандартном диалоговом окне сохранения документа введите произвольное имя файла.
4. Нажмите кнопку Save. Документ будет сохранен в файле. Затем автоматически запустится ImageReady (если эта программа не открыта) и документ будет в нее загружен.

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

Несмотря на перечисленные проблемы поверхностной интеграции Photoshop и Image Ready, вместе они дают в руки Web-дизайнера исключительно мощный инструмент. Когда вы приобретете достаточный опыт работы с этой связкой, недостатки их совместной работы покажутся сущей мелочью в сравнении с неограниченными техническими возможностями.

Главное окно ImageReady

Рис 10.2. Главное окно ImageReady

Палитра инструментов

Рис 10.3. Палитра инструментов ImageReady. Обозначены только инструменты, отсутствующие в Photoshop

Режимы отображения фрагментов

Рис 10.4. Режимы отображения фрагментов Hide Slices (a),
Show Slices (б)

Примечание
Примечание
Если выбрать инструмент Slice или Select Slice режим показа фрагментов включается автоматически.

Редактор ImageReady имеет и несколько особых палитр:

§ Optimize. Палитра содержит параметры оптимизации изображений для экспорта в выбранный формат. Если вы внимательно прочитали предыдущую главу, то сразу заметите ее сходство с панелью Settings модуля Save For Web в Photoshop Она содержит все те же самые настройки (Рисунок 10.5).

Палитра Optimize

Рис 10.5. Палитра Optimize

Вид оптимизированного изображения отображается прямо в окне каждого документа Image Ready и обязательно имеет четыре вкладки, аналогичных вкладкам модуля Save For Web (Рисунок 10.6). В строке состояния окна документа указываются текущие параметры оптимизации или иная информация, которая выбирается в списке, открывающемся щелчком на треугольной стрелке. В этом же списке задается предполагаемая скорость модема, использующаяся для оценки времени загрузки изображения в браузере пользователя.

Показ оптимизированного

Рис 10.6. Показ оптимизированного изображения в окне документа Image Ready

§ Color Table. Эта палитра Image Ready показывает текущую палитру изображения, если задан режим оптимизации в индексированный формат (GIF или PNG-8). Она также имеет свой аналог в модуле Save For Web Photoshop и работа с ней тоже аналогична.
§ Layers. Image Ready поддерживает точечные и текстовые слои, а также эффекты для слоев. Управление слоями так же, как и в Photoshop. осуществляется с помощью специальной палитры. Единственное ее отличие от палитры Layers в Photoshop заключается в том, что в ней отображаются и все эффекты, примененные к слою (рис 10.7). Кроме того, и нижнем ряду кнопок добавились стрелки перехода между слоями и добавления эффектов. Поскольку при создании анимации ее фазы размешаются на отдельных слоях, кнопки перехода к предыдущему или следующему слою используются для перемотки кадров. Кнопка добавления эффектов открывает список всех доступных эффектов для слоев Выбор любого из них создает на текущем слое этот эффект. Настройка его параметров осуществляется с помощью особой палитры Layer Options/Effects.
§ Layer Options/Effects. Эта палитра используется совместно с палитрой Layers и позволяет задавать параметры слоя и ассоциированных с ним эффектов. Если в палитре Layers выделена строка эффекта, то в палитре Layer Options/Effects оказываются настройки этого эффекта. Если же выделен слой, то в этой палитре вы найдете параметры слоя (Рисунок 10 8).
Они используются для создания карт ссылок.

Отображение эффектов

Рис 10.7. Отображение эффектов в палитре
Layers программы Image Ready

Палитра Styles спредопределенными стилями

Рис 10.9. Палитра Styles с
предопределенными стилями

§ Type. В Photoshop параметры текста, да и сам тест, вводятся в специальном диалоговом окне Type Tool. В Image Ready ввод и редактирование текста реализованы гораздо удобнее. Текст вводится прямо в окне документа, а для настройки его параметров используется палитра Type. Эта палитра очень знакома пользователям Adobe Illustrator (Рисунок 10.10). В ней вы найдете список шрифтов, их начертаний и кегля, управление выключкой абзацев, интерлиньяжем, кернингом, шириной символов, положением базовой линии. Особо отметим возможность выбора из четырех степеней сглаживания (anti-aliasing).

Палитра Type в ImageReady

Рис 10.10. Палитра Type в ImageReady

§ Animation. Палитра содержит перечень всех кадров анимации и управляет их очередностью и просмотром.
§ Slice- Палитра предназначена для установки параметров отдельных фрагментов, на которые изображение разрезано с помощью инструмента Slice или команды Divide Slice из меню Slices.
§ Rollover. Палитра хранит варианты изображения, демонстрируемого в браузере в зависимости от того, находится ли на нем курсор и нажата ли кнопка мыши.

Палитры Colors, History, Info, Options и Actions почти полностью идентичны одноименным палитрам Photoshop. Правда, палитра History в Image Ready несколько упрощена. В ней отсутствует возможность создания снимков (snapshots) и назначения исходного состояния для кисти HistoryBrush, поскольку Image Ready не имеет такого инструмента.

На этом мы завершим краткое рассмотрение интерфейса Image Ready и его отличий от Photoshop, и перейдем к примерам решения практических задач.

Карта Европы до (а)

Рис 10.11. Карта Европы до (а) и после (б) раскрашивания и добавления текста

1. Запустите программу Image Ready, если она закрыта.
2. Откройте файл Europe, tif, находящийся на прилагаемой дискете.
3. Для удобства раскрашивания разделим изображение на сдои. Выберите двойным щелчком мыши инструмент Magic Wand (обратите внимание на отсутствие команды Color Range в меню Select) в палитре инструментов.
4. В палитре Options установите величину Tolerance примерно 30.
5. Щелкните на голубом пространстве, изображающем океан.
6. Инвертируйте выделенную область командой Inverse из меню Select. Таким образом выделен весь континент.
7. Выберите команду Layer via Cut из подменю New меню Layer или воспользуйтесь клавиатурным сокращением <CtrJ>+<Shift>+<J>. Теперь карта Европы находится на отдельном слое.
8. Разместим выделенные страны на отдельных слоях. Выделите с помощью инструмента Magic Wand одну из стран.
9. Выберите команду Layer via Copy из подменю New меню Layer или воспользуйтесь клавиатурным сокращением <Ctrl>-KJ>. Эта команда также доступна в контекстном меню, открывающемся по щелчку правой кнопкой мыши при указании курсора на выделенную область. Теперь территория страны находится на отдельном слое.
10. Повторяйте шаги 9—10 для всех выделенных стран, пока все они не разместятся на отдельных слоях. Италия и Великобритания имеют островные территории. Для того чтобы выделить их целиком, воспользуйтесь командой Similar из меню Select.
11. Перейдите к слою с изображением всего континента, щелкнув на его строке в палитре Layers. Установите для него флажок Preserve Transparency.
12. В палитре Swatches выберите светло-серый цвет и заполните им всю территорию континента с помощью команды Fill из меню Edit или нажатием клавиш <Alt>+<Backspace>.
13. Перейдите к исходному слою Layer 1 и заполните его белым цветом с помощью команды Fill из меню Edit. В диалоговом окне этой команды установите White в списке Use.
14. Дайте слоям значащие имена. Ocean, Europe, England, Italy, Holland, Germany, Sweden, France. Именно в соответствии с этими именами и будем называть слои далее в тексте. В результате палитра Layers должна приобрести примерно такой вид, как на Рисунок 10.12. Отличаться может только порядок слоев с территориями отдельных стран.

Рисунок 10.12. Структура слоев изображения с картой Европы

Эффект Drop Shadowв палитре слоев

Рис 10.13. Эффект Drop Shadow
в палитре слоев

Палитра Layer Options/Effectsдля

Рис 10.14. Палитра Layer Options/Effects
для эффекта Drop Shadow

6. Список Blend Mode задает режим наложения тени. Оставьте в нем значение Multiply, выбранное по умолчанию. Цвет тени в списке Color тоже пусть останется черным. Ползунок Blur задает размытость тени. Установите значение равным 7 пикселам. Смещение тени относительно объекта на слое, задаваемое ползунком Distance, установите равным 7 пикселам "Густоту" тени установите равной 9% с помощью ползунка Intensity. Прозрачность тени (ползунок Opacity) и угол падения (ползунок Angle) оставьте принятыми по умолчанию: 75% и 120°, соответственно. Как видите, все настройки эффекта тени совпадают с теми, что вы видели в диалоговом окне Effects в Photoshop. В ImageReady роль этого диалогового окна выполняет палитра Layer Options/Effects. Она содержит настройки для всех эффектов.
Эффект Drop Shadow применен. Вы можете в любой момент изменить его параметры. Для этого потребуется выделить строку выбранного эффекта и обратиться к палитре Layer Options/Effects для регулировки настроек.

ПалитраLayer Option/Effects

Рис 10.15. Палитра
Layer Option/Effects для эффекта
Gradient/Pattern

5. Нашей целью является градиент из двух цветов с переходом от темно-синего к голубому. Отредактируем граничные цвета градиента. Сделайте двойной щелчок на маркере в левой части полосы градиента. Перед вами диалоговое окно ColorPicker. Выберите в нем голубой цвет (например, R:102, G:204, B:255, что соответствует цвету #66CCFF в Web-пали гре) и нажмите кнопку ОК. Сделайте двойной щелчок на маркере в правой части полосы градиента. Перед вами диалоговое окно Color Picker. Выберите в нем темно-синий цвет (например, R:51, G:102, В:204, что соответствует цвету #3366СС в Web-палитре) и нажмите кнопку ОК. Градиент приобрел желаемый вид.
6. Движок в форме ромба над полосой градиента в палитре Layer Options/Effects определяет положение средней точки градиента, в которой граничные цвета смешаны в пропорции 1:1. Сместите его слегка вправо, и область темного цвета станет меньше.
7. Вы можете добавлять промежуточные цвета в созданные градиенты. Щелкните курсором мыши примерно посередине между маркерами цветов на полосе градиента в палитре Layer Options/Effects. На месте щелчка появится новый маркер. Он имеет цвет, соответствующий выбранной точке градиента. Изменить его можно с помощью Color Picker так же, как мы сделали для граничных цветов градиента. Лишние промежуч очные цвета легко удалить. Перетащите с помощью мыши средний маркер за пределы палитры, и он будет удален.
Воспользуемся эффектом Gradient для создания фоновой полосы под надписью "EUROPE '99".
1. Создайте новый слой Stripe поверх всех слоев документа нажатием кнопки Create New Layer в нижней части палитры Layers.
2. Выберите на палитре инструментов инструмент Rectangle.
3. Установите черный цвет текущим основным цветом, щелкнув на пиктограмме. Default foreground and background color в палитре инструментов или нажав клавишу <D>.
4. Нарисуйте черный прямоугольник, как показано на Рисунок 10.16. Действуйте так, как если бы текущим был инструмент Marquee. При использовании инструмента Rectangle очерченная область немедленно заливается текущим основным цветом без образования выделенной области.

Прямоугольник нарисован инструментом Rectangle

Рис 10.16. Прямоугольник нарисован инструментом Rectangle

5. Добавьте к слою Stripe эффект Gradient, выбрав соответствующую команду в списке эффектов. Как вы помните, он открывается нажатием кнопки с изображением буквы "f" в нижней части палитры Layers. Полоса приобрела градиентную заливку от черного (слева) к белому (справа).
6. Теперь нам потребуется изменить параметры градиента таким образом, чтобы переход шел от черного не к белому, а к прозрачности. Если бы подобная задача стояла перед нами при работе в Photoshop, то самым очевидным решением было бы создание градиента от черного к прозрачности (см. гл. 3). Обратимся к палитре Layer Options/Effects. Она не имеет никаких средств редактирования прозрачности! Тем не менее выход есть. Сделайте двойной щелчок курсором мыши на пиктограмме слоя Stripe. Перед вами диалоговое окно Layer Options (Рисунок 10.17), содержащее параметры слоя. Настройки в области Options совершенно аналогичны тем, что вы видели в Photoshop. Выберите в списке Mode режим наложения Multiply, а ползунок Opacity установите на отметке 60%. Нажмите кнопку ОК. Эффект достигнут (Рисунок 10.18).

Диалоговое окно Layer Options в ImageReady

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

Для придания градиенту

Рис 10.18. Для придания градиенту прозрачности
использован режим наложения Multiply

Как видите, эффект Gradient в Image Ready далеко не обладает такой гибкостью, как одноименный инструмент в Photoshop. Основное ограничение эффекта состоит в том, что его можно применять только ко всем объектам, находящимся на слое. Например, вы не можете заполнить градиентом выделенную область. Кроме того, эффект имеет и два других существенных ограничения: отсутствие регулировки прозрачности, наличие только двух типов градиента (линейный и радиальный). Несмотря на это, возможности эффекта Gradient практически исчерпывают нужды Web-дизайнера и при этом делают градиенты свободно редактируемыми. Если же вам требуется нечто большее, просто перейдите в Photoshop, нажав кнопку Jump To Default Graphic Editor на палитре инструментов.

Палитра Layer Options/Effects для эффекта Pattern

Рис 10.19. Палитра Layer Options/Effects для эффекта Pattern

Примечание
Примечание
Флажок Linked to layer, расположенный под образцом текстуры, "привязывает" текстуру к объекту Если он установлен, то при перемещении объекта на слое, текстура перемещается вместе с ним При сброшенном флажке объект перемещается, а текстура остается на месте.

4. Чтобы заменить текстуру, обратитесь к списку, открывающемуся расположенной на палитре кнопкой с треугольной стрелкой Он содержит имена текстур, поставляемыми в комплекте Photoshop. Выберите, например, текстуру Stone. Текстура заменена.

Примечание
Примечание
ImageReady не ограничивает вас поставляемым набором текстур Вы можете воспользоваться произвольной текстурой, загрузив ее в палитру LayerOptions/Effects Если выбрать из списка текстур вариант Other или сделать двойной щелчок на образце текстуры, откроется стандартное диалоговое окно от крытия файла, в котором вы можете указать имя файла с произвольной тексту рой. Если вы планируете использовать текстуру многократно, то можете внести ее в список текстур, доступный из палитры Для этого надо всего лишь переписать файл текстуры в папку Adobe Photoshop 5.5 Settings\Patterns\, вложенную в папку Photoshop В качестве текстуры сгодится любое цветное или полутоновое изображение в любом формате, который способен открыть Photoshop

Палитра Layer Options/Effectsдля эффекта ColorFill

Рис 10.20. Палитра Layer Options/Effects
для эффекта ColorFill

3. Поэкспериментируйте с различными вариантами режимов наложения и непрозрачности заливки. Попробуйте разные цвета заливок. Оставьте тот, который вам наиболее понравится.
4. С текстурой и заливками изображение выглядит гораздо привлекательнее, не правда ли? Добавим такие эффекты ко всем слоям отдельных стран. Чтобы избежать утомительного повторения одинаковых операций, воспользуемся копированием эффектов между слоями. Выберите команду Copy Effects из списка Effects, вложенного в меню Layer. Она также доступна в контекстном меню, открывающемся щелчком правой кнопки мыши при указании курсора на пиктограмму слоя в палитре Layers.
5. Активизируйте слой следующей страны в палитре Layers.
6. Выберите команду Paste Effects из списка Effects, вложенного в меню Layer. Можете выбрать ее и в контекстном меню, открывающемся щелчком правой кнопки мыши при указании курсора на пиктограмму слоя в палитре Layers. Эффекты перенесены на следующий слой.
7. Измените параметры эффекта Color Fill, чтобы территория этой страны на карте отличалась от прочих.
8. Повторяйте шаги 5—8 до тех пор, пока все страны не приобретут цветную текстурную заливку (Рисунок 10.21).

Рисунок 10.21. Территории всех стран выделены цветом текстурной заливки

Палитра Type

Рис 10.22. Палитра Type

5. Наберите текст "EUROPE '99" и нажмите клавишу <Enter>. Вводимый текст будет немедленно отображаться на экране, а после нажатия <Enter> текстовый курсор перейдет на следующую строку.
6. На следующей строке введите текст "TOUR AGENCY "EUROPE PLUS"".
7. Выделите вторую строку текста так, как вы привыкли это делать в текстовом редакторе, с помощью мыши или клавиш управления курсором при нажатой клавише <Shift>.
8. В палитре Type установите меньшее значение кегля, 10 пунктов, и прямое начертание шрифта (Рисунок 10.23).
9. В палитре Swatches щелкните мышью на светло-желтом образце. Текст немедленно будет заполнен выбранным цветом.
10. Выберите на палитре инструментов инструмент Move и, с его помощью, поместите текст в окончательное положение.
11. Добавьте к текстовому слою эффект Drop Shadow, подобрав его параметры "по вкусу".
12. Сохраните изображение в файле Europe.psd в рабочей папке на жестком диске вашего компьютера.

Редактирование текста

Рис 10.23. Редактирование текста

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

Перенесите полученное изображение в Photoshop, нажав кнопку Jump to default graphics editor на палитре инструментов. В Photoshop все выглядит несколько не так, не правда ли? Исчезли сплошные и градиентные заливки, текстуры. Очевидно, это произошло потому, что Photoshop не поддерживает этих специфических эффектов ImageReady. Учитывайте это, выбирая программу, в которой будете осуществлять окончательное редактирование изображения.

Диалоговое окно HTML Background

Рис 10.25. Диалоговое окно HTML Background

2. В списке Color выберите любой цвет.
3. Закройте диалоговое окно, нажав кнопку ОК.
4. Выберите установленный на вашем компьютере браузер в списке Previewin, находящемся в меню File. Вы видите редактируемое изображение на фоне выбранного цвета.
5. Перейдите к окну ImageReady и снова выберите команду HTML Background из меню File.
6. В списке Color выберите вариант None.
7. Нажмите кнопку Choose и выберите любую текстуру, например marble.jpg, которую вы редактировали при изучении предыдущей главы. В поле Image появилось имя выбранного файла с полным путем к нему. Вы задали фоновую текстуру для страницы.
8. Выберите установленный на вашем компьютере браузер в списке Preview in, находящемся в меню File. Вы видите редактируемое изображение на фоне выбранной текстуры мрамора.
9. Перейдите к окну ImageReady и откройте текстуру marble.jpg, как документ, командой Open.
10. Еще раз выберите команду HTML Background из меню File.
11. Сотрите содержимое поля Image и установите переключатель в верхней части окна в положение Background. Этим вы сообщили ImageReady, что текущий документ является фоновой текстурой для Web-страницы-
12. Выберите установленный на вашем компьютере браузер в списке Preview in, находящемся в меню File. Вы видите только фоновую текстуру мрамора.
13. Перейдите к окну ImageReady и закройте документ с текстурой marble.jpg

Если вы создаете в ImageReady фоновую текстуру, объявите ее в диалоговом окне HTML Background, как это было сделано выше. Вы получите отличную возможность просмотра результата ее редактирования в браузере с помощью команды Previewin.

Для создания фоновых текстур ImageReady имеет два весьма полезных фильтра, находящихся в разделе Others меню Filters: это DitherBox и Tile Maker. Первый решает проблему получения цветов, не входящих в палитру Web, за счет т. н. гибридных цветов. Гибридные цвета создаются за счет расположенных рядом пикселов других, входящих в палитру Web, цветов. Благодаря тому, что пикселы соседние, глаз воспринимает их как один пиксел "среднего" цвета. Как правило, гибридные цвета создают за счет двух или четырех соседних пикселов. Фильтр DitherBox работает и с гораздо большим количеством соседних пикселов. Это бывает удобно для создания узорных текстур. Главное окно фильтра приведено на Рисунок 10.26.

Левую часть окна фильтра занимают список готовых гибридных цветов и узоров, а правую — палитра Web (или загруженная из внешнего файла), область редактирования узора и кнопки создания гибридных цветов. Именно с создания гибридных цветов и начнем.

1. Создайте небольшое новое изображение командой New из меню File. Установите в нем размер, скажем 100х100 пикселов и белый фон.
2. Выберите фильтр DitherBox в разделе Others меню Filters.
3. Щелкните на квадратном образце RGB, и откроется диалоговое окно Color Picker.

Окно фильтра DitherBox

Рис 10.26. Окно фильтра DitherBox

4. В диалоговом окне Color Picker сбросьте флажок OnlyWeb Colors.
5. В полях R, G и В задайте синий цвет (51, 133, 255).
6. Закройте Color Picker нажатием кнопки ОК. Образец в окне DitherBox окрасился в выбранный цвет.
7. Этот цвет не входит в палитру Web, но фильтр DitherBox подберет для него гибридный аналог. Щелкните на оранжевой стрелке слева от образца. Образец Pattern заполнится гибридным цветом, а в области редактирования появится его состав — два цвета из палитры Web. В списке гибридных цветов в левой части окна появится образец Pattern1, содержащий получившийся гибридный цвет.
8. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен гибридным цветом.

Возможно вы не поверите, что заливка в документе действительно гибридная. Цвет выглядит совершенно ровным и сплошным. Просмотрите документ под увеличением 300% или большим — вы увидите составляющие заливку пикселы двух цветов.
Вы можете сами создавать гибридные цвета, используя палитру Web в окне DitherBox.

1. Снова выберите фильтр DitherBox в разделе Others меню Filters.
2. Выберите в маленькой палитре инструментов под областью редактирования инструмент Pencil (карандаш).
3. В палитре цветов щелкните курсором мыши на любом образце. Когда курсор инструмента Pencil попадает в область палитры, он меняет свой вид на Eyedropper (пипетка).
4. В области редактирования по очереди щелкните на двух маленьких квадратиках, расположенных по диагонали. Они приобретут выбранный в палитре цвет.
5. Повторите шаги 3—4, выбрав в палитре другой цвет. Полученный узор представляет собой гибридный цвет.
6. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен гибридным цветом.

Для представления любого RGB-цвета достаточно всего двух цветов из палитры Web. Поэтому автоматическая генерация гибридных цветов всегда создает одинаковый двухцветный узор. Используя область редактирования, вы можете создавать произвольные узоры с гораздо большим количеством цветов.

Допустим, вы решили получить фоновый узор в тонкую диагональную темно-синюю полоску на светло-синем фоне.

1. Выберите фильтр DitherBox в разделе Others меню Filters.
2. Нажмите кнопку New под списком узоров в левой нижней части окна. В списке появится строка нового узора.
3. Переведите переключатель размера узора справа от области редактирования в положение 7х7. В области редактирования появится матрица из 49 клеток.
4. Выберите в палитре цветов светло-синий цвет и заполните им всю матрицу в области редактирования.
5. Выберите темно-синий цвет в палитре цветов и заполните им диагональ от левого верхнего угла к правому нижнему.
6. Чтобы полоса смотрелась более "гладкой", обведите ее синим цветом, промежуточной насыщенности. Не забудьте закрасить этим цветом по одному квадрату в правом верхнем и левом нижнем углах (Рисунок 10.27). В противном случае линия будет иметь разрыв.

Создание узора спомощью DitherBox

Рис 10.27. Создание узора с
помощью DitherBox

7. Нажмите кнопку Fill под списком гибридных цветов. Окно DitherBox закроется, а текущий документ будет заполнен созданным узором. Установив текущий документ в качестве фоновой текстуры в диалоговом окне HTMLBackground, вы можете оценить вид узора в браузере.

Совет
Совет
Если вы намерены использовать узор в качестве фона для Web-страницы, то сохраняйте в файле только необходимое количество информации, Создайте документ ImageReady точно размером с узор (например, 7х7 пикселов) и заполните его с помощью DitherBox. Оптимизируйте полученное изображение в индексированной палитре Web и сохраните командой Save Optimized. Размер такой фоновой текстуры будет минимальный, в пределах 70 байт.

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

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

1. Откройте исходный файл marble.jpg с прилагаемой дискеты.
2. Выберите команду Tile Maker из раздела Others меню Filters. Откроется диалоговое окно фильтра, изображенное на Рисунок 10.28.

Окно фильтра Tile Maker

Рис 10.28. Окно фильтра Tile Maker

3. Фильтр работает в двух режимах: Blend Edges и KaleidoscopeTile. Установите с помощью переключателя первый режим.
4. В поле Width вводится ширина краев изображения, используемая фильтром для преобразования в мозаичную текстуру. По завершении преобразования эти края будут удалены. Вы можете компенсировать такую обрезку, установив флажок Resize Tile to Fill Image — тогда обрезанное изображение будет отмасштабировано до размеров исходного. Разумеется, качество текстуры от этого не возрастает, поэтому используйте эту возможность только в случае крайней необходимости. Оставьте в поле Width значение 10%, принятое по умолчанию, а флажок Resize Tile to FillImage сбросьте.
5. Нажмите кнопку ОК. Окно фильтра закроется, а текстура в окне документа преобразуется в мозаичную. Она будет на 10% меньше исходной, а освободившаяся площадь окажется прозрачной.
6. Для обрезки прозрачности в документе с текстурой используем особую команду ImageReady Trim. Выберите ее из меню Edit. Команда откроет диалоговое окно, изображенное на Рисунок 10.29. В области Based On находится переключатель, определяющий, какие области следует обрезать прозрачные (TransparentPixels) или совпадающие по цвету с левым верхним (Top LeftPixel Color) или правым нижним (Bottom RightPixel Color) углом изображения. Установите переключатель в первое положение. В области Trim Away задаются стороны изображения, которые необходимо обрезать. Установите флажки для всех сторон изображения.

Диалоговое окно Trim

Рис 10.29. Диалоговое окно Trim

7. Нажмите кнопку ОК Изображение обрезано, прозрачные поля удалены.
8. Объявите изображение фоновой текстурой в диалоговом окне HTMLBackground и воспользуйтесь командой Preview in, чтобы оценить результат в окне браузера. Как видите, полученная текстура тоже не обнаруживает своей повторяемости четкими границами между отдельными элементами. Фильтр Tile Maker в большинстве случаев дает превосходный результат.

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

1. Откройте документ pizza jpg.
2. Выделите любой небольшой квадратный фрагмент этого изображения инструментом Marquee.
3. Выберите из раздела Others меню Filters фильтр TileMaker.
4. В диалоговом окне фильтра выберите режим Kaleidoscope Tile и нажмите кнопку ОК. В выделенной области получилась "калейдоскопическая" текстура
5. Переместите выделение в другое место изображения и повторите действие фичьтра, нажав клавиши <Ctrl>+<F> или выбрав команду ApplyTile Maker из меню Filters. Перед вами другая текстура (рис 10.30).

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

Рисунок 10.30. Режим Kaleidoscope Tile фильтра TileMaker
Создание текстур на основе фрагментов изображений

Рамка фрагмента

Рис 10.31. Рамка фрагмента

3. Выберите инструмент Slice на палитре инструментов. Работа с ним похожа на работу с инструментом Crop сначала вы строите рамку, а затем уточняете ее размеры и положение с помощью манипуляторов
4. Поместите курсор инструмента Slice в левый верхний угол изображения Нажмите левую кнопку мыши и перемещайте курсор вправо и вниз до тех пор, пока внутри рамки не окажется вся территория Великобритании. Затем отпустите кнопку мыши (рис 10.32, а).

а б
Рисунок 10.32. Разрезание изображения

Изменнение размеров автоматических фрагментов

Рис 10.33. Изменнение размеров автоматических фрагментов

="Pic 14-34.jpg">
Рис- 10.34. Появление дополнительного автоматического фрагмента

Диалоговое окно Divide Slice

Рис 10.35. Диалоговое окно Divide Slice

3. Разобьем фрагмент по горизонтали на три. Установите флажок DivideHorizontally Into и сбросьте флажок Divide VerticallyInto. В поле slices down, evenly spaced введите значение 3. Установите флажок Preview, чтобы оценить правильность установок. Результат разбивки фрагмента будет показан в окне документа (Рисунок 10.36). Нажмите кнопку ОК.
4. Выберите инструмент Slice Select на палитре инструментов и выделите правый верхний фрагмент с помощью мыши.
5. Щелчком курсором мыши выделите правый верхний фрагмент №3.
6. Перетащите левый боковой манипулятор к границе соседнего пользовательского фрагмента №1, чтобы между ними не оставалось места. Обратите внимание, что рамки фрагментов при касании "прилипают" друг к другу как к направляющим линиям. Это обеспечивает точность размещения фрагментов встык.

Примечание
Примечание
Пользовательские фрагменты могут располагаться не только встык, но и накладываться друг на друга Какой из фрагментов окажется выше задается командами, находящимися в списке Arrange меню Slices Команды Bring to Front и Send to Back помещают фрагмент поверх остальных или ниже всех со ответственно Команды Bring Forward и Send Backward имеют смысл только если перекрываются более двух фрагментов В этом случае они располагают выделенный фрагмент выше или ниже текущего положения Эти команды дос тупны также из меню палитры Slice (см ниже)

7. Выберите на палитре инструментов инструмент Slice и создайте им новый фрагмент, охватывающий на карте территорию Франции Верхней стороной он должен касаться фрагмента № 1, а правой — фрагментов №4 и №7.
8. Выберите инструмент Slice Select на палитре инструментов и скорректируйте положение границы между фрагментами №4 и №7. Первый из них не должен заходить на территорию Италии (рис 10.37)

Результат автоматической разбивки фрагмента

Рис 10.36. Результат автоматической разбивки фрагмента

Изображение разрезано на восемь фрагментов

Рис 10.37. Изображение разрезано на восемь фрагментов

Если у вас не получилось сразу получить такие же линии разреза, как на рисунке, скорректируйте их положение инструментом Slice Select. Если же вы случайно создали лишний пользовательский фрагмент, просто удалите его. Выберите в меню Slices или контекстном меню команду DeleteSlice или просто нажмите клавишу <Delete>.

Палитра Slice для фрагментов

Рис 10.38. Палитра Slice для фрагментов типа Image (а) и No Image (б)

Содержимое палитры Slice относится только к текущему выделенному фрагменту и изменяется при выделении другого. Верхний левый угол палитры занимает окно просмотра, в котором демонстрируется выделенный фрагмент. В области Precision приводятся точные координаты левого верхнего угла фрагмента (X и Y), его ширина (W) и высота (Н). Ввод в эти поля численных значений в пикселах позволяет идеально точно определить размер и положение фрагмента.

Совет
Совет
Если вы не видите в палитре Slices области Precision, то выберите команду Show Options из меню палитры
В правой части палитры Slice располагаются несколько списков и полей ввода. Список Type задает тип фрагмента. В большинстве случаев это тип Image, но возможен и альтернативный вариант No Image. Он предполагает отсутствие изображения на месте выбранного фрагмента. Такое "пустое" место (в HTML-коде это пустая ячейка таблицы) может быть заполнено произвольным текстом на фоне со сплошной заливкой. Цвет заливки определяется списком BG в правом верхнем углу палитры. Если выбрать тип фрагмента NoImage, то в палитре появится поле ввода текста Text и область Cell Alignment, в которой с помощью списков Horiz и Vert устанавливаются режимы выравнивания текста по горизонтали и вертикали. Обратите внимание, что для введенного текста не задается форматирование (шрифт, кегль, и т. п.): текст отображается тем стилем, который установлен в браузере.

Примечание
Примечание
Для типа Image цвет, выбранный в списке BG, используется для заполнения прозрачных областей фрагмента
В поле Name вводится имя выделенного фрагмента. Поскольку придумывание индивидуальных имен фрагментам в большинстве случаев не имеет смысла, ImageReady сама генерирует имена для фрагментов. То, как она это делает, определяется установками программы. Они сосредоточены в разделе Slices диалогового окна Preferences (Рисунок 10.39). Как вы помните, он вызывается командой Slices из списка Preferences, находящегося в меню File.

Раздел Slices диалогового окна Preferences

Рис 10.39.Раздел Slices диалогового окна Preferences

Алгоритм генерации имен фрагментов задается списками, находящимися в области Default Slice Naming. По умолчанию из них задействованы только три. В первом списке выбран вариант doc.name. Это означает что первым в имя фрагмента включается название документа. В следующем списке выбран разделитель underscore (символ подчеркивания). Он отделяет имя документа от номера фрагмента slice no., который выбран в третьем списке. Таким образом, имя фрагмента строится из имени документа и номера фрагмента, разделенных символом подчеркивания. Такое именование представляется вполне разумным, поскольку по имени фрагмента вы всегда сможете определить, к какому изображению он относится. Включение в имя номера фрагмента необходимо для обеспечения уникальности их имен. Разделение имени документа и номера фрагмента придает имени большую наглядность, особенно если имя документа само содержит номер, например, banner0l или divider64.

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

Поскольку содержимое всех шести списков абсолютно идентично, вы можете переставлять "информационные поля" в именах файлов. Если, например, выбрать вариант slice no. в первом списке, a doc.name в третьем, то в имени фрагмента на первом месте окажется его номер. Это, с одной стороны, улучшит совместимость имен со стандартом DOS (8.3), но, с другой стороны, затруднит просмотр множества файлов в папке из-за неудобной сортировки.

Кстати, остальные настройки в разделе Slices позволяют задать наиболее удобный для вас режим отображения фрагментов. В области Numbersand Symbols можно выбрать размер меток с номерами фрагментов и степень их прозрачности (Opacity). В области Color Adjustment устанавливается процент осветления фрагментов, которые не выделены в текущий момент. По умолчанию пользовательские фрагменты осветляются на 20%. а автоматические на 40%. Если же вся эта информация осветление фрагментов и метки на них) вообще вам не нужна, то отключите ее показ с помощью флажка ShowLines Only. Когда этот флажок установлен, показываются только линии, обозначающие границы фрагментов: Их цвет задается списком LineColor.

Рассмотрев генерацию имен фрагментов изображений, вернемся к определению гипертекстовых ссылок. Для каждого фрагмента может быть определена единственная гипертекстовая ссылка, которая вводится в поле URL палитры Slice. Список Target, расположенный ниже, позволяет определить фрейм, в котором появится ресурс, задаваемый ссылкой, или открыть его в новом окне браузера.

1. Выберите инструмент Slice Select на палитре инструментов.
2. Выделите фрагмент №1, в который попадает территория Великобритании. В палитре Slice вы увидите имя фрагмента europe_sliced_01, скомпонованное из имени документа и номера фрагмента.
3. В поле URL введите england.htn-il. Это будет имя документа, который откроется в браузере по щелчку на этом фрагменте.
4. В необязательное поле Message вводится текстовое сообщение, которое будет отображаться в строке состояния браузера, когда курсор мыши окажется на выбранном фрагменте. Введите в поле какой-нибудь текст, например, "Have a trip to England?".
5. Поле Alt предназначено для тех, кто пользуется текстовыми браузерами и вообще не может увидеть изображения карты- В таких браузерах вместо фрагмента изображения будет отображаться текст, введенный в поле Alt. Впрочем, и для графических браузеров ввод альтернативного текста не является избыточным. Текст, позволит пользователю, если он того пожелает, не дожидаться загрузки изображения и подскажет названия стран, если он не в ладах с географией (Рисунок 10.40).
6. Проделайте шаги 2—5 для всех фрагментов изображения, на которых находятся выделенные страны. Для фрагментов №5 и №8 ссылки не нужны, т. к. это автоматические фрагменты, не относящиеся к территории какой-либо из стран, куда организуются туры.

Рисунок 10.40. Альтернативный текст и подсказка в графическом браузере

Границы фрагментов с разной палитрой четко видимы

Рис 10.41. Границы фрагментов с разной палитрой четко видимы

5. В палитре Optimize повысьте количество цветов до 32. Ситуация не изменилась. Сделайте несколько щелчков курсором мыши на различных фрагментах и просматривайте их цвета в палитре Color Table. У всех фрагментов разная палитра. Очевидно, что избежать видимых стыков можно только если палитра для всех фрагментов будет общей.

Назначение общих параметров оптимизации для определенных фрагментов изображения — типичная задача. В ImageReady для ее решения имеется специальная команда связывания фрагментов, Link Slices. Связанные фрагменты имеют в левом верхнем углу пиктограмму в виде сцепленных звеньев. Связь фрагментов отображается такой же пиктограммой и в палитре Slices. Все автоматические фрагменты являются связанными. Чтобы разбить связь между ними, следует преобразовать их в пользовательские командой Promoteto User-slice или применить команду Unlink Slices. Результат будет одинаков: связь разорвется, а автоматические фрагменты станут пользовательскими. Команда Unlink Slices действует и на связанные пользовательские фрагменты.

1. Выделите фрагменты №1 и №6 с территорией Великобритании и Франции. Чтобы выделить два фрагмента, щелкните их курсором мыши поочередно при нажатой клавише <Ctrl>.
2. Выберите команду Link Slices из меню Slices. Фрагменты связаны. Об этом говорит пиктограмма связи в углу обоих фрагментов. Маркеры фрагментов также изменили цвет. Каждая группа связанных фрагментов обозначается маркерами особого цвета. Это позволяет легко различать группы связанных фрагментов.
3. Выберите команду All Slices из меню Select. Выделены все фрагменты.
4. Выберите команду Link Slices из меню Slices или контекстного меню, открывающегося щелчком курсором мыши на любом из фрагментов. Все фрагменты связаны. Обратите внимание, что автоматические фрагменты стали пользовательскими. Теперь они имеют общие настройки оптимизации и общую палитру. Изменение настроек одного из фрагментов немедленно применяется и к другим.
5. Выделите любой фрагмент инструментом Slice Select.
6. Выберите именованную настройку GIF 32 Dithered и увеличьте степень сглаживания Dither до максимума.
7. Выделяйте отдельные фрагменты и просматривайте параметр сглаживания и палитру. Для всех фрагментов параметр Dither окажется максимальным, и палитра будет у всех одинаковая. Изменение настроек одного фрагмента было автоматически применено ко всем связанным с ним фрагментам.
8. Спрячьте границы фрагментов нажатием кнопки Show Slices на палитре инструментов или клавиши <Q> на клавиатуре. Посмотрите на результат оптимизации. Границ фрагментов не видно.

Диалоговое окно Save Optimized

Рис 10.42.Диалоговое окно Save Optimized

2. В поле File name уже введено имя файла, соответствующее названию документа ImageReady. Это имя будет использовано при формировании имен файлов отдельных фрагментов и имени HTML-документа. Оставьте его таким, какое предлагается по умолчанию.
3. Флажок Save HTML File включает сохранение кода, необходимого для сборки фрагментов и функционирования ссылок, в HTML-документ. Установите этот флажок.
4. Нажмите кнопку HTML Options....Она открывает диалоговое окно установок генерации HTML, доступное также в одноименном разделе диалогового окна Preferences Рисунок 14.43.

Диалоговое окно Saving Files Options

Рис 10.44. Диалоговое окно Saving Files Options.

Диалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих "поля", из которых складываются имена файлов. Их, как правило, формируют на основе имен фрагментов. Поэтому первым компонентом имени файла по умолчанию установлено имя сохраняемого фрагмента. Последним компонентом имени файла (последний список) является расширение, для которого вы можете выбрать регистр символов. Как правило, и для имен файлов и для расширений используют символы в нижнем регистре. Остальные поля имен файлов в нашем примере хоть и проставлены, но задействованы не будут. К их обсуждению вернемся позже.

Чтобы облегчить себе ориентацию среди множества файлов, составляющих сайт, Web-дизайнеры размещают изображения отдельно от файлов документов (HTML), в особом каталоге. Флажок Put images in subfolder заставляет ImageReady следовать этому хорошему правилу. Расположенная правее строка должна содержать имя папки для изображений. По умолчанию предлагается обычное для этого имя images. Советуем оставить это имя и, разумеется, установить флажок Put images in subfolder.

Флажок Copy background image when saving говорит ImageReady о том, что вместе со всеми графическими файлами следует скопировать в выбранный каталог и текущую фоновую текстуру, установленную в диалоговом окне HTML Background.

Примечание
Примечание
Команда Image Info из меню File открывает простое диалоговое окно (Рисунок 14.45), в котором вы можете ввести произвольную информацию об изображении Как правило, это информация о вас, как об обладателе авторских прав на созданное изображение. Данная информация сохраняется в файле документа ImageReady (PSD) и может быть автоматически внесена в оптимизированные для Web графические файлы. Чтобы это произошло, следует установить флажок Embed Copyright в диалоговом окне Saving Files Options.

Диалоговое окно Image Info

Рис 10.45. Диалоговое окно Image Info

4. Нажмите кнопку ОК, закрывая этим диалоговое окно Saving Files Options. Перед вами снова окажется окно Save Optimized.
5. Если вы желаете сохранить только некоторые фрагменты изображения, то установите флажок Save Selected Slices Only. Чтобы он сработал, необходимо предварительно выделить с помощью инструмента Slice Select те фрагменты, которые вы хотите сохранить. В нашем примере требуется сохранение всех фрагментов, поэтому флажок следует сбросить. Обратите внимание, что если в диалоговом окне Save Optimized сброшены все флажки, то программе будет нечего сохранять. Об этом она выдаст специальное предупреждение (Рисунок 14.46).
6. Нажмите кнопку Save. ImageReady сохранит HTML-документ в выбранную папку под именем, которое было введено в поле File name диалогового окна Save Optimized (europe_s]iced). Все фрагменты и текущая фоновая текстура будут сохранены в подкаталоге images.
7. Откройте файл europe_sliced.html в браузере и полюбуйтесь на результат работы. Если вы захотите протестировать ссылки, то создайте серию пробных HTML-документов с названиями, которые вводили при создании фрагментов. Они могут иметь простейший вид, представленный на Рисунок 14.47. Таких документов должно быть создано по числу стран. Разумеется, вместо France в заголовке и теле файла должно фигурировать название соответствующей страны.

Предупреждение о том

Рис 10.46. Предупреждение о том, что для сохранения не выбрано ни одного файла

<html>
<title>France</title>
<body>
<hl>France</hl>
</body>
</html>

Простейший документ для тестирования ссылок

Рис 10.47. Простейший документ для тестирования ссылок
Далеко не всегда разрезанное изображение является единственным объектом на странице. Поэтому во многих случаях Web-дизайнеру требуется не код целой страницы (который получается в результате экспорта), а только его фрагмент, описывающий собственно сборку изображения. ImageReady предоставляет такую возможность командой Copy HTML Code из меню Edit. Эта команда открывает список, в котором следует выбрать, какую часть кода вы хотите получить: все фрагменты (All Slices) или только выделенные (SelectedSlices). HTML-код сборки изображения копируется в системный буфер обмена и может быть вставлен в текст Web-страницы, загруженной в любой редактор.

Ссылка на ресурс в палитреLayer

Рис 10.48. Ссылка на ресурс в палитре
Layer Options/Effects и в палитре Layer

Карта ссылок определена. Функция Preview in позволяет протестировать карту ссылок еще до экспорта HTML-кода и самого изображения.

1. Выберите установленный на вашем компьютере браузер из списка Preview in, находящегося в меню File. Image Ready запустит выбранный браузер и загрузит в него изображение с картой ссылок. Ниже изображения вы увидите весь HTML-код, который понадобился для этого.
2. Подведите курсор мыши к любой из из выделенных цветом стран. Он примет вид, характерный для гипертекстовой ссылки. Рядом с курсором возникнет подсказка, которую Image Ready автоматически сгенерировал из имен слоев. В результате, пользователь увидит название страны, на которую указывает курсором. В строке состояния браузера вы обнаружите URL-сылки на ассоциированный документ.
3. Нажмите левую кнопку мыши и не отпускайте ее. Если вы пользуетесь Microsoft Internet Explorer 4.0 и выше, то увидите границы текущей области карты ссылок.

Отпустите кнопку мыши. Браузер попытается открыть документ, соответствующий ссылке, но не сможет этого сделать и выдаст ошибку №404. Если вы хотите серьезно протестировать карту ссылок, то создайте серию пробных HTML-документов с названиями, которые вводили при создании карты ссылок.

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

1. Убедитесь, что для текущего изображения установлены параметры оптимизации в палитре Optimized.
2. Выберите команду Save Optimized As из меню File.
3. В открывшемся диалоговом окне введите имя файла (вы можете использовать то же имя, что и в предыдущем разделе).
4. Проверьте установку флажка Save HTML File. Если флажок установлен, то ImageReady генерирует HTML-файл, который содержит код, необходимый для функционирования карты ссылок.
5. Нажмите кнопку HTML Options.... Она открывает одноименное диалоговое окно, доступное также по команде HTML из списка установок Preferences, находящегося в меню File (см. Рисунок 10.43). Из многочисленных установок параметров генерируемого HTML-кода нас теперь будет интересовать только список Image Maps. Он задает тип используемой карты ссылок. Дело в том, что карты ссылок могут обрабатываться либо сервером (server side), либо браузером посетителя (client side). Первый способ требует написания специального CGI-сценария, который автор страницы должен разместить на сервере. Второй способ лишен этого недостатка, поскольку вся информация, необходимая для обработки карты ссылок, предоставляется браузеру клиента и не требует участия со стороны сервера, В свою очередь, для карт ссылок, обрабатываемых сервером, существуют два стандартных формата CERN и NSCA. Список. Image Maps позволяет выбрать вариант кодирования карты ссылок. В подавляющем большинстве случаев следует использовать клиентскую обработку (Client-Side). Она имеет только один недостаток: не поддерживается старыми браузерами, ориентированными только на HTML 2.0. , К счастью, число пользователей таких браузеров достаточно мало, чтобы им было можно пренебречь. Закройте окно HTML Options нажатием кнопки ОК.
6. Нажмите кнопку Save, и оба файла (графический и HTML) будут сохранены в выбранной папке. Они имеют одинаковые имена, но разные расширения.
7. Откройте файл europe_map.html в браузере и оттестируйте готовую карту ссылок.
Если вам не нужен готовый HTML-документ, а только код самой карты ссылок, воспользуйтесь командой Copy HTML Code из меню Edit. Код карты ссылок копируется в системный буфер обмена и может быть вставлен в текст Web-страницы, загруженной в любой редактор.

Диалоговое окно Create Guides

Рис 10.49. Диалоговое окно Create Guides

8. Диалоговое окно Create Guides имеет две идентичные области Horizontal Guides и Vertical Guides, отвечающие за построение горизонтальных и вертикальных направляющих, соответственно. Размещение нескольких направляющих по обоим направлениям можно производить одним из двух способов, равномерным распределением (<> guides, evenly spaced), с заданным интервалом (<> pixels between guides) Также можно разместить и одиночную направляющую, указав ее координату по вертикали (<> pixels from top (single guide)) или по горизонтали (<> pixels from left (single guide)). Выбор определяется положением переключателя в соответствующей области. В поле рядом с активной позицией переключателя вводят численные значения в пикселах.

Примечание
Примечание
Если в диалоговом окне Create Guides установить флажок ClearExisting Guides, то перед размещением все уже существующие в документе направляющие будут удалены

Нам потребуется равномерно разместить по горизонтали три направляющие линии. Для этого установите флажок Horizontal Guides и сбросьте флажок Vertical Guides. Затем установите переключатель в верхнее положение. <> guides evenly spaced и в соседнее поле введите 3. Чтобы заранее просмотреть результат размещения направляющих в окне документа, установите флажок Preview. Если все сделано верно, нажмите кнопку ОК.

9. С помощью инструмента Move разместите встык фотографии с видами стран на слоях изображения с картой, как показано на рис 10.50.

Размещение фотографий с видами стран на карте

Рис 10.50. Размещение фотографий с видами стран на карте

Примечание
Примечание
Для построения ролловеров не обязательно размещение встык ролловеры на одном изображении могут пересекаться Мы использовали такое размещение только для уменьшения количества ролловеров, а следовательно, и размера всего изображения.

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

Изображение разрезано на фрагменты

Рис 10.51. Изображение разрезано на фрагменты

1. Переключитесь в режим показа фрагментов кнопкой Show Slices в палитре инструментов.
2. Выберите команду Divide Slice из меню Slices
3. Разделите изображение на восемь фрагментов: четыре по вертикали и два по горизонтали. Для этого в диалоговом окне Divide Slice установите оба флажка Divide Horizontally Info и Divide Vertically Info. Затем введите значение 4 в поле. <> slices down, evenly spaced и значение 2 в поле <> slices across, evenly spaced. Нажмите кнопку ОК. Изображение разделено на фрагменты.
4. Выберите инструмент Slice Select из палитры инструментов.
5. Скорректируйте положение границ фрагментов таким образом, чтобы все фотографии с видами оказались на отдельных фрагментах. Внимательно следите за тем, чтобы фотографии не пересекали границ фрагментов. В противном случае впоследствии вы получите лишние ролловеры. У вас должно получиться 11 фрагментов, как показано на Рисунок 10.51. Шесть из них, по числу фотографий с видами, должны быть пользовательские, а пять — автоматические. Лишние пользовательские фрагменты выделяйте инструментом Slice Select и удаляйте командой Delete Slice из меню Slice или нажатием клавиши <Delete>.

Палитра Rollover

Рис 10.52. Палитра Rollover

3. В списке фрагментов находятся шесть фрагментов, соответствующих будущим ролловерам. Как программа догадалась, какие из фрагментов будут ролловерами? Очень просто: в список включены все пользовательские фрагменты. Выберите в списке первый фрагмент.

Примечание
Примечание
Для выбора фрагмента при определении состояния ролловера можно использовать не только список в палитре Rollover, но и инструмент SliceSelect. Возможно применение инструмента покажется вам более наглядным.

4. Демонстрация карты на выбранном фрагменте является по задумке обычным состоянием ролловера (Normal). Именно это вы и наблюдаете в палитре Rollover. На миниатюре состояния Normal видно изображение карты. Нажмите кнопку создания нового состояния или выберите команду NewState из меню палитры. Рядом с миниатюрой состояния Normal появится миниатюра нового состояния Over. Пока оно идентично состоянию Normal. Наша задача сделать так, чтобы в этом состоянии показывалась фотография страны, находящаяся на этом фрагменте.
5. Включите видимость слоя, на котором находится фотография, размещенная на выделенном фрагменте. В палитре Rollover миниатюра состояния Over теперь показывает фотографию. Состояние определено.
6. Нажмите кнопку создания нового состояния или выберите команду New State из меню палитры. Рядом с миниатюрой состояния Over появится миниатюра нового состояния Down. Пока оно идентично состоянию Over.
7. Отключите видимость слоя с фотографией щелчком на пиктограмме "Глаз" в палитре Layers. Определено третье состояние, Down. Оно будет
совпадать с состоянием Normal.
8. Выберите следующий фрагмент из списка в палитре Rollover и проделайте для него шаги 4—7. Повторите эти шаги для всех фрагментов, находящихся в списке палитры Rollover.
В результате получилось изображение с шестью ролловерами. Если в браузере поместить курсор на любой из них, то поверх карты появится фотография с видом страны. При нажатии левой кнопки мыши фотография исчезнет. В принципе, можно было бы сделать состояние Down отличным от состояния Normal. Для этого потребовалось бы еще шесть слоев с фрагментами, задающими вид изображения для этого состояния. В данном случае это существенно увеличило суммарный размер изображения с ролловерами. И все-таки, поскольку наш пример учебный, проделаем такую работу для одного ролловера.
1. Выберите инструмент Slice Select в палитре инструментов.
2. Выделите с его помощью фрагмент, соответствующий Нидерландам.
3. Создайте копию слоя Holland в палитре Layers, перетащив миниатюру слоя к кнопке нового слоя в нижней части панели.
4. Активизируйте получившийся слой Holland copy.
5- Выберите команду Hue/Saturation из списка Adjust, вложенного в меню Image. Она открывает одноименное диалоговое окно, изображенное на Рисунок 10.53. Если вы прочли главу 9, то уже знаете, как с ним работать.

Примечание
Примечание
Инструменты тоновой и цветовой коррекции в ImageReady не столь изощренные как в Photoshop. Они носят те же имена и выполняют аналогичную работу, но имеют не такой широкий диапазон возможностей. Это хорошо видно на примере инструмента Hue/Saturation. Как видите, он так же, как и в Photoshop, предназначен для настройки цветового тона, насыщенности и яркости, но не позволяет работать с отдельными цветовыми диапазонами.

6. Установите флажок Colorize, сделайте значение Hue равным 36, а насыщенность выведите на максимум. Фотография должна приобрести золотистый тон. В палитре Rollover это должно автоматически стать третьим (Down) состоянием ролловера. Теперь при нажатии кнопки мыши на этом ролловере в браузере должна появиться тонированная фотография.

Рисунок 10.53. Диалоговое окно Hue/Saturation

Ролловер в браузере

Рис 10.54. Ролловер в браузере

Совет
Совет
Если при размещении курсора мыши на территории какой-нибудь страны появляется не одна, а несколько фотографий, то перейдите в ImageReady и внесите в ролловер исправления. Активизируйте ролловер инструментом SliceSelect и отключите видимость лишних фотографий. Затем снова протестируйте ролловер в браузере. Объяснение этой ошибки элементарно- если при определении состояния Down для одного ролловера были видимы несколько фотографий, то ImageReady посчитала их вторичными ролловерами.

Файлы фрагментов для изображения с ролловэрами

Рис 10.55. Файлы фрагментов для изображения с ролловэрами

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

Загрузите сгенерированный HTML-файл в браузер и проверьте функционирование всех ссылок. Для проверки разместите в той же папке тестовые страницы стран. Их создание описано выше.

Если вы планируете вставить код ролловеров в готовую страницу, то воспользуйтесь для этого командой Copy HTML Code из меню Edit. В открываемом ею списке вы можете выбрать, какую часть кода хотите получить:
код для всех (Copy All Slices) или только выделенных фрагментов (Copy Selected Slices), или исключительно код JavaScript для создания ролловеров (Copy Preloads).

Баннер с GIFанимацией

Рис 10.57. Баннер с GIF-анимацией

1. Для изготовления баннера нам понадобится изображение самолета. Запустите Photoshop и откройте в нем файл plane.tif с прилагаемой дискеты.
2. Преобразуйте слой Background в обычный слой.
3. Загрузите из альфа-канала выделенную область и нажмите клавишу <Delete>. Таким образом вы получите вокруг самолета прозрачный фон.
4. Сохраните изображение в файле plane.psd и перейдите в ImageReady. Выполнить эту операцию в ImageReady невозможно, поскольку она не поддерживает работы с альфа-каналами.
5. Стандартный размер баннера 60х468 пикселов. Создайте в ImageReady новое изображение такого размера с помощью команды New из меню File. Фон изображения установите белым.
6. Выберите инструмент Type в палитре инструментов.
7. Щелкните курсором мыши у левого края изображения и введите текст "Welcome to Adventure!".
8. Настройте параметры текста таким образом, чтобы он занимал всю ширину баннера. Для этого выберите узкий полужирный шрифт крупного кегля.
9. Залейте текст темно-синим цветом, выбрав его в палитре Swatches.
10. Откройте документ plane.psd.
11. Уменьшите его пропорционально командой Image Size из меню Image так, чтобы вертикальный размер документа составлял 70 пикселов.
12. Скопируйте изображение самолета в документ с баннером.
Дальше мы применим небольшой трюк, основанный на том, что ImageReady, как и Photoshop, хранит информацию об объекте на слое, перемещенном за пределы документа.
1. Выберите инструмент Move и переместите слой с изображением самолета за левую границу документа. Не бойтесь, оно не пропадет!
2. Сделайте белый цвет текущим основным цветом.
3. Заполните слой основным цветом с помощью команды Fill или нажав клавиши <Alt>+<Backspace>.
4. Переместите слой по горизонтали вправо инструментом Move при нажатой клавише <Shift> так, чтобы изображение самолета оказалось посередине документа.
5. Выделите прозрачный участок между носом самолета и белой заливкой инструментом Magic Wand.
6. Залейте выделенную область белым цветом.
7. Инструментом Magic Wand выделите прозрачную область позади самолета.
8. Выберите инструмент Airbrush в палитре инструментов.
9. Большой кистью создайте короткий градиент из белого в прозрачность позади самолета. Результат изображен на Рисунок 10.58.

Рисунок 10.58. Слой с изображением самолета

Диалоговое окно Tween

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

Как вы видите, программа "догадалась" о ваших манипуляциях с перемещением слоя и построила промежуточные стадии его движения. Впрочем, вы сами указали на это б диалоговом окне Tween. Рассмотрим его подробнее.

Переключатель Layers определяет, какие слои изображения следует учитывать: все или только текущий, выделенный в палитре Layers. Группа флажков Parameters задает параметры, которые изменяются от кадра к кадру, положение слоя (Position), его прозрачность (Opacity) или параметры эффектов (Effects). Список Tween with определяет, между какими кадрами следует строить промежуточные. Если в палитре Animation выделены два или более кадра, то доступен только вариант Selection, говорящий о том, что промежуточные кадры надо делать исходя из выделенных. Если в палитре выделен один кадр, то в списке доступны два варианта: предыдущий кадр (Previous Frame) или следующий (Next Frame). Следующим для последнего кадра является первый. И наконец, поле Framesto Add задает количество промежуточных кадров.

1. Нажмите клавиши <Ctrl>+<Z> или выберите команду Undo из меню Edit. Это отменит последнюю команду Tween и мы опробуем ее с новыми установками.
2. Выделите оба кадра в палитре Animation и выберите команду Tween в ее меню.
3. В диалоговом окне Tween установите флажок у параметра Opacity.
4. Нажмите кнопку ОК.
5. Просмотрите получившуюся анимацию. Надпись "Welcome to Adventure'" теперь как бы "проявляется", изменяя прозрачность от 100% до 0%.

Палитра Layer Options/Effectsв

Рис 14.8. Палитра Layer Options/Effects
в режимах LayerOptions (а) и Effects (б)

§ Styles. Набор эффектов, ассоциированный с текущим слоем, можно сохранить в специальной палитре Styles. Чтобы воспроизвести сохраненный набор эффектов еще раз или применить его к другому слою, достаточно просто сделать двойной щелчок мышью на его пиктограмме в палитре. Сразу после установки программы в палитре находятся два десятка готовых стилей, созданных разработчиками (Рисунок 10.9).

Диалоговое окно Preferences раздел Optimization

Рис 14.24. Диалоговое окно Preferences, раздел Optimization

В области Default Optimization задаются параметры оптимизации по умолчанию. Они будут приниматься всякий раз при сохранении нового документа ImageReady предлагает три варианта установок:

§ Use the Previously Used Setting. Если в списке выбран этот вариант, то программа запоминает сделанные настройки и предлагает их и для следующего изображения.
§ Autoselect GIF/JPEG Выбрав этот вариант, вы доверяете ImageReady проанализировать изображение и предложить наиболее удачный вариант оптимизации
§ Use a Named Setting В этом случае вы можете сами выбрать настройки которые будут предложены по умолчанию, в расположенном ниже списке. Он составлен из предварительно сохраненных (и предопределенные разработчиками) вариантов оптимизации, тех, что вы видели в списке Settings палитры Optimize.

В области 2-Up Settings имеются два списка, которые задают режимы оптимизации для обоих окон режима 2-Up. По умолчанию в левом окне демонстрируется оригинал (Original), а в правом — оптимизированное изображение с текущими настройками (Current). Для нового изображения текущими будут являться те настройки, которые установлены по умолчанию в области Default Optimization. Если в левом списке выбрать вариант Current, то в правом становится возможным выбор любой сохраненной именованной настройки или автоматический выбор (Auto) В последнем случае наилучший вариант оптимизации предлагается самой программой. Таким образом, для нового документа в левом окне параметры оптимизации берутся из установки Default Optimization, а в правом — автоматические или предварительно сохраненные.
Нетрудно сообразить, почему установки режима 4-Up состоят из четырех списков: каждый из них задает режим одного окна. Предлагаемые варианты установок аналогичны приведенным выше для режима 2-Up.

В заключение подчеркнем, что все эти настройки являются настройками по умолчанию. Это значит, что они будут предлагаться всякий раз при оптимизации нового изображения. Если эти установки для какого-то из изображений вас не устроят, то вы можете их легко изменить, воспользовавшись списком Settings палитры Optimize, а не изменять их в диалоговом окне Preferences.

Диалоговое окно Preferences раздел HTML

Рис 14.43. Диалоговое окно Preferences, раздел HTML

Дилоговое окно HTML Options (и диалоговое окно Preferences с разделом HTML) состоит из двух областей: Formatting, содержащей настройки форматирования HTML-текста, и Coding, связанной с вариантами представления одних и тех же элементов в HTML.

Наиболее принципиальны установки области Coding. От них зависит преимущественно совместимость генерируемого кода со старыми версиями браузеров:

§ TD W, H. Фрагменты изображения компонуются на Web-странице с помощью таблиц HTML. Вариант Always приводит к обя зательному указанию размеров ячеек браузером. По умалчанию предлагается вариант Auto, доверяющий Image Ready решение этой проблемы. Мы советуем использовать именно его, поскольку размеры поставляются только для "критических" ячеек. Таким образом код не перегружается лишними данными и достигается хороший уровень совместимости.
§ Spacer Cells. Включение в таблицу пустых ячеек имеет смысл только если фрагменты изображения нарочито не стыкуются с друг другом. Некоторые браузеры могут исказить форму таблицы, если изображение занимает ее ячейку не полностью. Включение в таблицу пустых ячеек позволяет избежать этой проблемы. Вариант Auto, предлагаемый по умолчанию, как правило, обеспечивает наилучщий результат.
§ Empty Cells. Эта настройка имеет смысл только для фрагментов, не содержащих изображения (тип No Image в палитре Slice). Она позволяет установить заполнитель для пустых ячеек, чтобы браузер не изменил их размеров при просмотре. Стандартным вариантом является заполнение ячейки прозрачным изображением размером в 1 пиксел. При этом для него явно указываются требуемые высота и ширина. "Обманутый" браузер масштабирует до этих размеров "невидимый" пиксел и считает ячейку заполненной. Такой способ, GIF, IMG W&H, используется по умолчанию. Второй способ, GIF, TD W&H, состоит в жестком задании размеров ячейки, а не "прозрачного пиксела". Третий способ, No Wrap, TD W&H, не требует изображения с "прозрачным пикселом", и использует недостаточно стандартизованное средство HTML. Хотя последний вариант и наиболее естественен, он плохо совместим со старыми версиями браузеров.
§ Include Comments. Если этот флажок установлен, то ImageReady включает в HTML-текст комментарии, разделяющие блоки кода. Если вы редактируете код непосредственно, то комментарии позволят легче в нем ориентироваться. В противном случае (вы используете визуальный редактор типа Frontpage, GoLive и т. п.) отключение комментариев сократит размер HTML-файла.
§ Code. Если вы используете для редактирования страниц программу Adobe GoLive, то выберите в списке GoLive. В противном случае оставьте вариант ImageReady.

Установки области Formatting относятся только к внешнему виду генерируемого текста и не сказываются на виде страниц в браузерах. Если вы используете визуальные редакторы HTML, то настройки Formatting вам абсолютно бесполезны. Если же вы редактируете код в текстовом редакторе, то настройте вид генерируемого кода в соответствии с вашими привычками.

В списках Tag Case выберите регистр написания тэгов и атрибутов. В списке Indent установите привычный размер отступов от левого края. Список Line endings позволяет задать платформу, на которой вы будете редактировать текст. Различие генерируемого кода будет только в символах конца строки: на разных платформах (PC, Macintosh, UNIX) используются разные сочетания символов возврата каретки и новой строки. Флажок Always Quote Attributes заставляет ImageReady всегда заключать атрибуты тэгов в кавычки. При снятом флажке кавычки ставятся только там, где это действительно необходимо.

1. Установите желаемые параметры форматирования в диалоговом окне HTML Options и закройте его кнопкой ОК. Перед вами снова диалоговое окно Save Optimized.
2. Флажок Save Images включает сохранение изображений. Установите его.
3. Нажмите кнопку Saving Files Options.... Она открывает диалоговое окно установок генерации имен файлов (Рисунок 10.44), доступное также в одноименном разделе диалогового окна Preferences.

Диалоговое окно Saving Files Options

Рис 14.44. Диалоговое окно Saving Files Options

Диалоговое окно Saving Files Options устроено аналогично разделу Slices установок программы. Область File Naming занимают девять списков, задающих "поля", из которых складываются имена файлов. Их, как правило, формируют на основе имен фрагментов. Поэтому первым компонентом имени файла по умолчанию установлено имя сохраняемого фрагмента. Последним компонентом имени файла (последний список) является расширение, для которого вы можете выбрать регистр символов. Как правило, и для имен файлов и для расширений используют символы в нижнем регистре Остальные поля имен файлов в нашем примере хоть и проставлены, но задействованы не будут. К их обсуждению вернемся позже.

Флажок Copy background image when saving говорит ImageReady о том, что вместе со всеми графическими файлами следует скопировать в выбранный каталог и текущую фоновую текстуру, установленную в диалоговом окне HTML Background.

Примечание
Примечание
Команда Image Info из меню File открывает простое диалоговое окно (Рисунок 10.45), в котором вы можете ввести произвольную информацию об изображении Как правило, это информация о вас, как об обладателе авторских прав на созданное изображение Данная информация сохраняется в файле документа ImageReady (PSD) и может быть автоматически внесена в оптимизированные для Web графические файлы. Чтобы это произошло, следует установить флажок Embed Copyright в диалоговом окне Saving Files Options.

Слои

Изучим специфику Image Ready на простом примере. Раскрасим несложное изображение, схематическую карту Европы, на которой выделены цветом несколько стран (Рисунок 10.11).

Сохранение анимации

Сохранение анимации

Сохранение анимации в формате GIF осуществляется все той же командой Save Optimized. Вам потребуется только выбрать папку для готового анимационного файла и дать ему имя.

Сохранение фрагментов

Теперь, когда изображение разрезано и ссылки назначены, осталось только сохранить его фрагменты в отдельные оптимизированные файлы и получить HTML-код для их сборки в браузере. Всю эту работу выполняет команда SaveOptimized As.
1. Выберите команду Save Optimized As из меню File. Она открывает диалоговое окно Save Optimized, изображенное на Рисунок 10.42.

Сохранение набора эффектов

Удачно найденные комбинации эффектов в Image Ready можно сохранить в виде стиля. Для хранения стилей используется особая палитра Styles (Рисунок 10.9). В ней уже находится несколько полезных предопределенных стилей, но мы добавим новый.

1. Выделите слой с территорией любой из стран в палитре Layers.
2. Откройте палитру Styles командой Show Styles из меню Window.
3. Нажмите кнопку с изображением листа бумаги в нижней части палитры Styles. В палитре появится новый образец, соответствующий эффектам, ассоциированным с выделенным слоем. Стиль создан
4. Теперь применим к слою уже существующий стиль. Не меняя текущего слоя сделайте двойной щелчок курсором мыши на любом образце в палитре Styles Набор эффектов из стиля применен к текущему слою
5. Восстановим предыдущее состояние слоя. Для этого сделайте двойной щелчок на сохраненном образце
6. Очистим палитру Styles от "экспериментального" образца. Выделите его одинарным щелчком мыши и нажмите кнопку с изображением мусорного ведра в нижней части палитры. Стиль удален

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

Сохранение ролловеров

Сохранение ролловеров выполняется все той же, знакомой нам командой save Optimized As из меню File. Нам остается только обсудить особенности формирования имен файлов, поскольку некоторым фрагментам соответствуют теперь несколько изображений.

1. Выберите команду Save Optimized As из меню File.
2. В открывшемся диалоговом окне нажмите кнопку Saving Files Options....

Кроме имени фрагмента (первый список в области File Saving Preferences) и расширения (последний список) в формировании имени файла задействованы еще два "поля". Они обозначают состояние ролловеров.

После имени фрагмента, согласно установкам по умолчанию, следует разделитель (тире), а затем — имя ролловера-переключателя. Это поле имеет смысл только для вторичного ролловера и позволяет легко определить, с каким ролловером он ассоциирован. После имени переключателя снова следует разделитель (подчерк) и состояние ролловера. Таким образом в именах файлов находят отражение и состояния ролловеров.

3. Нажмите кнопку ОК, закрывающую диалоговое окно Saving Files Options.
4. В диалоговом окне Save Optimized установите флажки Save HTML File и Save Images, а флажок Save Selected Slices Only сбросьте.
5. Нажмите кнопку Save. HTML-файл будет сохранен в выбранную папку, а во вложенной папке images окажутся все файлы фрагментов в разных состояниях ролловеров.

Внимательно просмотрите содержимое папки images: в ней должно быть ровно 20 файлов (Рисунок 10.55), один из которых называется spacer.gif и содержит "прозрачный пиксел".

Создание кадров

Изображение подготовлено. Теперь займемся определением кадров анимации. Для начала определим два кадра — первый и последний.

1. Убедитесь, что все слои видимы.
2. Выберите инструмент Move из палитры инструментов.
3. Переместите слой с изображением самолета строго по горизонтали влево, чтобы самолет вышел за край документа и не был виден. Чтобы перемещать слой точно по горизонтали, удерживайте при этом клавишу <Shift>. Все поле документа должно быть белым.
4. Откройте палитру Animation командой Show Animation из меню Window, если ее нет на экране.
5. Текущее состояние документа принимается как первая фаза анимации. Ему соответствует миниатюра первой фазы анимации.
6. Создайте еще одну фазу, нажав кнопку с изображением листа бумаги в нижней части палитры или выбрав команду New Frame из меню палитры. Рядом с миниатюрой первой фазы анимации в палитре Animation появится еще одна. Пока обе фазы идентичны.
7. Щелкните мышью на миниатюре второй фазы.
8. Выберите инструмент Move из палитры инструментов.
9. Переместите слой с изображением самолета вправо так, чтобы самолет оказался за правым краем документа. При этом надпись "Welcome to Adventure" на предыдущем слое должна стать полностью видима. Активная миниатюра в палитре Animation отразит новое состояние документа.

Сплошные заливки

Разработчики ImageReady внесли в программу еще один неожиданный эффект — сплошную заливку. Несмотря на то, что заливку можно легко реализовать с помощью команды Fill, этот эффект также весьма полезен, ПОСКОЛЬКУ делает заливку свободно редактируемой.

1. Придайте текущему слою France эффект Color Fill, выбрав соответствующую команду из списка эффектов в палитре Layers или одноименном меню. Территория страны на карте заполнена сплошным красным цветом.
2. Обратимся к палитре Layer Options/Effects, содержащей параметры нового эффекта (Рисунок 10.20). Собственно, их всего три: сам цвет (Color), режим наложения и непрозрачность (Opacity) заливки. Установите режим наложения Color. Это позволит тонировать лежащую ниже текстуру в произвольный цвет.

Ссылки и ролловеры

Ссылки и ролловеры

Наличие ролловеров никак не связано с назначением гипертекстовых ссылок: ссылки все равно назначаются фрагментам. Чтобы назначить адреса ссылок, используйте палитру Slice точно так же, как вы делали изучая разрезание изображений. По существу вам придется воспроизвести все шаги, приведенные в подразделе "Организация ссылок" раздела "Разрезание изображений" настоящей главы.

Текст

Для завершения работы над картой осталось ввести текст, для которого мы уже заблаговременно подготовили фоновую плашку. Ввод и редактирование текста организованы в ImageReady даже удобнее и естественнее, чем в Photoshop. В ImageReady нет специального окна Type Tool, и ввод текста осуществляется прямо в окне документа.

1. Активизируйте верхний слой Stripe в палитре слоев.
2 Двойным щелчком мыши выберите инструмент Type на палитре инстру ментов
3. Щелкните курсором мыши в левой части градиентной плашки. В месте щелчка появилась точка вставки со знакомым текстовым курсором
4 Параметры текста задаются в специальной палитре Type (рис 10 22) Перед вводом текста зададим его характеристики. В списке Font выберите любой рубленый шрифт. В расположенном правее списке начертаний выберите полужирное. В списке Font Size установите размер шрифта 18 пунктов Значения интерлиньяжа (Leading), кернинга (Kerning) и трекинга (Tracking) оставьте предлагаемыми по умолчанию. Оставьте также и выключку текста по левому краю.

Текстуры

Изучая палитру Layer Options/Effects вы, наверное, уже заметили переключатель Gradient/Pattern в верхней ее части. Положение Pattern соответствует другому часто используемому эффекту — заливке текстурой. Опробуем эффект на практическом примере.
1. В палитре Layers активизируйте слой, соответствующий территории какой-либо страны, например France.
2. Добавьте эффект Gradient/Pattern из списка эффектов Как вы помните, он открывается нажатием кнопки с изображением буквы "Г в нижней части палитры Layers
3. В палитре Layer Options/Effects переведите переключатель Gradient/Pattern в положение Pattern. В окне палитры появилась текстура Bubbles, принятая по умолчанию (Рисунок 10.19) Одновременно в окне документа вы увидите, что объект на выбранном слое заполнен этой текстурой

Удаление кадров

Удаление кадров

Крайним способом уменьшения размера изображения можно считать удаление отдельных кадров. Критически взгляните на получившуюся анимацию и подумайте, можно ли сократить ее на кадр-другой. Результат можно сразу просмотреть в браузере с помощью команды Preview in.

1. Выделите третий и десятый кадры анимации в палитре Animation.
2. Нажмите на кнопку с изображением мусорного ведра в нижней части палитры. Выделенные кадры удалены.
3. Выберите ваш браузер в списке Preview in из меню File и оцените результат в браузере.

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

Время демонстрации (тайминг)

Время демонстрации (тайминг)

Для каждого кадра анимации вы можете задать произвольное время демонстрации.

1. Нажмите кнопку перехода к последнему кадру.
2. Щелкните на маленькой треугольной стрелке, расположенной ниже миниатюры кадра. Рядом с ней выводится текущее время демонстрации кадра, 0,00 сек.
3. В открывшемся списке выберите 2 сек. Теперь рекламная надпись будет находиться на экране дольше.

Учтите, что при просмотре анимации в ImageReady время демонстрации кадров не соблюдается. Для того чтобы просмотреть анимацию с реальным таймингом, воспользуйтесь просмотром в браузере при помощи команды Preview in.

Вторичные ролловеры

ImageReady умеет создавать код JavaScript для т. н. вторичных ролловеров. Вторичными они являются потому, что их состояние в браузере определяется не положением курсора мыши, а состоянием других ролловеров. Поясним это на простом примере. Допустим, при покупке тура в Нидерланды клиент туристической фирмы получает скидку. Чтобы отразить этот факт в изображении, создадим надпись "DISCOUNT!", которая будет появляться, только если клиент поместит курсор мыши на ролловере Нидерландов.

1. Выберите в палитре инструментов инструмент Slice Select.
2. Выделите фрагмент, содержащий ролловер Нидерландов.
3. В палитре Rollover щелкните на миниатюре состояния Over, поскольку рекламный текст должен появляться именно в этом состоянии ролловера.
4. Выберите инструмент Type в палитре инструментов.
5. Щелкните курсором мыши в левом верхнем углу изображения.
6. Выберите в палитре Type полужирный рубленый шрифт и установите размер 18 пунктов.
7. Введите с клавиатуры надпись "DISCOUNT!". Введенный текст ассоциирован с текущим состоянием ролловера, состоянием Down.
8. В палитре Swatches щелкните мышью на образце светло-желтого цвета. Шрифт окрасится в выбранный цвет.
9. Добавьте к тексту эффект Drop Shadow, выбрав его из списка эффектов. Как вы помните, он открывается нажатием кнопки с изображением буквы "f" в палитре Layers. В палитре Layer Options/Effects установите такие параметры тени, чтобы текст хорошо выделялся.
10. Используйте инструмент Move для коррекции размещения надписи, если она стоит неровно.

Вторичный ролловер изготовлен. Хотя текст располагается вне ролловера Нидерландов, он ассоциирован с ним.