Оформление кнопок

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

1. Создайте новый документ. Придайте его холсту квадратную форму со стороной размером в 1 дюйм (2,5 см) и выберите в качестве заполнителя прозрачный фон, как показано на рис. 14.32.

Рис. 14.32. Настройка параметров в окне диалога Новый (New)

2. Выберите инструмент Овальная область (Ellipse Marquee), показанный на рис. 14.33.

Рис. 14.33. Инструмент Овальная область (Ellipse Marquee)

3. Растяните рамку в пределах холста. Она не должна заполнять весь холст, но постарайтесь сделать ее круглой. Возможно, вы посчитаете нужным удерживать клавишу Alt (Windows) или Cmd (Mac OS), чтобы рамка растягивалась от центра к краям квадрата. Кроме того, можно удерживать клавишу Shift. Это поможет построить правильную окружность.
4. Увеличьте масштаб примерно до 200% и залейте выделенную область текущим основным цветом - черным.
5. Выберите команду меню Выделение - Сохранить область (Select - Save Selection). В появляющемся при этом окне диалога, показанном на рис. 14.34, щелкните на кнопке Да (OK).

Рис. 14.34. Окно диалога Сохранить выделенную область (Save Selection)

6. Пока выделенная область активна, выберите команду меню Выделение - Модификация - Сжать (Select - Modify - Contract).
7. Введите число 5, как показано на рис. 14.35, и щелкните на кнопке Да (OK). Это заставит границу области сжаться, отодвинувшись внутрь на 5 пикселей, как видно из рис. 14.36.

Рис. 14.35. Окно диалога Сжать область (Contract Selection)

Рис. 14.36. Сжатая выделенная область

8. Выберите новый основной цвет. Для нашего упражнения я использовал красный. Залейте им сжатую выделенную область основным цветом.
9. Выберите команду меню Выделение - Загрузить область (Select - Load Selection). Так как была сохранена только одна выделенная область, просто щелкните на кнопке Да (OK) в появившемся окне диалога, показанном на рис. 14.37. Исходный круг будет выделен точно по периметру.

Рис. 14.37. Окно диалога Загрузить выделенную область (Load Selection)

10. В меню Фильтр (Filter) выберите команду Сферизация (Spherize) и щелкните на кнопке Да (OK) в появившемся окне диалога. В итоге у вас должно получиться что-то похожее на рис. 14.38.

Рис. 14.38. Кнопка после применения сферизации

11. Убедившись, что кнопка все еще выделена, выберите команду Фильтр - Освещение - Эффекты освещения (Filter - Render - Lighting Effects).
12. В окне диалога Эффекты освещения (Lighting Effects), показанном на рис. 14.39, настройте параметры источника света, перетаскивая маркеры, расположенные по периметру управляющего эллипса в поле просмотра. Идея состоит в том, чтобы с помощью света придать кнопке объемный вид. Используйте рис. 14.39 в качестве эталона при настройке параметров освещения и перетаскивайте маркеры управляющего эллипса, пока вид кнопки вас не устроит. В завершение щелкните на кнопке Да (OK).

Рис. 14.39. Окно диалога Эффекты освещения (Lighting Effects)

13. Теперь последний штрих, призванный завершить придание кнопке трехмерного вида. Выберите команду меню Фильтр - Освещение - Блик (Filter - Render - Lens Flare). Появится окно диалога, показанное на рис. 14.40.

Рис. 14.40. Окно диалога Блик (Lens Flare)

14. Настройте положение блика, перетаскивая перекрестье в поле просмотра окна диалога и расположив блик в левом верхнем углу кнопки, как показано на рис. 14.40. Кроме того, советую вам установить переключатель 105 мм (105 mm Prime). Это обеспечит более широкий блик. Можно настроить яркость блика, перетаскивая ползунок в верхней части окна. Я остановился на отметке 105%. Попробуйте установить большую или меньшую яркость. Сделайте, как вам понравится.
15. Завершив настройку, щелкните на кнопке Да (OK).
16. Вам остается уменьшить масштаб до величины 100% и посмотреть, что получилось. Если кнопка вас устаивает, сохраните ее в файле формата GIF с прозрачным фоном (или в виде обычного GIF-файла, если кнопка будет размещаться на странице с белой заливкой) и включите в состав HTML- документа.
    Если вы хотите уменьшить размер кнопки, выберите команду меню Изображение - Размер изображения (Image - Image Size) и введите новые значения высоты и ширины изображения, как показано на рис. 14.41. Если требуется изменить размер только по одной из координат, скажем ширину, сбросьте флажок Сохранить пропорции (Constrain Proportions) в нижней части окна диалога. Имейте, однако, в виду, что после сброса указанного флажка изображение может растянуться или сжаться.
    
    Рис. 14.41. Окно диалога Размер изображения (Image Size)

    Кнопки с двумя фиксированными состояниями

    Кнопки с двумя фиксированными состояниями меняют вид, когда на них устанавливается указатель мыши. Это кажется чудом, но на самом деле все делает небольшой сценарий JavaScript.
    Я не собираюсь в этой книге углубляться в дебри JavaScript, но поместил фрагмент описания Web-ресурсов в кодах данного языка (позаимствованный с Web-узла издательства Hayden - http://www.hayden.com) на сопроводительный компакт-диск. Этот фрагмент, если его включить в HTML-документ, обеспечит в нужный момент замену одного изображения кнопки на другое.
    Основная идея состоит в том, что, если после загрузки документа в броузер "несчастная жертва", обратившаяся к вашему Web-узлу, укажет курсором на какую-то из кнопок или на иной элемент оформления, связанный со сценарием JavaScript, броузер будет знать, что следует вывести на экран другой вариант изображения этой кнопки или элемента оформления.
    Иными словами, в момент размещения указателя мыши над одним из объектов, специально описанных в документе, броузер выводит на экран другой вариант изображения этих участков. Обычно, поскольку изображения малы по размерам, это происходит очень быстро, так что кнопка меняет вид, имитируя эффект нажатия.
    Первое, что следует сделать, - это изменить вид кнопки так, чтобы у вас получилось два варианта ее графического образа: в обычном и в активном ("нажатом") состоянии.
    Существует множество способов изменения внешнего вида кнопки, но в данном случае воспользуемся следующим:

    1. Если вы не закончили предыдущее упражнение, откройте файл.
    2. Увеличьте масштаб изображения примерно до 300%, чтобы лучше видеть то, что будете делать.
    3. Выберите инструмент Волшебная палочка (Magic Wand), показанный на рис. 14.42.
    
    Рис. 14.42. Инструмент Волшебная палочка (Magic Wand)
    4. Щелкните на белом поле изображения. Все оно будет выделено, как показано на рис. 14.43.
    
    Рис. 14.43. Выделение фона инструментом Волшебная палочка (Magic Wand)
    5. Выберите команду меню Выделение - Инверсия (Select - Inverse). Результат показан на рис. 14.44.
    6. Выберите команду меню Выделение - Модификация - Расширить (Select - Modify - Expand). Введите число 2 в окне диалога, показанном на рис. 14.45.
    
    Рис. 14.44. Инвертированная выделенная область
    Рис. 14.45. Окно диалога Расширить область (Expand Selection)
    7. Выберите цвет, с помощью которого вы хотели бы изобразить активное состояние кнопки. Для нашего упражнения я выбрал темно-синий.
    8. Выберите инструмент Заливка (Paint Bucket) и щелкните на белом поле внутри выделенной области, как показано на рис. 14.46.
    
    Рис. 14.46. Инструмент Заливка (Paint Bucket) за работой

    Инструмент Заливка (Paint Bucket) зальет белую часть выделенной области, оставив саму кнопку нетронутой, как показано на рис. 14.47.

    
    Рис. 14.47. Заливка выделенной области произведена