• Ролловеры
• Создание ролловера для ломтика
• Создание ролловера с использованием эффекта слоя
• Предварительный просмотр ролловера в ImageReady
• Предварительный просмотр ролловера в Web-браузере
• Создание вторичного ролловера
• Создание кнопки для Web-страницы

 

 

Ролловеры

Теперь, когда вам уже известно кое-что о ломтиках, пришло время узнать и еще об одном виде «горячей» точки - ролло-вере. Ролловер представляет собой некое событие, которое происходит при щелчке мышью или перемещении курсора над какой-либо областью 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.

Создание ролловера с использованием эффекта слоя

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

1. Активизируйте инструмент Slice Select (Выделение ломтика), которому соответствует пиктограмма и щелкните по какому-либо ломтику изображения.
2. В нижней части палитры Rollover (Рол-ловер) щелкните по кнопке Create new rollover state (Создать новое состояние ролловера).
3. Из всплывающего меню выберите состояние ролловера для миниатюры нового ролловера.
4. Откройте палитру Layers (Слои).
5. Выберите слой, на котором имеются прозрачные области (слой bulb на рис. 23.115).
6. Выберите эффект из всплывающего меню Add layer effects (Добавить эффект слоя), вызываемого при помощи пиктограммы .щ, расположенной в нижней части палитры Layers (Слои). Попробуйте применить эффект Inner Shadow (Внутренняя тень), чтобы изменить цвет вдоль границы изображения, или Outer Glow (Внешнее свечение), чтобы изменить цвет области, расположенной вокруг изображения (рис. 23.116 и 23.117).
7. Теперь в палитре Layer Options (Опции слоя) будут отображаться параметры того эффекта, который был только что выбран. Для того чтобы усилить эффект, увеличьте значения в полях Size (Размер), Distance (Расстояние), Depth (Глубина) или Intensity (Интенсивность). Если вы хотите использовать эффект Bevel and Emboss (Скос и рельеф) и тем самым придать изображению объемный вид, отметьте на соответствующей палитре противоположное значение опции (например, Up (Вверх) вместо Down (Вниз)), чтобы изменить направление освещения на противоположное и имитировать вогнутость того варианта изображения, который связан с ролловером (см. раздел

Рис. 23.115. Выбор слоя на палитре Layers

Рис. 23.116. Применение к слою эффекта Outer Glow

а)

б)

Рис. 23.117. Исходное изображение (а) и изображение после применения эффекта Outer Glow, предназначенное для состояния ролловера Over (б)

Рис. 23.118. Эффекты слоя ролловера

«Применение эффекта Bevel and Emboss» главы 14). Воспользуйтесь эффектом Color Fill (Заливка цветом), установив низкое значение непрозрачности, что позволит оттенить изображение и усилить эффект вогнутости.

8. Предварительно просмотрите ролловер (см. раздел «Предварительный просмотр ролловера в ImageReady» этой главы).

В палитре Styles (Стили) программы ImageReady содержатся эффекты слоя или их сочетания, которые можно использовать (см. раздел «Применение стиля к слою» этой главы).

Эффект слоя можно увидеть на палитре Layers (Слои) и на изображении только тогда, когда выделена соответствующая миниатюра состояния ролловера (рис. 23.118).

Как удалить эффект (эффекты) слоя, рассказано в разделе «Эффекты слоя» главы 14.

 

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

Теперь можно предварительно просмотреть ролловер в программе ImageReady.

1. Щелкните по кнопке Rollover Preview (Предварительный просмотр ролловера) на панели инструментов или нажмите клавишу Y. Альтернативный вариант: на палитре Rollover (Ролловер) щелкните по кнопке Preview (Предварительный просмотр).
2. Наведите указатель на изображение, чтобы увидеть действие ролловера. Для того чтобы прервать выполнение этого действия, снова щелкните по кнопке Play (Проиграть) или Preview.

Предварительный просмотр ролловера в Web-браузере

1. Сохраните файл в программе ImageReady.
2. В подменю File > Preview (Файл > Предварительный просмотр) выберите браузер, установленный на вашем компьютере. Второй способ: щелкните по кнопке Preview in Default Browser (Предварительный просмотр в браузере по умолчанию), расположенной на панели инструментов. Третий способ: нажмите комбинацию клавиш Ctrl+ Alt+T.
3. В браузере проведите курсор поверх области изображения, содержащей рол-ловер (состояние Over (Над)), нажмите кнопку мыши (состояние Down (Нажатие)) или щелкните мышью по этой области (состояние Click (Щелчок)).

Можно проверить правильность URL-адреса, даже если вы в данный момент не подключены к Internet. Наведите курсор на ломтик, содержащий ссылку, и тогда соответствующий URL-адрес появится в нижней части окна браузера.

Невозможно протестировать состояние Down в ранних (до 4.0) версиях браузеров Navigator или Explorer. В этих версиях по нажатию кнопки мыши открывается контекстное меню.

Рис. 23.119. Когда выбрана миниатюра состояния Over

Рис. 23.120.... слой с изображением котелка (bowler Irg) становится видимым

Создание вторичного ролловера

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

1. Выберите инструмент Slice (Ломтик), нажав клавишу К или сочетание клавиш Shift+K.
2. Нарисуйте новый ломтик в изображении, который станет состоянием Normal (Нормальный) для ролловера. Новая миниатюра появится и на палитре Slice (Ломтик), и на палитре Rollover (Ролловер).
3. В нижней части палитры Rollover щелкните по кнопке ^^щ Create new rollover state (Создать новое состояние ролловера). Копия текущего ломтика появится в качестве новой миниатюры на палитре.
4. Из всплывающего меню, расположенного над этой миниатюрой, выберите состояние Over (Над) - см. рис. 23.119.
5. Создайте новый слой, а затем дополнительный текст или изображение в этом слое (рис. 23.120). Альтернативный вариант: с помощью команд Сору (Копировать) и Paste (Вставить) или простым перетаскиванием создайте новый слой, а затем отредактируйте изображение в этом слое.
6. С помощью инструмента Move (Перемещение) переместите слой туда, где он должен располагаться на изображении (рис. 23.121). В этом примере создан столбец из маленьких изображений, каждое из которых представлено отдельным ломтиком. Увеличенные варианты изображений использованы для создания вторичных ролловеров.
7. Щелкните по миниатюре состояния Normal (Нормальный) и убедитесь, что в этом состоянии новый слой спрятан. Ненароком не спрячьте слой, содержащий исходную область, для которой был создан ролловер (рис. 23.122 и 23.123).

Создание кнопки для Web-страницы

1. На палитре Rollover (Ролловер) щелкните по миниатюре состояния Normal (Нормальный).
2. Выберите инструмент для построения фигуры: Rectangle (Прямоугольник), Rounded Rectangle (Прямоугольник с закругленными углами) или Ellipse (Эллипс). Поочередно выбирать эти инструменты можно с помощью клавиши U или комбинации клавиш Shift+U.
3. На панели опций щелкните по кнопке Create New Shape Layer (Создать слой фигуры).
4. Выберите основной цвет, а затем перетащите указатель курсора по диагонали, чтобы нарисовать фигуру (рис. 23.124). Она автоматически появится на своем собственном слое.

Рис. 23.121. Компоновка изображений

Рис. 23.122. Скрытие слоя (bowler Irg) после выбора миниатюры состояния Normal

Рис. 23.123. Скрытие изображения котелка в состоянии Normal

Рис. 23.124 Новая фигура

Рис. 23.125. Стиль button-up и результат его применения к фигуре

5. По желанию. Для того чтобы применить заранее определенный эффект слоя к кнопке, откройте палитру Styles (Стили) и перетащите имя стиля или образец с палитры на слой с кнопкой на палитре Layers (Слои) или на фигуру в окне изображения (рис. 23.125). Можно сделать и иначе: выделите фигуру и щелкните по имени стиля на соответствующей палитре.

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

6. С помощью инструмента Slice (Ломтик) прочертите границы ломтика вокруг новой кнопки, находящейся в состоянии Normal (Нормальный). Миниатюра нового ломтика появится и на палитре Slice (Ломтик), и на палитре Rollover (Ролловер).
7. Повторите шаги 3-9 раздела «Создание ролловера для ломтика изображения», чтобы создать ролловер для кнопки (рис. 23.126).

Рис. 23.126. Использование стиля button-down для ролловера в состоянии Over