Класична навігація

У цьому уроці Ви дізнаєтеся, як за допомогою простих форм і градієнтів створити елегантний дизайн.

Вид фінального результату

Крок 1. Спочатку створимо новий документ 540 на 440 пикселей. Заливаємо заднє тло цвітом #1b1b1b, використовуючи Edit > Fill (Редагувати > Виконати заливання).

Крок 2. Тепер нам треба створити заднє тло навігаційного вікна. Створимо новий шар. Це можна зробити за допомогою Layer > New > Layer (Шар > Новий > Шар) або нажавши гарячі клавіші Ctrl + Shift + Alt + N.

Виберемо інструмент Rounded Rectangle Tool (Прямокутник з округленими кутами) і встановимо радіус 5 пикселей. Зробимо виділення 250 на 300 пикселей.

Заливаємо це виділення червоним градієнтом. Виберемо інструмент Gradient Tool (Градієнт) і встановимо Radial Gradient (Радіальний градієнт). Заповнимо це виділення градієнтом з верху центра (#bc0303) до низу центра (#3f0000).

Крок 3. Тепер нам потрібно додати зовнішнє світіння нашому навігаційному задньому тлу. Це можна зробити за допомогою Layer > Layer Styles > Outer Glow (Шар > Стиль шару > Зовнішнє світіння) і ввести нижеуказанние параметри.

Тепер це повинне виглядати так.

Крок 4. Виберемо текстовий інструмент Text Tool (Текст) і додамо текст для заголовка навігаційного блоку. Я використовував шрифт Verdana, Regular (Звичайний), 22pt (пт), Strong (Різке), #ffffff.

Крок 5. Створимо новий шар і, використовуючи інструмент Rounded Rectangle Tool (Округлений Прямокутник) знову, зробимо виділення 230 на 250 пикселей під написом (з 10-писксельним відступом від країв).

Заповнимо виділення темно-сірим цвітом (#111111), використовуючи Edit > Fill (Редагувати > Виконати заливання).

Крок 6. Наступне, що нам потрібно – це додати світлові ефекти на новий шар. Для цього на новому шарі (мається на увазі виділення, що було перед цим) використовуємо Select > Modify > Contract (Виділення > Модифікація > Стиснути) на 10 пикселей.

Використовуючи інструмент Gradient Tool (Градієнт), заповнимо виділення Радіальним градієнтом (Radial Gradient) з верхнього лівого кута (#ffffff) до нижнього правого (прозорий).

Зменшимо Прозорість (Opacity) шару до 5%.

Крок 7. Тепер для текстових посилань, використовуючи текстовий інструмент Text Tool (Текст), додамо текст, щоб він діяв як посилання. Я використовував шрифт Verdana, Regular (Звичайний), 12pt (пт), None (Немає), #5a5a5a (#ffffff для активного посилання). Установимо висоту ліній на 30 пикселей.

Крок 8. Тепер потрібно додати роздільники між посиланнями. Зробимо виділення 210 на 1 пиксель, використовуючи інструмент виділення Marquee Tool (Прямокутна область) між кожною лінією й заповнимо цвітом #1e1e1e.

Крок 9. Напоследок, потрібно додати цвіт заднього тла за активним посиланням (у моєму випадку я зробив активним Photoshop Tutorials). Для цього потрібно створити новий шар за текстовим шаром, зробити виділення 210 на 30 пикселей, використовуючи інструмент виділення Marquee Tool (Прямокутна область) і залити його цвітом #171717.

Кориснi статтi:

Класична навігація

Джерело: photoweb.com.ua