Кнопка Photoshop Создать Web 2.0

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

Создайте пустой холст размером примерно 500px (ширина) x 400px (высота), чтобы начать дизайн кнопки. Создать новый слой вызоваbg01». Выберите Закругленный прямоугольный инструмент, удерживайте SHIFT и нарисуйте квадратный квадрат в центре. Любой цвет в порядке на текущем этапе.

Позвонить Параметры наложения из 'bg01и настройте следующие стили:

Drop Shadow

• Непрозрачность: 40%
• Расстояние: 0px
• Распространение: 0%
• Размер: 6 пикселей

Градиентное наложение

• Остановка цвета: 0%, # d00031
• Остановка цвета: 100%, # ff2b5d

Удерживайте CTRL, щелкните левой кнопкой мыши наbg01Миниатюра слоя, чтобы выбрать его форму. Идти Выбрать -> изменять -> контракт и введите значение2px». Это уменьшит выделенную область на 2 пикселя.

Создать новый слой вызоваbg02и залил выделенную (после сжатия) область любым цветом. Я использую # 000000 черный здесь. Дважды щелкните на «bg02», чтобы запустить Вариант смешивания и настроить следующий стиль.

Градиентное наложение

• Остановка цвета: 0%, # c6002f
• Остановка цвета: 100%, # c6002f

Создайте еще один новый слой для текста, назовите еготекст». Вставьте текст вашей кнопки. Я буду использовать алфавит для представления. Стили шрифтов, которые я здесь использую, следующие:

• Округлый Arial Bold
• 150pt

То же самое, после выбора вашего текста, дважды щелкните на «TXT», чтобы запустить Параметры наложения и настроить следующие стили.

Drop Shadow

• Непрозрачность: 25%
• Расстояние: 0px
• Распространение: 0px
• Размер: 5 пикселей

Внутренняя тень

• Непрозрачность: 10%
• Расстояние: 0px
• Дроссель: 0
• Размер: 10 пикселей

Bevel Emboss

• Глубина: 1px
• Направление: вниз
• Размер: 0px
• Смягчить: 0px
• Непрозрачность режима подсветки: 32%
• Непрозрачность режима теней: 32%

Градиентное наложение

• Остановка цвета: 0% # d2d2d2
• Остановка цвета: 100% # f0efef

Кнопка почти готова. Давайте немного подсветим верхнюю часть. Держать CTRL, щелчок левой кнопкой мыши 'bg02Миниатюра слоя, чтобы выделить внешнюю форму; выбирать Eclipse Marquee Tool. Теперь держи ALT, с выбранным Eclipse Marquee Tool, перетаскивание осуществляется через минус нижнюю половину выделенной области. Обратитесь к изображению выше.

Выделив верхнюю часть и выделив Eclipse Marquee Tool, щелкните правой кнопкой мыши и выберите Пух Перо; войти 15px для радиуса.

Создайте новый слой, назовите егопылать'и заполните выделенную часть белым [#ffffff]. Это должно добавить эффект свечения в верхней части вашей кнопки. Конечный продукт должен выглядеть примерно так, как на картинке ниже.

Скачать учебник

Нечто лишнее ...

Настройте параметры смешиванияbg01' а также 'bg02'даст вам более интересные кнопки. Вот еще один учебник по Photoshop для кнопки, которую я делал ранее - кнопка «Создать глянцевый» для Web 2.0

Скачать образец