Photoshop 4-5 - учебный курс
         

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


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

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

Создавать и использовать такие кнопки довольно просто и забавно. Посмотрим, что у нас получится.

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


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

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


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

  • Растяните рамку в пределах холста. Она не должна заполнять весь холст, но постарайтесь сделать ее круглой. Возможно, вы посчитаете нужным удерживать клавишу Alt (Windows) или Cmd (Mac OS), чтобы рамка растягивалась от центра к краям квадрата. Кроме того, можно удерживать клавишу Shift. Это поможет построить правильную окружность.

  • Увеличьте масштаб примерно до 200% и залейте выделенную область текущим основным цветом - черным.

  • Выберите команду меню Выделение - Сохранить область (Select - Save Selection). В появляющемся при этом окне диалога, показанном на рис. 14.34, щелкните на кнопке Да (OK).


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

  • Пока выделенная область активна, выберите команду меню Выделение - Модификация - Сжать (Select - Modify - Contract).

  • Введите число 5, как показано на рис. 14.35, и щелкните на кнопке Да (OK). Это заставит границу области сжаться, отодвинувшись внутрь на 5 пикселей, как видно из рис. 14.36.






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



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

  • Выберите новый основной цвет. Для нашего упражнения я использовал красный. Залейте им сжатую выделенную область основным цветом.


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




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

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




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

  • Убедившись, что кнопка все еще выделена, выберите команду Фильтр - Освещение - Эффекты освещения (Filter - Render - Lighting Effects).


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




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

    ЗАМЕЧАНИЕ Некоторые компьютеры типа Macintosh обходятся без устройства, именуемого FPU (сопроцессор вычислений с плавающей точкой). Фильтр Эффекты освещения (Lighting Effects) требует многочисленных математических расчетов, так что наличие подобного сопроцессора необходимо. Имеется также программное обеспечение, называемое SoftFPU, которое вы можете установить на компьютере взамен сопроцессора.

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






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

  • Настройте положение блика, перетаскивая перекрестье в поле просмотра окна диалога и расположив блик в левом верхнем углу кнопки, как показано на рис. 14.40. Кроме того, советую вам установить переключатель 105 мм (105 mm Prime). Это обеспечит более широкий блик. Можно настроить яркость блика, перетаскивая ползунок в верхней части окна. Я остановился на отметке 105%. Попробуйте установить большую или меньшую яркость. Сделайте, как вам понравится.


  • Завершив настройку, щелкните на кнопке Да (OK).


    • Вам остается уменьшить масштаб до величины 100% и посмотреть, что получилось. Если кнопка вас устаивает, сохраните ее в файле формата GIF с прозрачным фоном (или в виде обычного GIF-файла, если кнопка будет размещаться на странице с белой заливкой) и включите в состав HTML- документа.

    Если вы хотите уменьшить размер кнопки, выберите команду меню Изображение - Размер изображения (Image - Image Size) и введите новые значения высоты и ширины изображения, как показано на рис. 14.41. Если требуется изменить размер только по одной из координат, скажем ширину, сбросьте флажок Сохранить пропорции (Constrain Proportions) в нижней части окна диалога. Имейте, однако, в виду, что после сброса указанного флажка изображение может растянуться или сжаться.



    Рис. 14.41. Окно диалога Размер изображения (Image Size)


    Содержание раздела