Четверг, 21.11.2024, 13:52
Приветствую Вас Гость | RSS
Меню сайта
Наш опрос
Оцените мой сайт
Всего ответов: 173
Мини-чат
200
Главная » 2008 » Апрель » 10 » Ролловерная кнопка в Image Ready, Web-графика
Ролловерная кнопка в Image Ready, Web-графика
16:58
Шаг 1

Сначала откройте Image Ready.
Для создания ролловерной кнопки вам понадобятся два изображения: до наведения курсора и после.

Ролловерная кнопка в Image Ready

Шаг 2

Скопируйте изображение второй кнопки в вставьте его над слоем с первой:

Ролловерная кнопка в Image Ready

Убирите видимосто со второго слоя:

Ролловерная кнопка в Image Ready

Теперь нажмите на кнопочки Unify Layer Position (не менять позицию слоя, первый замочек в ряду Unify) и Unify Layer Visibility (слой будет оставаться постоянно видимы, находится в том же ряду, только это уже второй замочек):

Ролловерная кнопка в Image Ready

Шаг 3

Перейдите на палитру Web Content (если у вас её нет, откройет через Window).
Находясь на первом слое, нажмите кнопочку Create layer-based rollover:

Ролловерная кнопка в Image Ready

Перейдите на воторой слой, на той же панельке нажмите кнопочку Create rollover state:

Ролловерная кнопка в Image Ready

Сделайте видимым второй слой.

Шаг 4

На панеле инструментов, нажмите кнопочку Preview Document (Y). Теперь попробуйте навести курсор на вашу кнопчку. Ну как? Чувствуете себя веб-дизайнером?)))

Ролловерная кнопка в Image Ready

Можно сделать так, например, чтобы ваше второе изображение появлялось, если вы кликните на первое изображение. Для этого кликните по вашему Rollover States'y правой кнопкой мыши и в выпавшем меня поставьте галочку на "Click":

Ролловерная кнопка в Image Ready

Для непосредственной загрузки роловера на сайт, воспользуйте палитрой Slice (если её нет, опять же попробуйте открыть через Window) и в поле URL введите адрес вашего сайта

Ролловерная кнопка в Image Ready

Заключение

Если вы хотите посмотерть, как работает ваша новая кнопочка в окне браузера исключетльно своего компьютера, просто в отдельной папочке создайте пустую веб-страничку, потом вернитесь в Image Ready File -> Save Optimized As..., выберите вашу веб-страничку, а поле Тип файла выберите: HTML and Images (*html). Сохраните, зайдите на вашу страничку с кнопочкой и наслаждайтесь!

Идея
Автор/Перевод: Roxanne
Просмотров: 1519 | Добавил: {Gm]NightStalkeR[Gm} | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма входа
Календарь новостей
«  Апрель 2008  »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
282930
Поиск
Друзья сайта

 

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0