Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Уроки каких тематик вам наиболее интересны?
Всего ответов: 579
КтО ОнЛаЙн

Онлайн всего: 2
Гостей: 2
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Кнопки - Сделайте профессиональный дизайн блестящих кнопок

Сделайте профессиональный дизайн блестящих кнопок

Сделайте профессиональный дизайн блестящих кнопок

Шаг 1. Подготовка холста/фона

Сначала создайте документ любого размера или откройте шаблон вебсайта, над которым вы работаете. Я использовал маленький документ размером 400х340, потому что я не собираюсь делать шаблон польностью. Я добавил светло-серый градиент к фону.

professional-glossy-buttons1.jpg

Шаг 2. Создаем фигуру

Выберите Rectangular Marquee Tool и выделите область с выранной настройкой Set-Sized размером приблизительно 140 x 140 пикселей где-нибудь на документе.

professional-glossy-buttons2.jpg

Шаг 3. Заливка фигуры

При активном выделении убедитесь, что вы находитесь на новом слое и залейте его радиальным градиентом, используя цвета на ваш выбор.

professional-glossy-buttons3_1.jpg

Я использовал цвета #3e94d4 и #336fc1, приятных голубых пастельных тонов. Затем я применил белые (#ffffff) штрихи к главному слою.

professional-glossy-buttons3_2.jpg

Шаг 4. Добавление подсветки

Начните с выбора главного слоя (зажмите Ctrl) и нажмите на иконку слоя.

professional-glossy-buttons4_1.jpg

Сожмите выделение приблизительно на 4-5 пикселей, зайдя в Select > Modify > Contract и введя кол-во в пикселях.

professional-glossy-buttons4_2.jpg

Теперь, выберите Gradient Tool, затем перетащите белый на прозрачный градиент сверху вниз, приблизительно так:

professional-glossy-buttons4_3.jpg

У вас должно получиться следующее:

professional-glossy-buttons4_4.jpg

professional-glossy-buttons4_5.jpg

Теперь выберите Pen Tool и сделайте овальное выделение, как показано внизу.

professional-glossy-buttons4_6.jpg

С все ещё выбранным Pen Tool, кликните на траекторию (path) и затем кликните Make Selection, используя опции по умолчанию.

professional-glossy-buttons4_7.jpg

Создайте ещё один слой и снова с помощью Gradient Tool создайте градиент от белого к прозрачному сверху донизу вашей кнопки, так, чтобы у вас получилось что-то подобное:

professional-glossy-buttons4_8.jpg

Измените layer mode этого слоя на Soft Light, затем снизьте непрозрачность, если нужно. Мне это не понадобилось.

professional-glossy-buttons4_9.jpg

Шаг 5. Финальные штрихи

Для того, чтобы придать работе завершенный вид, я начал с добавления полупрозрачной иконки в левом углу кнопки. (заметка: иконки, которые я использовал в этом уроке, либо с TemplateMonster, либо с Web Design Library)

professional-glossy-buttons5_1.jpg

Добавьте вашей кнопке текст для того, чтобы пользователи знали, для чего кнопка. Настройки шрифта, которые я использовал, были Tahoma, 11 pt, цвет #ffffff, вот с этим drop shadow layer style.

professional-glossy-buttons5_2.jpg

Затем я продублировал все слои, переместил их наверх так, что между ними образовалось расстояние приблизительно в 10 пикселей, затем изменил цвета градиента. Чтобы изменить цвета, просто отредактируйте градиент для первого слоя, затем отредактируйте цвет drop shadow для слоя с текстом.

Сделайте профессиональный дизайн блестящих кнопок

Вот и все.



Похожие материалы:


Просмотров: 1892 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz