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

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

       

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

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

Когда выбрана миниатюра

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

Слой с изображением

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

  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 и результат его применения к фигуре

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

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

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

Использование стиля

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

 

 

 

Top.Mail.Ru
Top.Mail.Ru