Техника Web-дизайна для студента

Эффекты слоев

К слоям могут быть применены различные эффекты, которые позволяют видоизменить изображение. Эффекты применяются ко всем объектам, находящимся на слое. К каждому слою, кроме Background (Фон), можно применить несколько эффектов. Что­бы использовать эффект, нужно выделить слой в палитре Layers (Слои) и нажать кнопку Add a layer style (Добавить эффект слоя) в нижней части палитры (Крайняя левая кнопка). Щелчок по кнопке раскрывает меню, выбор любой команды которого при­ведет к открытию диалогового окна Layer Style (Эффект слоя). В столбце Styles (Эффекты) диалогового окна перечислены сле­дующие эффекты слоев:

О Drop Shadow (Внешняя тень), Inner Shadow (Внутренняя тень);

О Outer Glow (Внешнее свечение), Inner Glow (Внутреннее све­чение);

О Bevel and Emboss (Фаска и рельеф). Дополнительные разделы:

• Contour (Профиль) — способ создания рельефа;

• Texture (Текстура) — декоративная заливка;

О Satin (Атласное покрытие); о Color Overlay (Однородная заливка); о Gradient Overlay (Градиентная заливка); о Pattern Overlay (Узорная заливка); о Stroke (Обводка).

Для выбора соответствующего эффекта нужно установить фла­жок рядом с его названием, а для настройки параметров — вы­делить название эффекта. Более детально с некоторыми эффек­тами познакомимся в процессе рассмотрения примеров.

Примеры использования эффектов слоев

Создание кнопки

При разработке HTML-документов часто возникает необходи­мость в использовании графических объектов в качестве кнопок. Рассмотрим последовательность операций по созданию изобра­жений простых кнопок.

О Воспользовавшись командой меню File | New (Файл | Соз­дать), откроем диалоговое окно New (Создать) и установим размеры окна 100 х 100 пикселей. В поле Resolution (Разре­шение) можно оставить значение, предлагаемое по умолча­нию, так как для экранного воспроизведения изображения разрешение роли не играет. В списке Color Mode (Режим) выбирается цветовая модель изображения RGB Color. В со­седнем списке определяется глубина цвета изображения. Ее значение рекомендуется установить 8 bit. Из списка Back­ground Contents (Содержимое фона) нужно выбрать Transpar­ent (Прозрачный фон).

О В блоке выбора цвета на панели инструментов в качестве основ­ного цвета (Foreground) выбираем желаемый цвет кнопки (на­пример синий), а в качестве фонового цвета (Background) — бе­лый.

□ Из группы векторных инструментов выбираем инструмент Ellipse Tool (Эллипс) и рисуем круг диаметром 100 пикселей. Так как с помощью мыши это сделать затруднительно, то, построив произвольный круг, нужно выбрать инструмент Move Tool (Перемещение), установить флажок Show Bounding

Box (Показать маркеры) на панели параметров и щелкнуть мышью по одному из появившихся маркеров. На панели па­раметров появятся поля X и Y, в которые нужно ввести по 50 пикселей (координаты центра круга) и поля W и Н, в кото­рые нужно ввести по 100 пикселей (ширина и высота фигу­ры). Если в полях установлены другие единицы измерения, то перед установкой размеров нужно перейти к пикселям, щелкнув правой кнопкой по соответствующему полю. Завер­шим изменение размеров нажатием клавиши Enter.

О В палитре Layers (Слои) нажмем кнопку Add a layer style (До­бавить эффект слоя) в нижней части палитры и в списке эф­фектов выберем Bevel and Emboss (Фаска и рельеф). В диало­говом окне Layer Style (Эффект слоя) установим следующие значения параметров для этого эффекта: Style (Стиль) — In­ner Bevel (Внутренняя фаска), Technique (Техника) — Smooth (Сглаженная), Depth (Глубина фаски) — 100 % (от размера Size), Direction (Направление) — Up (Выпуклость), Size (Раз­мер теневой области) — 10 рх, Soften (Смягчение границ) — 10 рх. Остальные параметры оставим без изменений. Резуль­тат показан на рис. 3.20, а. Обратим внимание, что в палитре Layers (Слои) появилась запись с названием примененного эффекта. При необходимости изменить установленные пара­метры эффекта достаточно сделать двойной щелчок по этой записи, что приведет к открытию диалогового окна Layer Style (Эффект слоя).

О Создадим копию слоя, выбрав команду Duplicate Layer (Ко­пия слоя) в меню палитры Layers (Слои).

О При включенном инструменте Move Tool (Перемещение) вновь щелкнем по одному из маркеров и в поля W и Н пане­ли параметров введем новое значение — 70 рх. Завершим из­менение размеров нажатием клавиши <Enter>. Двойным щелчком по названию эффекта в палитре Layers (Слои) от­кроем диалоговое окно Layer Style (Эффект слоя) и переклю­чатель Direction (Направление) переведем в положение Down (Вогнутость), оставив остальные параметры без изменения. Получим законченное изображение нажатой кнопки (рис. 3.20, Ь), которое можно сохранить в формате GIF (ко­манда Save for Web (Сохранить для Web) меню File (Файл)).

А)

Рис. 3.20. Создание изображения кнопки с использованием эффектов слоев: а — применение эффекта выпуклости,

6 — применение эффекта вогнутости к фрагменту изображения (нажатая кнопка), с — применение эффектов выпуклости и вогнутости к разным фрагментам (не нажатая кнопка)

О Создадим копию последнего слоя (Shape 1 сору), выбрав ко­манду Duplicate Layer (Копия слоя) в меню палитры Layers (Слои).

О Включим инструмент Move Tool (Перемещение), щелкнем по одному из маркеров и в поля W и Н панели параметров вве­дем 64 рх. Завершим изменение размеров нажатием клавиши <Enter>.

О Двойным щелчком по названию эффекта в слое Shape 2 сору палитры Layers (Слои) откроем диалоговое окно Layer Style (Эффект слоя) и переключатель Direction (Направление) пе­реведем в положение Up (Выпуклость), оставив остальные параметры без изменения. В результате получим изображение неактивной кнопки, которое также можно сохранить в фор­мате GIF (рис. 3.20, с).

В некоторых случаях могут понадобиться кнопки разных цветов, например, когда при наведении на кнопку курсора она изменяет свой цвет. Такая задача легко решается с помощью программи­
рования на JavaScript после изучения главы 8. Чтобы быстро из­менить цвет рисунка нужно воспользоваться командой меню Image | Adjustments | Hue/Saturation (Изображение | Настройки | Оттенок/Насыщенность). В диалоговом окне Hue/Saturation (Оттенок/Насыщенность) необходимо в списке Edit (Правка) установить режим Master (Мастер) и перемещать ползунок Hue (Оттенок) влево или вправо, наблюдая изменение цвета кнопки при установленном флажке Preview (Предварительный про­смотр). Ползунок Saturation (Насыщенность) позволяет менять насыщенность оттенка, a Lightness (Яркость) — яркость.

Создание пунктов и разделов меню

Рассмотрим пример создания пунктов или разделов меню.

□ В блоке выбора цвета панели инструментов установим основ­ной цвет (Foreground) — темно-синий, фоновый цвет (Back­ground) — белый.

□ Создадим новое изображение размером 70 х 15 рх, воспользо­вавшись командой меню File | New (Файл | Создать). В диалого­вом окне New (Создать) выберем: цветовую модель изображения (Color Mode) — RGB Color, глубину цвета изображения — 8 bit, содержимое фона (Background Contents) — Background Color (Фоновый цвет).

□ Чтобы стало возможным применение эффектов, переименуем слой Background (Фон), дважды щелкнув по имени слоя в па­литре Layers (Слои). Согласимся с предлагаемым именем Layer 0.

О Применим к слою эффект Bevel and Emboss (Фаска и Рель­еф), щелкнув по кнопке Add a layer style (Добавить эффект слоя) в нижней части палитры Layers (Слои) и выбрав в от­крывшемся меню название эффекта. В диалоговом окне Layer Style (Эффект слоя) установим следующие значения параметров для этого эффекта: Style (Стиль) — Inner Bevel (Внутренняя фаска), Technique (Техника) — Smooth (Сгла­женная), Depth (Глубина фаски) — 100 %, Direction (Направ­ление) — Up (Выпуклость), Size (Размер теневой области) — 5 рх, Soften (Смягчение границ) — 5 рх.

□ Выберем инструмент Horizontal Туре (Горизонтальный текст), на панели параметров инструмента установим гарнитуру шрифта Times New Roman, начертание — bold (полужирный), размер — 12 pt, метод сглаживания шрифта — None (Сгла­живание отсутствует). Поместим текст пункта меню, напри­мер Пункт 1, в площадь изображения.

□ Осуществим выравнивание текста относительно краев изо­бражения инструментом Move Tool (Перемещение) при уста­новленном флажке Show Bounding Box (Показать маркеры). Для перемещения текста удобно использовать клавиши управления курсором.

□ Сохраним рисунок, не содержащий прозрачного фона, в формате JPEG.

Готовый рисунок выглядит следующим образом

Пункт 1

Проделаем аналогичную работу, построив еще три рисунка для других пунктов меню. Кроме того, необходимо создать еще один комплект рисунков с аналогичными надписями, но имеющими другой цвет шрифта и фона. В случае использования програм­мы-сценария данный комплект позволит изменять цвет пункта меню при наведении на него указателя мыши. Такая программа будет описана в главе 8. Для создания нового комплекта рисун­ков можно поменять местами основной (Foreground) и фоновый (Background) цвета в блоке установки цвета. После этого необхо­димо повторить все действия по созданию комплекта рисунков для пунктов меню. Теперь белый шрифт будет располагаться на темно-синем фоне.

||В?(ЯЯ

При создании разделов меню проделаем следующие действия.

□ Вновь установим в блоке установки цвета панели инструмен­тов основной цвет (Foreground) — темно-синий, фоновый цвет (Background) — белый.

□ Создадим новое изображение размером 85 х 20 рх, восполь­зовавшись командой меню File | New (Файл | Создать). Ос­тальные установки диалогового окна New (Создать) сделаем такими же, как при создании пунктов меню.

□ Используя инструмент Horizontal Туре (Горизонтальный текст), введем название раздела, например РАЗДЕЛ 1, предварительно установив на панели параметров гарнитуру шрифта Times New Roman, начертание — bold (Полужирный), размер — 12 pt, ме­тод сглаживания шрифта — None (Сглаживание отсутствует). Открыв палитру Character (Шрифт) и выделив введенный текст, в списке Set the tracking for the selected characters (Уста­новка расстояния между выделенными символами) установим расстояние между символами 75.

О Выбрав инструмент Move Tool (Перемещение) и установив флажок Show Bounding Box (Показать маркеры), осуществим выравнивание текста относительно краев изображения.

О Применим к текстовому слою эффект Drop Shadow (Внешняя тень). В диалоговом окне Layer Style (Эффект слоя) устано­вим следующие значения параметров для этого эффекта: Opacity (Непрозрачность) — 100 %, Distance (Смещение) — 5 рх, Spread (Размытие) — 3 %, Size (Размер) — 5 рх. Осталь­ные параметры оставим без изменения.

□ Сохраним рисунок в формате JPEG.

В результате получим следующее изображение

РАЗДЕЛ 1

Создадим еще 2 рисунка с названиями других разделов и сохра­ним вместе с рисунками пунктов. Все они будут использованы в

Главе 8 для создания раскрывающихся меню.

Создание логотипа

Рассмотрим пример создания логотипов.

О Используя команду меню File | New (Файл | Создать) созда­дим новое изображение размером 150 х 100 рх. В диалоговом окне New (Создать) выберем: цветовую модель изображения Color Mode — RGB Color, глубину цвета изображения — 8 bit, содержимое фона (Background Contents) — Transparent (Про­зрачный фон).

□ Выберем инструмент Horizontal Туре (Горизонтальный текст) и на панели параметров установим гарнитуру шрифта Mono­type Corsiva, размером 72 pt, метод сглаживания — Crisp (Четкое).

О Установим курсор в площади изображения, введем букву "А" и завершим ввод. Применим к букве эффект Bevel and Emboss (Фаска и рельеф).

□ Введем букву "П", сохранив те же параметры шрифта. Буква разместится на новом слое, к которому применим эффект Bevel and Emboss (Фаска и рельеф).

О Инструментом Move Tool (Перемещение) переместим буквы относительно друг друга, чтобы получился следующий ре­зультат:

□ Сохраним рисунок в формате GIF.