Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Простое меню в минималистическом стиле

Alex | 5.03.2014 | нет комментариев

В этом уроке показано, как создать простое меню в минималистическом стиле. Вот, что у нас получилось.

Создайте новый документ в Photoshop размером 500×300 пикселей. Создадим фон. Протяните линейный градиент от #ffffff к #d5dfe0 с помощью Gradient Tool.

Теперь необходимо создать окно, что видеть, где будут располагаться будущие кнопки меню. Выберите Rounded Rectangle Tool (радиус 7 px) и нарисуйте фигуру как на рисунке белым цветом:

После этого примените Outer Glow, Inner Glow и Stroke со следующими настройками:

Теперь мы можем приступить к главной части урока – к созданию меню. Прежде всего, я хочу создать область под кнопки. Выберите снова Rounded Rectangle Tool (радиус 7 px) и нарисуйте прямоугольник с закругленными краями как на рисунке:

Затем примените Outer Glow со следующими настройками:

У вас получиться следующее:

Я думаю, пришло время создать кнопку. Выберите снова Rounded Rectangle Tool (радиус 5 px) и нарисуйте прямоугольник с закругленными углами черного цвета как на рисунке:

Примените Inner Shadow, Gradient Overlay и Stroke со следующими настройками:

Время добавить немного глянца на кнопку. Возьмите Pen Tool и нарисуйте фигуру белого цвета как на рисунке:

Щелкните правой кнопкой мышки по иконке слоя в палитре слоев и выберите Rasterize Layer. После этого нажмите Quick Mask Mode (нажмите Q) и залейте градиентом как на рисунке:

Затем вернитесь в Standard Mode (нажмите Q). У вас получится выделенная определенная область. Нажмите Delete для очистки изображения в выделенной области.

Затем нажмите Ctrl+D для снятия выделения. Перейдите на слой с кнопкой и примените Select > Load Selection, затем Select > Modify > Contract со значением 1 пиксель и нажмите Ctrl+Shift+I для инвертирования выделения. После этого вернитесь на слой с глянцем и нажмите Delete. Нажмите Ctrl+D для снятия выделения и измените opacity на 60%.

Дублируйте слой с помощью Ctrl+J, после выберите Rectangular Marquee Tool (Feather: 2px) и сделайте выделение как на рисунке:

Нажмите Delete и снимите выделение с помощью Ctrl+D, затем переместите слой на 1 пиксель вниз.

Следующее, что необходимо сделать, это добавить 2 линии на кнопку меню. Возьмите Pencil Tool и нарисуйте 2 линии цветом #e5f3ff как на рисунке:

Для завершения меню я думаю, необходимо добавить заголовок на кнопку. Вы можете сделать это с помощью Horizontal Type Tool. Я использовал шрифт Myriad Pro (Semibold Condensed, 15 pt, Crisp).

Чтобы сделать заголовок кнопки более контрастным, примените Drop Shadow со следующими настройками:

Теперь добавим еще пару кнопок, чтобы получить настоящее меню.

АВТОРСКИЕ ПРАВА
Источник: alldes.net
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB