Рисуем кнопки в стиле Web 2.0

В последнее время разработка дизайна в стиле Web 2.0 стала очень популярной, такой дизайн отличаются легкостью восприятия и удобством пользования (юзабилити). Основными элементами дизайна сайта в стиле Web 2.0 являются звездочки, крупные шрифты, обилие градиентов и гламурные кнопки. Именно про создание таких кнопок и пойдет речь.

Что я подразумеваю под словами гламурные кнопки — это кнопки, с бликами и отражениями как от стеклянной поверхности. В качестве примера можно привести кнопки в операционной системе Windows Vista или Mac OS X. Такой стиль кнопок еще называют «Aqua-Style».

В этом уроке я приведу пример рисования простой кнопки интерфейса медиа плеера. Итак, для начала работы нам нужен фотошоп (я использую Adobe Photoshop CS3) и хоть приблизительное представление того, как должна выглядеть наша кнопка:)

Шаг 1.

Рисуем круг (т. к. кнопка будет круглой) с помощью инструмента Marquee Tool (M) зажав, при этом, клавишу Shift и заливаем его произвольным цветом, например, #7ebc00. Размер не большой, т. к. кнопка на пол экрана нам не нужна.

Шаг 2.

Дважды кликаем на слое с нашим кругом, появиться окно Layer Style, в разделе Drop Shadow ставим Opacity = 10%, Distance = 0px, Size = 50px.

В разделе Bevel and Emboss в подразделе Structure ставим Size = 2px, Soften = 6px. В подразделе Shading ставим оба ползунка с Opacity = 46%. Для Shudow Mode задаем цвет такой же как у нашего круга.

В разделе Stroke ставим Size = 5px. В поле Fill Type выбираем Gradient, далее кликаем на значке поля Gradient , и в появившимся окне выбираем цвета для градиента, левый край — #ddecf0, правый — #ffffff (для задания цвета краю, нужно кликнуть на нижний ползунок, затем на прямоугольнике ниже).

Кликаем ОК, ободок для кнопки готов.

Шаг 3.

Создаем новый слой (Ctrl+J). Зажав клавишу Ctrl кликаем на слое с кругом, причем не на название слоя, а на превью слоя, таким образом, появиться выделение в форме нашего круга (можно так же выделить круглую область и с помощью инструмента Marquee Tool (M) зажав при этом клавишу Shift).

Далее выбираем инструмент градиент (G) с белим цветом с одного края и 0% прозрачности с другого. Рисуем градиент на нашей выделенной области, таким образом, чтобы белый цвет был сверху. Далее нужно подвинуть этот градиент к верхнему краю круга и уменьшить его высоту раза в два, так чтобы получился овал. В результате у вас должно получиться следующее.

Если же градиент будет выходить за рамки круга с ободком — это можно исправить так: сделать выделение по форме круга и, находясь на слое с градиентом нажать на иконке маски (внизу возле иконки добавления нового слоя), таким образом, останется видимой только область в круге.

Шаг 4.

На новом слое рисуем небольшой овал (раза в три меньше чем наш основной круг) с цветом как у основного круга. Помещаем его на наш круг и ставим режим наложения слоя Screen, а прозрачность около 55%. Далее Filters -> Blur -> Gaussian Blur ставим радиус размытия равный 3-5px. Помещаем это пятно в нижнюю часть круга.

Шаг 5.

На новом слое рисуем белый треугольник в виде стандартных кнопок Play или же просто надпись. Помещаем его в центр нашей кнопки. Можно еще в свойствах этого слоя добавить Outer Grow с прозрачностью 45%, для эффекта свечения треугольника.

Все, наша кнопка готова. Далее эту тему можно развивать и делать кнопки разного формата и цвета.

Вот такой интерфейс получился у меня в итоге, делая аналогичным способом:

Еще добавлю, что параметры, приведенные здесь, не являются строгими, и зависят от того какой изначально размер кнопки вы выбрали, т.е. можно изменять настройки таким образом, чтобы конечный вариант вам понравился.

Исходник в формате psd можно скачать здесь.

Автор: Александр Бублиенко