Пятница, 18.08.2017, 10:53:10
MyPhotoshop
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
Форма входа
Категории раздела
Мои статьи [2]
Элементы веб-дизайна [14]
Уроки Фотошопa [19]
Уроки анимации [34]
Поиск
Наш опрос
Оцените мой сайт
Всего ответов: 244
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • Инструкции для uCoz
  • Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
     Каталог статей
    Главная » Статьи » Элементы веб-дизайна

    Ролловерная кнопка в Image Ready
    Вступление

    Этот урок больше расчитан на веб-дизайнеров (я не говорю, что обычным пользовтелям он не нужен, ради собственного разивития можете попробовать его сделать, кто знает, вдруг после этого вы поймёте, что вы прирожденный веб-дизайнер?)))
    С ролловерными кнопками все мы часто сталкиваемся, но всё-таки, если вы и понятия не имеете, что это такое, я поясню: помните сайты, на которых при наведению на кнопку она меняла свой цвет (становилась вдавленной, выпуклой - нужное подчеркнуть), а когда вы убирали с неё курсор, она становилась такой же, как и до наведения? Это и есть ролловерные кнопки.
    Ролловерные кнопки, как правило, делают в программе по верстке сайтов Дримивер, но в Фотошопе, точнее Image Ready, как мне кажется, возможностей большей для их создания. И так... приступим!

    Шаг 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). Сохраните, зайдите на вашу страничку с кнопочкой и наслаждайтесь!
    Категория: Элементы веб-дизайна | Добавил: myphotoshop (29.08.2008) | Автор: photoshopcafe.com
    Просмотров: 842 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Имя *:
    Email *:
    Код *:
    Copyright MyCorp © 2017