Если уж пошла речь о Web2.0, то удержаться и не сделать урок по так называемому AQUA-стилю я не могу. Уж извините. Понимаю, что многих, наверное, давно потрясывает от всех этих бликов на кнопках и иконках. Но надо терпеть – мода, елы-палы :). Урок этот однако не о кнопках, а опять о заголовках и о больших буквах, правда, с кнопками дело обстоит примерно также.
Открываем Adobe Photoshop и создаем новый документ. В нашем примере, я использовал следующие параметры документа:
- - размер (Widht, Height ): 355х100 pixels;
- - разрешение (Resolution): 72 pixtls/inch;
- - фон (Background Contents): Transparent (прозрачный)
Теперь создаем фон для нашего заголовка. Кликаем на иконку цвета Foreground:
И в открывшемся окне Color Picker выбираем нужный цвет. Я использовал цвет: #347D85, вы можете выбрать любой другой.
Затем в Панели Инструментов (Tools) выбираем инструмент Ведро (Paint Bucket):
И заливаем фон в документе. После этого возвращаем настройки цвета в исходное (черно-белое) состояние. Для этого в Панели Инструментов (Tools) кликаем на маленькие черно-белые квадратики слева от больших квадратов - идентификаторов цвета:
Затем выбираем курсор для написания текста:
И пишем заголовок. Понятно,что я опять написал PSDTalk - вы же пишите что-нибудь свое. Есть одна особенность, для этого эффекта важно, чтобы шрифт был толстый или имел жирный вариант начертания (bold). В примере я использовал шрифт Tahoma (style: bold; size: 72pt ). На этом этапе картинка дожна выглядить так:
А сам документ должен состоять из двух слоев (Layers):
- - нижний слой - с фоном;
- - верхний слой - с текстом.
Теперь дублируем слой с текстом, для этого в Панели Слоев (Layers) кликаем левой клавишей мыши на строку слоя, и в открывшемся меню выбираем пункт Duplicate Layer:
Получилось? Теперь появился третий слой с текстом. Сразу отключаем его отображение, он нам пока не пригодится. Кликаем в строке слоя панели Layers на иконку-глаз:
Возвращаемся к среднему слою и пока работаем только с ним. Теперь нам надо настроить его свойства. Для этого нам необходимо открыть Редактор Свойств Слоя (Layer Style). Это делается просто - двойной клик на строку слоя в панели (Laeyrs):
И перед вами открывается окно Layer Style. В редакторе Layer Style слева расположен список свойств, а справа - панель с ползунками и переключателями для их настройки. В этом уроке мы будем настраивать три свойства среднего слоя:
- - Gradient Overlay (градиент);
- - Strocke (не знаю как лучше перевисти но смысл - кромка);
- - Drop Shadow (отбрасываемая тень);
Для того чтобы перейти к настройке определенных свойств слоя, кликните мышкой на название этого свойства в левой панели редактора Layer Style, а затем настройте каждое свойство в соответствие с рисунком. Внимательно смотрите на рисунки – постарайтесь повторить у себя все положения ползунков и переключателей.
1. Настраиваем Gradient Overlay :
2. Настраиваем Strocke (Этот эффект еще называют Sticker):
3. Настраиваем Drop Shadow(делаем тень):
Всё теперь жмем кнопку: Ok. У вас получилась вот такая картинка:
Картинка уже вполне ничего себе, но необходимо добавить легкий блик... (это и будет AQUA эффект). Блик делаем из верхнего (третьего) слоя с текстом, из того слоя, отображение которого, мы отключили в начале урока. Теперь включаем этот слой - кликаем на пустой квадратик в его строке, чтобы там вновь появилась иконка-глаз.
Пришло время подрезать верхнюю половину надписи третьего слоя. Чтобы это можно было сделать, сначала необходимо переключить слой из текстового формата - в формат обычной картинки. Идем в панель слоев (Layers) и кликаем левой клавишей мыши на строку верхнего слоя и в открывшемся локальном меню, выбираем пункт Rasterize layer.
Затем в Панели Инструментов (Tools) выбираем инструмент для выделения прямоугольников:
И аккуратненько выделяем на верхнем слое прямоугольную область, таким образом, чтобы верхняя половина слоя была под выделением, а нижняя - свободна от него:
Жмем на клавиатуре Delete и обрезаем верхнюю половину надписи. Снимаем выделение - Ctrl+D. И вот что у нас должно получится:
Как видете, блик почти готов, однако, он еще выглядит грубовато. Надо сделать его чуть нежнее. Опять открываем Редактор Свойств Слоя (Layer Style) - двойной клик по строчке верхнего слоя:
В редакторе Layer Style для блика мы будем настраивать два свойства:
- - Gradient Overlay (градиент);
- - Blending Option (смешивание свойств).
4. Настраиваем Gradient Overlay :
5. Настраиваем Blending Option:
Ну вот и все! Теперь жмем Ok и получаем заголовок оформленный в AQUA стиле.
Если по ходу объяснения что-то было не понятно или у вас что-то не получилось, вы всегда можете скачать psd-файл урока со всеми слоями и настройками:
