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

Сегодня я хочу показать Вам на нескольких примерах, как можно создать кнопки в стиле Web 2.0 с помощью Adobe Photoshop CS2.

• Открываем Photoshop, создаем новый документ для кнопки.
• С помощью инструмента Rounded Rectangle на панели инструментов создаем форму для будущей кнопки, указав радиус скругления углов.

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

• Нажимаем правой кнопкой мыши на слое с прямоугольником на палитре Layers, выбираем Blending Options.
• Настраиваем параметры эффекта Gradient Overlay. Цвет первого и второго ползунков у меня 434343, третьего – 000000.
• Параметры эффекта Stroke показаны ниже. Цвет обводки – 363636.
• Настраиваем параметры эффекта Inner Glow.
• В результате получается вот такое изображение:

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

• Инструментом Rounded Rectangle создаем форм прямоугольник, который будет являться бликом на кнопке.
• Правой кнопкой мыши нажимаем на слое glare, выбираем Rasterize Layer.
• На панели инструментов нажимаем Edit in Quick Mask Mode.
• Выбрав инструмент Gradient Tool, создаем градиент вроде такого:

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

• Выходим из режима быстрой маски, получаем выделение. Нажимаем Delete.

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

• Добавляем слой с текстом “Entries RSS” и иконкой RSS. Настраиваем параметры эффекта Drop Shadow.

Получается вот такая кнопка:
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

Изменяя различные параметры эффектов, добавляя и изменяя отдельные элементы, у меня получились вот такие кнопочки.
Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!

Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!


Вы можете загрузить исходники PSD Просмотр медиа-файлов и переход по ссылкам доступен только для Участников Форума!  Вы нуждаетесь в или !!
.