Реклама
REKLAMA
Стать автором

Если вы хотите принять участие в развитии проекта ps-tutorials.ru с выгодой для себя (вы публикуете материалы, а мы платим деньги за вашу работу). Просим написать нам через обратную связь.

Создан: 18 январь 2013

Рисуем красивые кнопки с выпадающим меню.

Финальный результат:

Рисуем красивые кнопки с выпадающим меню.

Приступим к уроку.

 

Шаг 1.

Запустите программу Adobe Photoshop и создайте новый рабочий документ, с размерами 600 на 350 px.

Рисуем красивые кнопки с выпадающим меню.

Выберите инструмент Rouhled Rectangle Tool и задайте параметр — радиус 2. Это сделает Вашу кнопку красивой и задаст ей округлые края. Наша кнопка имеет размеры 104 на 30 пикселей.

Рисуем красивые кнопки с выпадающим меню.

Шаг 2.

А сейчас добавим красоты и стиля нашей кнопке, а именно зададим градиент и установим:

Рисуем красивые кнопки с выпадающим меню.

Цвет обводки - #f8f8f8.

Рисуем красивые кнопки с выпадающим меню.

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

Рисуем красивые кнопки с выпадающим меню.

Получаем:

Рисуем красивые кнопки с выпадающим меню.

Шаг 3.

А теперь попробуем сделать выскакивающую панель. Стоит отметить, что данная задача немного сложновата, ведь задействуем инструмент Pen Tool, чтобы удачно редактировать формы кнопки и меню. А если, Вы с данным меню будете работать первый раз, то особенно внимательно читайте наш урок и делайте все по плану.

 

Для начала определитесь, Вы будете копировать слой с Вашей кнопкой или же новый создавать. Мы в уроке создадим новый слой, с имеющимися настройками, который были в инструменте Rouhled Rectangle Tool. Стоит отметить, что размер этого слоя должен быть 100 пикселей, после чего залейте фигуру цветом #57A0FA.

 

Вот, что Вы должны получить:

Рисуем красивые кнопки с выпадающим меню.

Шаг 4.

Теперь нужно найти Pen Tool и немного подредактировать наш внешний вид, а именно нашей кнопки. Используйте Add Anchor Point Tool, найдите и используйте направляющие, которые нужно поставить в следующем порядке. Одна направляющая идеально ровно стоит по центру, а две остальные на одинаково удаленном расстоянии от нее, по бокам.

Рисуем красивые кнопки с выпадающим меню.

Шаг 5.

А сейчас нужно приблизить изображение, используя знакомый нам Add Anchor Point Tool, и добавить три точки, главное сделать это соответственно нашим направляющим. Возьмите центральную точку и перетащите ее на несколько px ниже.

Рисуем красивые кнопки с выпадающим меню.

Если хотите, чтобы меню смотрелось красивее, сделайте в нем небольшую дырочку. Для этого нажмите Add Layer Mask и активируйте elliptical Marquee Tool. После того, как Вы выделите определенную фигуру, сможет нажимайте delete и удаляйте ее.

 

Получаем:

Рисуем красивые кнопки с выпадающим меню.

Шаг 6.

После этого можно добавить некоторые стили слоя, к примеру обводку немного улучшить.

Рисуем красивые кнопки с выпадающим меню.

Рисуем красивые кнопки с выпадающим меню.

Используйте Inner Shadow и установите параметры, показанные на скрине:

Рисуем красивые кнопки с выпадающим меню.

Если все верно, то получите:

Рисуем красивые кнопки с выпадающим меню.

Шаг 7.

Для того чтобы Ваше меню выскакивало, необходимо копировать нормальную величину картинки и ее немного увеличить.

Рисуем красивые кнопки с выпадающим меню.

Теперь кнопка с выпадающим меню в Вашем распоряжении. 

Рисуем красивые кнопки с выпадающим меню.

Источник: tutsplus

Комментарии:

Копирование дизайна строго запрещено. © 2012 - 2016
Яндекс.Метрика
Материалы сайта предоставляются исключительно в ознакомительных целях. Если Вы считаете, что какой-либо из материалов нарушает Ваши права - свяжитесь с Администрацией.