Дизайн и Графика - Все для Вашего творчества

» » » Стильная голубая кнопка
июн 20 2007

Стильная голубая кнопка

Разместил: в 13:04

Этот урок расскажет Вам, как сделать небольшую, но стильную голубую кнопку для Вашего сайта.

Стильная голубая кнопка

Сперва создайте новый документ (в моем случае 250х150). Заполните фон цветом #5eaaff. После этого нарисуйте скругленный прямоугольник цвета #a9caee. Я задал радиус в 8px. Назовите слой с прямоугольником “ Light Button“.

stylish_blue_button_2.gif


Добавьте к этому слою стиль Drop Shadow (настройки: Opacity: 30% Distance: 0 Spread: 0 Size: 7). Теперь зажмите CTRL и кликните на иконке слоя “ Button Light“. Выберите инструмент Gradient (клавиша G). Основной цвет поставьте #FFFFFF, а фоновый цвет (второй квадратик цвета, расположенный чуть ниже и правее первого) задайте #5eaaff. Залейте градиент от самого верха выделения до низа. Зажмите SHIFT, чтобы линия была ровной.

stylish_blue_button_3.gif


Создайте новый слой и цветом #5b99de нарисуйте на нем внутри старого новый скругленный прямоугольник с радиусом угла в 4px. Назовите этот слой “ Button Dark“.

stylish_blue_button_4.gif


Теперь можно добавить немного текста. Я добавил надпись “ Download” шрифтом Trebuchet MS 15pt Bold. Текст поменьше - Trebuchet MS 10pt без anti-aliasing.

stylish_blue_button_5.gif


Зажмите CTRL и кликните по иконке слоя “ Button Dark“. Отправляйтесь в меню Select > Modify > Contract > 1px. Нарисуйте градиент снизу кверху на новом слое. Понизьте прозрачность полученного слоя до 35%.

stylish_blue_button_6.gif


Используя инструмент Pen, нарисуйте форму, как на рисунке ниже. Назовите новый слой “ Light 3

Стильная голубая кнопка

Зажмите CTRL и кликните по иконке слоя “ Light Button“. Потом Select > Inverse. Кликните правой кнопкой по слою “ Light 3” и выберите пункт Rasterize Layer. Теперь, не снимая выделения, и с выбранным слоем “ Light 3” нажмите клавишу Delete. Понизьте прозрачность слоя до около 20%.

stylish_blue_button_8.gif


Теперь выделите все слои, зажав CTRL и кликнув по каждому из них. Щелкните правой кнопкой по любому из слоев и выберите пункт “ Duplicate Layers“. После этого слейте все скопированные слои в один (выделите их и нажмите Ctrl + E). Назовите получившийся слой “ Reflection“. Направляйтесь в Edit >Transform > Flip Vertically. Не снимайте выделения с этого слоя. Передвиньте его так, чтобы он оказался ниже кнопки.

Теперь переместите этот слой в палитре слоев выше слоя “ Background“. Добавьте к слою маску (кликните в палитре слоев внизу на иконку прямоугольничка с окружностью на нем). Выберите инструмент Gradient (клавиша G) и задайте цвета белый и черный (нажмите клавишу D). Убедитесь, что в палитре слоев выбрана именно маска слоя “ Reflection“, а не сам слой, и “протащите” градиент, как на рисунке ниже:

Стильная голубая кнопка

Вот, что должно получиться в итоге:

Стильная голубая кнопка


Готово!

Ссылки на файлы для загрузки
К сожалению ссылки к данной новости восстановить не удалось!

Не расстраивайтесь! Посмотрите на сайте много похожего материала!
ВНИМАНИЕ!
Не работает ссылка? Проблема с этой новостью? Нажмите здесь и оставьте жалобу!
Не забудьте заглянуть позже в эту новость! По возможности ссылки будут обновлены!
Уважаемый посетитель,
Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
+15
Тренс_Джемени
Гости
А у меня картинки не открываются(((
#3, 11 октября 2008 15:27
mrmaxpayne
Гости
Кстати, такую кнопочку можно и как банер испольхоать :)
#2, 20 августа 2007 18:31
BHyK
Гости
Класс, спасибо! Обажаю фотошоп!
#1, 20 июня 2007 22:50

Информация Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

ђейтинг@Mail.ru
Наверх