Пятница, 19.04.2024, 07:24
Приветствую Вас Гость | RSS
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
MQ forum » Уголок Adobe Photoshop™ » Уроки Photoshop » Кнопка в стиле Web 2.0
Кнопка в стиле Web 2.0
skchezДата: Суббота, 13.06.2009, 16:42 | Сообщение # 1
Всезнающий
Группа: Администраторы
Сообщений: 318
Репутация: 26
Статус:

В этом уроке мы научимся создавать красивую кнопку в стилистике сайтов web 2.0 всего за пару минут.

Шаг 1 Создание основы

Создаём новое изображение размерами 300х400 с белым цветом на фоне. Далее создаём новый слой и называем его “Button”. Выбираем инструмент Скругленный прямоугольник (U) и выставляем радиус округления 7 пкс.

Теперь рисуем прямоугольник как на рисунке ниже:

Шаг 2 Красим кнопку

Идём в настройки смешивания слоя “Button” и применяем следующие настройки:

Падающие тени

Внутрение тени

Фаска и рельеф

Градиент

После этих операций получится должно вот это:

Шаг 3 Отблеск

Создайте новый слой с именем “Glass”.

Выбираем инструмент Прямоугольная область (М) и зажав Ctrl нажимаем на иконку слоя ‘Button’ для создания выделения идентичного по форме слою.

Возвращаемся к слою “Glass”. Снова инструмент Прямоугольная область (М) и удерживая Alt выделяем нижнюю часть кнопки.

Заливаем выделение слоя “Glass” белым цветом и уменьшаем полупрозрачность до 18%. Получаем результат:

Шаг 4 Текстурирование

Добавим кнопке текстурку. Автор выбрал Стандартные полоски 5 пкс. Создаём слой между “Button”и “Glass” и идём в его настройки смешивания.

Выбираем перекрытие образца

Снова инструмент Прямоугольная область (М) и нажимаем на иконку слоя “Button” чтобы получить форму кнопки. Залейте выделение образцом и выставте полупрозрачность на 5%.

Шаг 5 Добавляем текст

Добавляем белый текст с такими настройками:

И настройки смешивания для текстового слоя:

Падающие тени

Результат

После данных 5 шагов получится красивая кнопочка. Вы можете эксперементировать с цветами, тенями, образцами… У автора получилось это:

Перевод: ADYBAH4iK

Автор: Hongkiat.com
Вы можете скачать psd исходник урока:

 
MQ forum » Уголок Adobe Photoshop™ » Уроки Photoshop » Кнопка в стиле Web 2.0
  • Страница 1 из 1
  • 1
Поиск:


Copyright MyCorp © 2024Хостинг от uCoz