Главная | Форум | Реклама | Shop Flash-JePo | Картинки | Регистрация | Вход
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Создаем симпатичное кнопочку с выскакивающим меню
JeepersДата: Понедельник, 29.08.2011, 11:25 | Сообщение # 1




Администратор портала







Главный Админ
Сталин
Группа: Администраторы
Сообщений: 937
Награды: 0
Репутация: 13

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
 
Реклама
  • Страница 1 из 1
  • 1
Поиск: