Кнопки

Вторым специфическим элементом дизайна Web-страниц являются графические элементы управления — кнопки. Рисование кнопок стало своеобразным особым "жанром", и если вы не хотите ударить в грязь лицом, используйте возможности Adobe Photoshop 5.5 — эффекты для слоев. Они позволяют создавать самые замысловатые кнопки в несколько щелчков мышью. Набор эффектов и их комбинации позволяют создавать огромное количество вариантов кнопок. Ниже приведен список предопределенных эффектов:

Эффект	Имитация	Параметры
Drop Shadow	Тень от объекта на плос кости. Объект производит впечатление приподнятого над фоном	Режим наложения (Mode). Непрозрачность (Opacity). Цвет тени. Угол, под которым направлен свет (Angle). Расстояние от объекта (Distance). Размывка тени (Blur) "Густота" тени (Intensity)
Inner Shadow	Тень от границ объекта на самом объекте Объект производит впечатление вырезанного из фона	Режим наложения (Mode) Непрозрачность (Opacity) Цвет тени Угол, под которым направлен свет (Angle) Расстояние от объекта (Distance) Размывка тени (Blur) "Густота" тени (Intensity)
Outer Glow	Свечение объекта	Режим наложения (Mode) Непрозрачность (Opacity) Цвет свечения Величина свечения (Blur) Яркость свечения (Intensity)
Inner Glow	Свечение объекта изнутри	Режим наложения (Mode) Непрозрачность (Opacity) Цвет свечения Величина свечения (Blur) Яркость свечения (Intensity) Выбор светящейся части объекта— края (Edges) или центр (Center)
Bevel and Emboss	Барельеф и горельеф. Объект выглядит выдавленным на фоне, вдавленным в фон или сам приобретает рельеф	Режим наложения (Mode) для теней Режим наложения (Mode) для светов Непрозрачность (Opacity) для теней Непрозрачность (Opacity) для светов Цвет светов Цвет теней Вариант эффекта Внешний скос (Outer Bevel) Внутренний скос (Inner Bevel) Барельеф (Emboss) Вдавленный барельеф (Pillow Emboss) Угол, под которым направлен свет (Angle) Высота рельефа (Depth) Размывка рельфа (Blur) Выбор между барельефом (Up) и горельефом (Down)

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

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

1. Создайте новый документ размером 200х200 пикселов и белым фоновым слоем с помощью команды New... меню File.
2, С помощью инструмента Elliptical Marquee выделите круг с диаметром примерно на 30 пикселов меньшим, чем ширина документа.
3. Откройте документ с текстурой мрамора rnarble.jpg, который использовался в упражнениях предыдущего раздела.
4. Выделите весь документ и скопируйте в буфер обмена.
5. Закройте документ rnarble.jpg.
6. Вставьте текстуру из буфера обмена в выделенную область нового документа с помощью команды Paste Into меню Edit.
7. Выберите команду Bevel and Emboss... меню Effects.
8. Перед вами диалоговое окно самого сложного из эффектов (Рисунок 9.26). Грубо говоря, эффект рельефа создается четырьмя растяжками, примыкающими к объекту. Две смежные растяжки создают переходы между цветом объекта и более темным цветом. Две противолежащие растяжки, напротив, осуществляют переход от цвета объекта к более светлому.

Совет
Совет
Если вы желаете увидеть механизм эффекта, воспользуйтесь командой Create Layers меню Effects. Она помещает растяжки, создающие эффект рельефа, на отдельные слои.

9. С помощью элементов управления полей Highlight и Shadow определяются конечные цвета этих растяжек и режим их наложения на объект или фон. По умолчанию это черный цвет для теней и белый цвет для светов. Для теней определен режим Multiply, а для светов — Screen. Эти установки годятся для большинства случаев. Оставьте их в исходном состоянии.

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