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

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

Ролловеры

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

Рис. 23.104. Добавление эффекта Drop Shadow (a) к изображению (б)

Рис. 23.105. Замена одного изображения другим

Рис. 23.106. Появление текста при наведении курсора на пиктограмму

Можно создать ролловеры трех основных типов:

• изменение области изображения (например, изменение цвета или эффекта слоя) - см. рис. 23.104;
• замена одного изображения другим (рис. 23.105);
• появление текста или графического объекта в другой части окна браузера, когда указатель мыши наведен на кнопку, ключевое слово или значок (рис. 23.106).

Ролловеры - как бы «голос» Web-странички. Они определяют ее ключевые области, на которые пользователь должен навести указатель или щелкнуть мышью. С ними страничка становится более интересной.

Для того чтобы создать ролловер, необходимо сначала разделить изображение на ломтики. (Так что прочтите сначала разделы о разбиении изображения на ломтики - не жульничайте!) В программе ImageReady можно создать ролловер с помощью палитры Rollover (Ролловер) или путем отображения и скрытия слоев на палитре Layers (Слои). В ImageReady все, на что способен ролловер, - это показать или скрыть некоторые слои в соответствии со встроенными инструкциями. (Как создать ролловер с помощью эффекта слоя, рассказано в соответствующем разделе. А тому, что такое вторичный ролловер и как его создать, посвящен раздел «Создание вторичного ролловера».)

Создание ролловера для ломтика

1. Откройте изображение, содержащее ломтики, и отобразите палитру Slice (Ломтик).
2. Активизируйте инструмент Slice Select (Выделение ломтиков) с помощью клавиши К (сочетания клавиш Shift+K) и щелкните по ломтику, для которого следует создать ролловер.
3. Если элемент изображения, на основе которого должен быть создан ролловер, не имеет своего собственного слоя, воспользуйтесь командой Select > Create Selection from Slice (Выделить> Создать выделение из ломтика), а потом выполните команды Layers > New > Layer via Сору (Слои > Новый > Слой из копии) или нажмите комбинацию клавиш Ctrl+J. Если изображение, принадлежащее ломтику, уже находится на отдельном слое, то создайте дубликат слоя с помощью палитры Layers (Слои).
4. Откройте вкладку Rollover (Ролловер). Миниатюра выделенного ломтика будет видна на палитре.
5. В нижней части палитры щелкните по кнопке Create new rollover state (Создать новое состояние ролловера) - см. рис. 23.107. Копия выделенного ломтика появится на палитре в качестве новой миниатюры.
6. Программа ImageReady по умолчанию автоматически связывает состояния курсора и кнопки мыши с миниатюрами ролловеров в такой последовательности: Over (Над), Down (Нажатие) и Click (Щелчок). Если же необходимо изменить эту последовательность, то из всплывающего меню, расположенного над миниатюрой нового ролловера, который вы создадите при выполнении последующих шагов, выберите состояние, которое будет инициировать ролловер (рис. 23.106):

Рис. 23.107. Выбор состояния курсора и кнопки мыши, инициирующего ролловер

Рис. 23.108. Инвертирование цвета изображения в состоянии Over

Рис. 23.109. Скрытие исходного слоя и показ дубликата на палитре Layers

• Over - курсор находится над ломтиком, кнопка мыши не нажата;
• Down - курсор находится над ломтиком, кнопка мыши нажата. Некоторые Web-дизайнеры любят выводить специальную картинку при нажатии кнопки мыши;
• Click - щелчок кнопкой мыши по указанному ломтику (кнопка нажата и отпущена). При этом браузер попытается установить связь в сети, используя URL-адрес, прикрепленный к данному ломтику.

7. Отредактируйте изображение на отдельном слое или на дубликате слоя (см. шаг 3), чтобы оно как-то отличалось от исходного. Инвертируйте цвет слоя (рис. 23.108) или измените яркость с помощью команд Image > Adjustments О Invert (Изображение > Корректировки > Обратить), примените к слою текстурный или искажающий фильтр (см. раздел «Еще кое-что о ролловерах») или измените цвета и их насыщенность в слое. Также можно заменить изображение на совершенно другое или использовать новое изображение в качестве дополнения к уже существующему, расположенному в пределах ломтика. При этом изображение на исходном слое не изменится.
8. На палитре Layers (Слои.) отобразите дубликат слоя и скройте исходный слой (рис. 23.109).
9. Переключайте на палитре Rollover (Ролловер) состояние Normal и миниатюры ролловеров и наблюдайте за видом исходного изображения в основном окне. На палитре Rollover отображаются все изменения, происходящие на палитре Layers (Слои) по мере выбора миниатюр ролловеров. Чтобы картинка в окне предварительного просмотра была более достоверной, воспользуйтесь командой File > Preview in [браузер] (Файл > Предварительный просмотр в [браузер]) либо новой функцией предварительного просмотра программы ImageReady (см. раздел «Предварительный просмотр ролловера в программе ImageReady»),

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

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

Можно создать отдельное изображение для каждого состояния ролловера (например, один значок для режима Over (Над) и другой - для режима Click (Щелчок)). Просто не забудьте создать отдельный слой или эффект слоя для каждого состояния.

Для того чтобы выбрать размер миниатюры, отображаемой на палитре Rollover (Ролловер), дважды щелкните по серому фону палитры (или выберите команду Palette Options (Опции палитры) в меню палитры Rollover). Крупные миниатюры легче рассматривать. У палитр Animation (Анимация) или Slice (Ломтик) свои собственные размеры миниатюр.

Для того чтобы создать ролловер, в котором новое изображение добавляется к уже существующему, создайте новую картинку на скопированном или дополнительном слое. Далее убедитесь, что ее размеры и местоположение сочетаются с исходным изображением (рис. 23.110 и 23.111). В этом случае исходный слой будет всегда виден.

Рис. 23.110. Изображение в состоянии ролловера Normal

Рис. 23.111. То же изображение в состоянии Over. Слой с нарисованным от руки эффектом вешнего свечения виден под слоем с лампочкой

Рис. 23.112.Исходная кнопка

Рис. 23.113. Кнопка после применения фильтра Radial Blur

Рис. 23.114. Кнопка после применения фильтра Pinch

Еще кое-что о ролловерах

Предлагаем вам использовать следующие приемы при редактировании скопированного слоя (см. шаг 7 раздела «Создание ролловера для ломтика»).

Для создания эффекта расширения/сжатия изображения с помощью ролловера выполните масштабирование картинки на скопированном слое, воспользовавшись командами Edit > Transform > Scale (Правка > Трансформировать > Масштабирование) или Filter > Blur > Radial Blur (Фильтр > Размытие > Радиальное). В результате изображение будет растянуто (рис. 23.112 и 23.113). А при выполнении команд Filter > Distort > Pinch (Фильтр > Искажение > Дисторсия) (с отрицательным значением параметра Amount (Количество)) изображение будет выпячено (рис. 23.114).

Для того чтобы кнопка или область изображения казались перевернутыми, воспользуйтесь командами Edit > Transform > Flip Horizontal (Правка > Трансформировать > Перевернуть вдоль горизонтали) или Flip Vertically (Перевернуть вдоль вертикали) - см. рис. 23.105.