Дизайн глянцевой кнопки Web 2.0 в фотошопе
Ищете дизайн глянцевой кнопки Web 2.0? Вот простое руководство по Photoshop, которое шаг за шагом покажет вам, как получить красную глянцевую кнопку.
Шаг 1 - Создание базы
Запустите новый холст и настройте следующие параметры (отмечены желтым) в соответствии с изображением ниже. Остальное должно прийти по умолчанию. Вы также можете перепроверить с настройками по умолчанию.
Создайте новый слой под названием «Кнопка»
На слое «Кнопка» выберите инструмент «Прямоугольник со скругленными углами»
Дайте ему радиус 7 пикселей
Нарисуйте прямоугольник, похожий на изображение ниже.
Шаг 2 - Красная кнопка
Щелкните правой кнопкой мыши параметры наложения для слоя «Кнопка»
Настройте следующие параметры для
Drop Shadow
Внутренняя тень
Скос и тиснение
Градиентное наложение
Ваша кнопка должна выглядеть примерно так
Шаг 3 - Создать глянцевый эффект
Создайте новый слой под названием «Стекло»
Выберите инструмент «Прямоугольная область», убедитесь, что вы выбираете слой «Кнопка». Удерживайте клавишу Ctrl и нажмите кнопку «Слой»”Слой эскиз. Ваша кнопка теперь должна быть выделена.
Теперь нажмите кнопку «Стекло», удерживайте клавишу «Alt» с выбранным инструментом «Прямоугольная область». Нарисуйте (обрежьте) через нижнюю половину кнопки, как показано на рисунке ниже..
Заполните выделенную область белым цветом #ffffff, используя Paint Bucket Tool
Отрегулируйте непрозрачность до 18%
Вы должны иметь глянцевую кнопку, похожую на эту.
Шаг 4 - Шаблон наложения
Давайте дадим кнопке небольшое наложение рисунка. Я буду использовать пользовательский stripe5px, созданный ранее. Создайте новый слой под названием «Pattern» между «Button» и «Glass» и перейдите к параметрам смешивания.
Выберите Pattern Overlay, выберите Stripe5px (или любой шаблон, который вы создали) и нажмите OK, затем закройте диалог.
Убедитесь, что вы все еще используете инструмент Rectangular Marquee, удерживайте
Шаг 5 - Вставка текста
Добавьте случайный текст белым цветом #ffffff со следующими настройками
Используйте следующие эффекты смешивания на слое моего текста.
Drop Shadow
Шаг 6 - Окончательный вывод
Вы должны получить изображение, как это.
