Стильная веб навигация

Этот урок научит вас создавать красивое тёмное меню, отличающееся от обычной навигации.



Стильная веб навигация


1. Создайте новый документ размером 800×600 px и разрешением 72 dpi. Инструментом Заливка (Paint Bucket Tool) залейте фон чёрным цветом.



Стильная веб навигация


2. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус — 20 рх) создайте панель меню и, удерживая Alt, инструментом Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус — 10 рх) вырежьте 4 отверстия, как на рисунке ниже:



Стильная веб навигация


3. Установите Заливку (Fill) слоя — 0% и примените для панели стиль Внутреннее свечение
(Layer Style — Inner Glow).



Стильная веб навигация


Наложение градиента:



Стильная веб навигация


Настройки градиента:



Стильная веб навигация


Обводка:



Стильная веб навигация


Стильная веб навигация


4. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус — 10 рх), создайте указатель переключения кнопки меню. Цвет кнопки — #EB2127.



Стильная веб навигация


5. Сделайте 3 копии слоя указателя, изменяя цвет копий на #58595B, и инструментом Свободное трансформирование (Free Transform) расположите копии, как показано на рисунке:



Стильная веб навигация


6. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус — 15 рх) создайте свечение на переключателе:



Стильная веб навигация


7. Установите Заливку (Fill) слоя — 0% и примените для свечения стиль Наложение градиента (Layer Style — Gradient Overlay).



Стильная веб навигация


Настройки градиента:



Стильная веб навигация


Стильная веб навигация


8. Сделайте 3 копии слоя свечения и в режиме Свободного трансформирования (Free Transform) расположите копии, как в следующем изображении:



Стильная веб навигация


9. При помощи инструмента Линия (Line Tool) создайте 3 вертикальных линии цветом #414142, предназначенных для разделения кнопок меню.



Стильная веб навигация


Стильная веб навигация


10. Вставьте названия кнопок меню. Настройки для “About us”:



Стильная веб навигация


Настройки для названий остальных кнопок:



Стильная веб навигация


Стильная веб навигация


11. Объедините в группу все слои, содержащие панель с кнопками меню. Скопируйте эту группу и объедините в единый слой (Ctrl+E). В режиме Свободного трансформирования
(Free Transform) поверните копию и расположите её, как показано на рисунке ниже:



Стильная веб навигация


12. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв. При помощи инструмента Градиент (Gradient Tool) изобразите полупрозрачное отражение, как в следующем рисунке:



Стильная веб навигация






Делаем Web-дизайн

Вас может также заинтересовать:

20 июня 2018

Высококачественный объектив с широкой диафрагмой. Диапазон фокусных расстояний (36 – 105 мм в 35-мм экв.), универсальность в работе, асферические элементы для высокого качества изображения, минимальная дистанция фокусировки 34 см.

20 июня 2018

Компания Canon объявляет о выпуске высокопроизводительного объектива EF 100mm f/2.8L Macro IS USM, последнего продукта в престижной серии L – лидирующих моделей объективов Canon для профессиональной съёмки. Впервые в линейке...

20 июня 2018