Вернуться   D3Scene.Ru Софт портал игр | Хаки | Проги | Статьи > Другое > Мусорка
Присоединяйся к нам

Мусорка Повторяющиеся темы, темы созданные с нарушением правил и т.д. Чьи темы попали сюда, делайте выводы!



 
 
Опции темы Опции просмотра
Старый 19.10.2008, 23:42   #1
Бан
 
Аватар для Bishop
 
Регистрация: 05.09.2008
Сообщений: 659
Репутация: 587
Отправить сообщение для Bishop с помощью ICQ Отправить сообщение для Bishop с помощью Skype™
Автор По умолчанию

Создаем кнопку в стиле Web 2.0


В этом уроке я покажу как можно сделать простую, но в тоже время красивую Download-кнопку в современном и всеми полюбившемся стиле Web 2.0. Download - как пример, использовать этот метод можно для чего угодно, даже для меню на сайте. Итак, к делу.

1. Создаем новый документ или открываем макет дизайна для вэб-страницы, если Вы хотите создать меню из этих кнопок. Я создала документ размером 400х110px, только для кнопки.

2. Далее берем инструмент Rounded Rectangle Tool (U), чтобы создать форму для кнопки.

В настройках выставим радиус для сглаживания углов 10-15px, Вы можете выбрать и другие значения, зависит от размеров кнопки.

Теперь создайте форму на полотне, цвет формы сейчас не имеет значения.

3. Теперь зададим стили слоя для нашей формы. Идем в свойства Blending Options (двойной клик по слою рядом с названием на палитре слое или же через меню Layer > Layer Style.. > Blending Options) и выставляем значения как показано на скриншотах:

Inner Shadow:
Blend mode : Normal #6298d6
Opacitty: 30%
Distance: 2px
Choke: 0%
Size: 1px
Gradient Overlay:
Blend mode: Normal
Opacity: 100%
Gradient : #6298d6 #8fb9e1 Reverse
Style: Linet
Вы можете использовать любой цвет какой захотите, но кнопка должна выглядеть объемно, примерно вот так:

4. Теперь время добавить симпатичный глянцевый эффект на нашу будущую кнопку. Создадим выделение в форме нашей кнопки, это можно сделать зажав Ctrl кликнув по иконке слоя на палитре слоев. Далее уменьшим его примерно на 5 пикселей со всех сторон. Для этого идем Select > Modify > Contract и вводим в появившемся окне значение

5. Вот так это должно выглядеть:

Теперь создадим новый слой и зальем наше выделение градиентов от Белого к прозрачному сверху вниз. Вот так:

Далее нам необходимо сделать кривую используя иснтрумент Pen Tool, сделайте кривую прямо поверх выделения, заключив в него нижнюю часть белого градиента кнопки и удалите ее. Вот что получилось у меня:

Я еще использовала большую мягкую кисть для удаления части краев (смягчения), так они выглядят гораздо лучше.

5. Теперь добавим текст на нашу кнопку. Берем иснтрумент Horizontal Type Tool (T) и пишем желаемый текст.

Для верхнего текста я использовала шрифт Black Italic, 24 pt, Sharp, #fff, для нижнего - Semibold Italic, 12 pt, Sharp, #fff и добавила в свойствах Blending Options тень:

Drop Shadow:
Blend Mode: Normal #6298d6
Opacity: 40%
Distance: 1
Spread: 0
Choke: 1
Вот так это выглядит:

Если не много поиксперементировать и добавить отражение полуичтся доволно приятный эфект


Источник - zerolayer.ru]
  Наверх
Старый 21.11.2008, 21:14   #2
Гость_за_инактив
 
Аватар для akaGreg
 
Регистрация: 21.11.2008
Адрес: Самара
Сообщений: 4
Репутация: 1
Отправить сообщение для akaGreg с помощью ICQ
По умолчанию

Хм... Прикольно)
  Наверх
 


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход


Powered by vBulletin
Copyright © 2017 vBulletin Solutions, Inc.
Перевод: zCarot | Дизайн: G-A | Верстка: OldEr
Текущее время: 15:06. Часовой пояс GMT +4.