Jeepers | Дата: Понедельник, 29.08.2011, 11:25 | Сообщение # 1 |

Главный Админ Сталин
Группа: Администраторы
Сообщений: 937
| Design a Pretty Dropdown Button

Шаг 1 Запустите Photoshop. Создайте новый документ размером 600x350px.

Возьмите инструмент “Rounded Rectangle Tool” и используйте радиус 2. Это придаст кнопке четкий вид с округлыми краями. Моя кнопка будет размером 104px по ширине и 30px по длине.

Шаг 2 Теперь добавим немного стиля к кнопке. Начнем с градиента, примените следующие настройки:

Теперь обводка цвета #F8F8F8:

Внутреннее свечение:

Вот как должна выглядеть наша кнопочка:

Шаг 3 Давайте взглянем на выскакивающую панель. Этот шаг немного трудный, так как мы будем использовать “Pen Tool” для редактирования формы. Если вы не знакомы с этим инструментом, то читайте внимательно, чтобы ничего не упустить. Вы можете либо скопировать слой с кнопкой, либо создать новый. Я создам новый с теми же самыми настройками, что и ранее (Rounded Rectangle Tool). Однако, на этот раз размер должен быть не более 100px. Заполните фигуру цветом #57A0FA. Вот, что у вас получится:

Шаг 4 Давайте перейдем к “Pen Tool” и отредактируем немного нашу форму. Убедитесь, что вы выбрали “Add Anchor Point Tool” . Чтобы облегчить себе работу, я буду использовать направляющие. Поставьте одну направляющую ровно по центру, а другие две - по бокам на одинаковом расстоянии:

Шаг 5 Теперь приблизьте изображение и с помощью “Add Anchor Point Tool” добавьте три якорные точки в соответствии с направляющими. Возьмите центральную точку и переместите ее вниз на несколько пикселей.

Чтобы меню выглядело более симпатичным, сделаем в нем дырочку. Чтобы это сделать, кликните “Add Layer Mask” и выберите “Elliptical Marquee Tool”, чтобы сделать выделение. Нажмите delete, чтобы удалить это часть фигуры. Вот как должно получиться:

Шаг 6 Чтобы сделать так, чтобы панель выглядела лучше, нужно добавить стили слоя. Начните с обводки со следующими настройками:

 Теперь “Inner Shadow”:
 Если вы все сделали правильно, то должно получиться именно так:

Шаг 7 Чтобы сделать так, чтобы меню выскакивало, просто скопируйте ее нормальное состояние и увеличьте высоту. Добавьте текста и все!

Шаг 8 Вот как выглядит кнопочка в разных цветах!
Требуются: Модераторы, Журналист новостей, Дизайнер! Shop Flash-JePo
|
|
|
|