Dangels Blog » Photoshop » Уроки » Рисуем кнопки в стиле Web 2.0

Photoshop » Уроки → Рисуем кнопки в стиле Web 2.0

Рисуем кнопки в стиле Web 2.0

В этом уроке мы научимся рисовать простую кнопку интерфейса медиа плеера.Как показано на рисунке выше

Рисуем кнопки в стиле Web 2.0

В этом уроке мы научимся рисовать простую кнопку интерфейса медиа плеера.Как показано на рисунке выше
Шаг 1.
Рисуем круг (т. к. кнопка будет круглой) с помощью инструмента Marquee Tool (M)Рисуем кнопки в стиле Web 2.0зажав, при этом, клавишу Shift и заливаем его произвольным цветом, например, #7ebc00. Размер не большой, т. к. кнопка на пол экрана нам не нужна.
Рисуем кнопки в стиле Web 2.0

Шаг 2.
Дважды кликаем на слое с нашим кругом, появиться окно Layer Style, в разделе Drop Shadow ставим Opacity = 10%, Distance = 0px, Size = 50px.
Рисуем кнопки в стиле Web 2.0

В разделе Bevel and Emboss в подразделе Structure ставим Size = 2px, Soften = 6px. В подразделе Shading ставим оба ползунка с Opacity = 46%. Для Shudow Mode задаем цвет такой же как у нашего круга.
Рисуем кнопки в стиле Web 2.0
В разделе Stroke ставим Size = 5px. В поле Fill Type выбираем Gradient, далее кликаем на значке поля Gradient , и в появившимся окне выбираем цвета для градиента, левый край — #ddecf0, правый — #ffffff (для задания цвета краю, нужно кликнуть на нижний ползунок, затем на прямоугольнике ниже).
Рисуем кнопки в стиле Web 2.0

Кликаем ОК, ободок для кнопки готов.
Рисуем кнопки в стиле Web 2.0

Шаг 3.
Создаем новый слой (Ctrl+J). Зажав клавишу Ctrl кликаем на слое с кругом, причем не на название слоя, а на превью слоя, таким образом, появиться выделение в форме нашего круга (можно так же выделить круглую область и с помощью инструмента Marquee Tool (M) зажав при этом клавишу Shift).
Рисуем кнопки в стиле Web 2.0

Далее выбираем инструмент градиент (G)Рисуем кнопки в стиле Web 2.0с белым цветом с одного края и 0% прозрачности с другого. Рисуем градиент на нашей выделенной области, таким образом, чтобы белый цвет был сверху. Далее нужно подвинуть этот градиент к верхнему краю круга и уменьшить его высоту раза в два, так чтобы получился овал. В результате у вас должно получиться следующее.
Рисуем кнопки в стиле Web 2.0

Если же градиент будет выходить за рамки круга с ободком — это можно исправить так: сделать выделение по форме круга и, находясь на слое с градиентом нажать на иконке маски (внизу возле иконки добавления нового слоя), таким образом, останется видимой только область в круге.
Рисуем кнопки в стиле Web 2.0

Шаг 4.
На новом слое рисуем небольшой овал (раза в три меньше чем наш основной круг) с цветом как у основного круга. Помещаем его на наш круг и ставим режим наложения слоя Screen, а прозрачность около 55%. Далее Filters -> Blur -> Gaussian Blur ставим радиус размытия равный 3-5px. Помещаем это пятно в нижнюю часть круга.
Рисуем кнопки в стиле Web 2.0

Шаг 5.
На новом слое рисуем белый треугольник в виде стандартных кнопок Play или же просто надпись. Помещаем его в центр нашей кнопки. Можно еще в свойствах этого слоя добавить Outer Grow с прозрачностью 45%, для эффекта свечения треугольника.
Рисуем кнопки в стиле Web 2.0
Рисуем кнопки в стиле Web 2.0

Все, наша кнопка готова. Далее эту тему можно развивать и делать кнопки разного формата и цвета.
Вот такой интерфейс получился у меня в итоге, делая аналогичным способом:
Рисуем кнопки в стиле Web 2.0

Рисуем кнопки в стиле Web 2.0

Еще добавлю, что параметры, приведенные здесь, не являются строгими, и зависят от того какой изначально размер кнопки вы выбрали, т.е. можно изменять настройки таким образом, чтобы конечный вариант вам понравился.

  • 85
 (голосов: 1)
  От: Eizan Просмотров: 1149 Опубликовано: 22 января 2008

Информация

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

Аккаунт

Логин 
Пароль 
 


Календарь

«    Октябрь 2008    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Подпишись на RSS

Будь в курсе событий





Интересное


Опрос

Оценка дизайна?

Пятёрка
Четверка
Тройка
Двойка
Единица


Реклама


2008 © Dangels. Копирование материала без разрешения запрещено.
Главная страница Регистрация Новое на сайте Статистика Предупреждение

youseo.ru - сервис проверки доменов