Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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



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


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) изобразите полупрозрачное отражение, как в следующем рисунке:



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





Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: