Элементы дизайна в стиле web 2.0. Стеклянная (лакированная) кнопка.

На многих сайтах, выполненных в стиле web 2.0, можно увидеть объемные, словно бы лакированные объекты (кнопки, баннеры, указатели и пр.). Для достижения подобного эффекта вовсе не обязательно использовать 3D программы, как например 3D Studio Max™. Все это можно леххко сделать в Photoshop™ причем с минимальными усилиями, а эффект получится просто замечательный. :)
Итак, нарисуем крупную, яркую кнопку, призывающую посетителя сайта прикупить у нас чего-нибудь нужного или полезного. Для этого открываем фотошоп и создаем новый документ размерами 400х200 пикселей. Затем создаем новый слой и творим на нем. Выбираем инструмент Rounded Rectangle Tool (скругленный прямоугольник), в настройках инструмента выставляем радиус закругления в 20 пикселей и включаем режим вектора, нажав кнопку Paths. Теперь рисуем нашу будущую кнопку нужного размера. Если хотите, чтобы кнопка была строго квадратная, то прежде нажмите и удерживайте клавишу Shift.
Теперь нажав Ctrl+Enter, преобразуем наш контур в выделение (напоминаю, что все действия с клавиатурой нужно производить при включенной английской раскладке) и зальем любым цветом при помощи ведерка (Paint Bucket Tool).
Далее зальем выделение красивым градиентом. Для этого заходим в Layer – Layer Style – Gradient Overlay. Здесь в строке Blend Mode (Режим) нужно включить Multiply (Умножение) и выбрать из палитры подходящий градиент. Обычно берется двухцветный, от светлого к темному тону.
Получаем вот такую заготовку:

Теперь приделаем к нашей кнопке тень. Вообще тень — это универсальный инструмент для того, чтобы придать элементу объем, но и злоупотреблять им не стоит, иначе сам объект может «зависнуть» над страницей и будет выглядеть нелепо. Идем в Layer – Layer Style – Drop Shadow. В настройках выставим Opacity (Прозрачность) – 45%, а угол падения – 90°.
Создадим следующий слой, где будет красоваться призывная надпись. Выполним ее белым цветом.

Теперь сделаем на кнопке блик, чтобы ещё сильнее подчеркнуть объем. Для этого опять создадим новый слой и на нем при помощи все того же инструмента Rounded Rectangle Tool нарисуем поверх первого второй прямоугольник, но теперь уже со скруглением в 18 пикселей, отступив от краев первого на 2 пиксела (для более точного попадания можно использовать линейки). Снова нажимаем Ctrl+Enter чтобы преобразовать контур в выделение, и заливаем его градиентом от белого к прозрачному (просто выбираем инструмент Gradient Tool, выставляем цвет и элементарно проводим мышкой сверху вниз по рисунку). Зададим этому слою прозрачность в 70%. Получим вот это:

А теперь самое интересное! Оставаясь на этом же слое, нарисуем криволинейный контур при помощи инструмента Pen Tool (Перо). Делается это элементарно: сначала данным инструментом (в настройках должна быть нажата кнопка Paths) расставляем четыре якорных точки вокруг рисунка – две по бокам и две под ним – получим прямоугольную область. Теперь переключим перо на инструмент Convert Point Tool (находится в том же наборе инструментов, где и само перо). Кликнув на контуре, активируем якорные точки. Теперь их можно корректировать. Нажав на любую и двигая мышкой, придадим контуру вот такой вид:

Теперь снова клавишами Ctrl+Enter преобразуем контур в выделение и смело нажмем клавишу Delete. Нижняя часть выделения исчезнет, и мы получим отличный яркий блик на нашей кнопке! Все просто. Enjoy! :)