Створення веб-кнопок Photoshop
Кнопки Підручники Photoshop є, мабуть, однією з найгарячіших категорій у будь-якому сайті підручників Photoshop, і оскільки Web 2.0 є такою гарячою темою зараз, ми можемо робити просту кнопку, придатну для будь-якого веб-додатка Web 2.0. Підручник після стрибка.
Створіть пусте полотно розміром близько 500px (ширина) x 400px (висота), щоб почати дизайн кнопки. Створити новий виклик шару "bg01'. Виберіть Закруглені прямокутні інструменти, утримуйте клавішу SHIFT і намалюйте в центрі круглу квадрат. На поточному етапі будь-який колір є прекрасним.
Викличте Параметри накладання of 'bg01і налаштуйте такі стилі:
Тінь
- Непрозорість: 40%
- Відстань: 0px
- Спред: 0%
- Розмір: 6px
Градієнтне накладання
- Зупинка кольору: 0%, # d00031
- Зупинка кольору: 100%, # ff2b5d
Утримуйте CTRL, клацніть лівою кнопкою миші "bg01"Мініатюра шару для вибору форми. Ідіть Виберіть -> Змінити -> Контракт і введіть значення "2px'. Це зменшить вибрану область на 2 пікселя.
Створити новий виклик шару "bg02'і заповнили виділену (після стиску) область будь-яким кольором. Тут я використовую # 000000 black. Двічі клацніть на 'bg02' для запуску Варіант змішування і налаштувати наступний стиль.
Градієнтне накладання
- Зупинка кольору: 0%, # c6002f
- Зупинка кольору: 100%, # c6002f
Створіть інший новий шар для тексту, назвіть його "txt'. Вставте текст кнопки. Я буду використовувати алфавіт для представлення. Стилі шрифтів, які я використовую тут, такі:
- Закруглені Arial Bold
- 150pt
Те ж саме, після вибору тексту, двічі клацніть на 'txt' для запуску Параметри накладання і налаштувати наступні стилі.
Тінь
- Непрозорість: 25%
- Відстань: 0px
- Спред: 0px
- Розмір: 5px
Внутрішня тінь
- Непрозорість: 10%
- Відстань: 0px
- Дросель: 0
- Розмір: 10px
Рельєф Bevel
- Глибина: 1px
- Напрямок: Вниз
- Розмір: 0px
- Очищена: 0px
- Непрозорість режиму підсвічування: 32%
- Непрозорість тіньового режиму: 32%
Градієнтне накладання
- Стоп кольору: 0% # d2d2d2
- Стоп кольору: 100% # f0efef
Кнопка майже завершена. Давайте трохи світимо над верхньою частиною. Утримуйте CTRL, клацніть лівою кнопкою мишіbg02Мініатюра шару для виділення зовнішньої форми; вибрати Eclipse Marquee Tool. Тепер тримайте ALT, з виділеним інструментом Eclipse Marquee, перетягуйте до мінус нижню половину виділеної області. Див. Зображення вище.
З виділеною верхньою частиною і вибраним інструментом Eclipse Marquee, клацніть правою кнопкою миші та виберіть Перо; введіть 15px для радіуса.
Створіть новий шар, назвіть його "свічення'і заповнити виділену частину білим [#ffffff]. Це має додати ефект свічення у верхню частину вашої кнопки. Кінцевий продукт повинен виглядати приблизно так, як на малюнку нижче.
Щось додаткове…
Налаштування параметрів змішування 'bg01"і"bg02'дасть вам більше цікавих кнопок. Ось ще один підручник з Photoshop про кнопку, яку я зробив раніше - Create Glossy button для Web 2.0
Завантажити зразок
