Реклама и Статистика


SEO sprint - Всё для максимальной раскрутки!





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

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

Создайте новый документ в Photoshop размером 500x300 пикселей. Создадим фон. Протяните линейный градиент от #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 со следующими настройками:

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


Просмотров: 6107

  Коментарии (1)
 1 Написал(а) Essy, в 07:28 17.05.2017
Raul, lol! I think we all do that at one point in our lives.Zena is chilling out with me at the moment. It;s been thomnersturnidg and the only way she’ll stay calm after her tranquilizer is being downstairs. So, I’m up at 12:47 AM waiting for her to chill out. I love my dog, I love my dog, I love my dog. :repeats mantra: I’ve got a boatload of homework too!

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Реклама


Error. Page cannot be displayed. Please contact your service provider for more details. (25)