dle.in.ua » Вебмастеру » Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

Автор: alexben от 27-02-2008, 19:08
Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

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

+ ДОБАВЛЕННЫ PSD-исходники...
Сегодня я хочу показать Вам на нескольких примерах, как можно создать кнопки в стиле Web 2.0 с помощью Adobe Photoshop CS2.

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

Кнопки в стиле Web 2.0

3.Нажимаем правой кнопкой мыши на слое с прямоугольником на палитре Layers, выбираем Blending Options.
4.Настраиваем параметры эффекта Gradient Overlay. Цвет первого и второго ползунков у меня 434343, третьего – 000000.

Кнопки в стиле Web 2.0

5.Параметры эффекта Stroke показаны ниже. Цвет обводки – 363636.

Кнопки в стиле Web 2.0

6.Настраиваем параметры эффекта Inner Glow.

Кнопки в стиле Web 2.0

7.В результате получается вот такое изображение:

Кнопки в стиле Web 2.0

8.Инструментом Rounded Rectangle создаем форм прямоугольник, который будет являться бликом на кнопке.

Кнопки в стиле Web 2.0

9.Правой кнопкой мыши нажимаем на слое glare, выбираем Rasterize Layer.

10.На панели инструментов нажимаем Edit in Quick Mask Mode.

11.Выбрав инструмент Gradient Tool, создаем градиент вроде такого:

Кнопки в стиле Web 2.0

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

Кнопки в стиле Web 2.0

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

Кнопки в стиле Web 2.0

Получается вот такая кнопка:

Кнопки в стиле Web 2.0

Изменяя различные параметры эффектов, добавляя и изменяя отдельные элементы, у меня получились вот такие кнопочки.
Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0

Кнопки в стиле Web 2.0


СКАЧАТЬ PSD-исходники:button_alexben.rar [134.4 Kb] (cкачиваний: 350)
Автор: AlexBen для сайта: Dle.in.ua

При копировании статьи, ссылка на Dle.in.ua обязательна !!!
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • еси надо кому выложу сюда PSD исходники всех 5 кнопок..
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 27 февраля 2008 19:31
    • 1
    ^
  • Группа: User
  • Icq: --
  • Комментариев: 31
  • Публикаций: 3
  • Надо, выложите плз на рапиду! wink

    --------------------
    • Jester
    • Регистрация: 16.02.2008
    • Репутация: (0|0|0)
    • 27 февраля 2008 19:56
    • 2
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • ладно выложу...только завтра...днем хдето))) wink
    седня сил уже нет
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 27 февраля 2008 20:36
    • 3
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • трудно оерентироваться когда плохо знаешь фотошоп,не могу найти эти опции т.к у мя русский фотошоп(
    • Roflex
    • Регистрация: --
    • Репутация: (||)
    • 28 февраля 2008 06:41
    • 4
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • добавил PSD исходники всех 6 кнопок. smile
    • alexben
    • Регистрация: --
    • Репутация: (||)
    • 28 февраля 2008 13:27
    • 5
    ^
  • Группа: Гости
  • Icq: --
  • Комментариев: 0
  • Публикаций: 0
  • Спасибо!
    Аватарка зачетная!
    • chelsyk
    • Регистрация: --
    • Репутация: (||)
    • 12 марта 2008 16:23
    • 6
    ^
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.