IxStep.ru Все о дизайне и его хистростях!

Поиск по сайту
Навигация
Наш опрос
Нужен ли нам форум?
Да, конечно!
Нет. не надо.
Без понятия.
Хм... А что это?

Веселушки
Возможны скидки со сроков.

Популярные новости
Джинсы - Jeans №2
Джинсы - Jeans №2

22 JPG | HQ | 38.4 Mb
Фрукты (Fruit) - stock photo
Фрукты (Fruit) - stock photo

Fruit - stock photo11 JPG | max 8700x580 ...
Винтажные открытки ко дню Святого Валент ...
Винтажные открытки ко дню Святого Валентина

75 открыток в формате JPEG, 500х344  ...
Фотоклипарт - Background 13
Фотоклипарт - Background 13

Растровый клипарт, деревья7 JPG | 1936x1 ...
Клипарт – Овощной микс \ Klipart – Vege ...
Клипарт – Овощной микс \\ Klipart – Vegetable mix

Клипарт – Овощной микс Klipart  ...
Dark ICE
Dark ICE

Черный лед40 JPG | 1400X1100 | 140dpi | ...
Профессиональный фотоклипарт - Домашний ...
Профессиональный фотоклипарт - Домашний комфорт. Интерьер

Mixa MX-008 Interior ComfortПрофессионал ...
Работа с фильтром Vanishing Point
Работа с фильтром Vanishing Point

Фильтр Vanishing Point в CS3 - один из с ...
Simple Individuality – 1.
Simple Individuality – 1.

улыбки людей, растровая графика70 | Up t ...
Datacraft Sozaijiten 206 - Eco Images - ...
Datacraft Sozaijiten 206 - Eco Images - Environment & the Future

Datacraft Sozaijiten 206 - Eco Images - ...

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

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

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

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


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


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

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

Inner Shadow:

[center]

Gradient Overlay:

Вы можете использовать любой цвет какой захотите, но кнопка должна выглядеть объемно, примерно вот так:

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

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

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

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

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


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

Drop Shadow:


Вот так это выглядит:
В заключение я добавила отражение и шестеренку для красоты. Если хотите, можете ее скачать вот
Внимание! У вас нет прав для просмотра скрытого текста.
.
[/center]И красный вариант :)



-Может статься, человек кончает с собой из чувства самосохранения. (Халиль Джебран)

Опубликовал kotel, 19 октября 2009 | Комментировать (0) | Печать
 (голосов: 0)

Информация

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