Урок Photoshop – Стильна навігація для сайту, Програми для роботи з графікою, Програмні керівництва, статті

 


В цьому уроці ми будемо створювати стильні чорну навігацію для сайту.
Ось так вона буде виглядати в кінці уроку:


Крок 1. Для початку створіть новий документ, розмір його 560×500 пікселів, і залийте цей новий документ чорним кольором. На новому шарі створіть фігуру великого прямокутника з округленими кутами в режимі шар – фігури, радіус заокруглення кута –70 пікселів. Растрируется шар, установіть в якості основного кольору в палітрі кольорів білий, а в якості кольору заднього плану – темно сірий колір: #434343


Завантажте виділення шару з фігурою прямокутника (), поміняйте місцями задній і передній кольору в палітрі кольорів.


Тепер кольором переднього плану повинен бути темно-сірий, а кольором заднього плану – білий колір. Використовуйте інструмент gradient tool (Градієнт) для того, щоб створити лінійний градієнт від основного до прозорого на білому прямокутнику. Цей градієнт створить ефект відображення.


Тепер потрібно стиснути виділення: Contract (Стиснути) з меню select> modify> contract (Виділення – Модифікація – Стиснути) і стисніть виділення на 2 пікселя. Не знімаючи виділення, створіть новий шар і заповніть його чорним кольором. Виділення поки не знімайте.


Крок 2. Тепер застосуйте інструмент transform tool (Трансформування) з меню edit> transform (Редагування – Трансформування – Масштабування), Щоб зменшити висоту чорного прямокутника до 99 %.


Шару з чорним прямокутником потрібно додати трохи розтушовування: feather (Розтушовування) з меню select > modify >feather (Виділення – Модифікація – Розтушовка). Розмір розтушовування – 15 пікселів, після розтушовування краю чорного прямокутника стануть округленими. Тепер створіть новий шар і заповніть його кольором з показником: #3A3A3A


Далі створіть ще один прямокутник з округленими кутами – радіус округлення кута – 15 пікселів.


Крок 3. Створіть ще один шар з заокругленим прямокутником поверх усіх інших верств і, використовуючи інструмент gradient tool (Градієнт) лінійного типу, створіть заливку градієнтом. При цьому кольору в палітрі повинні бути такі: колір переднього плану: #535353, Колір заднього плану: #2D2D2D


Крок 4. Збільште масштаб зображення до 200%, І створіть відбитий градієнт, використовуючи для переднього плану білий колір і темний сірий як колір заднього плану: #3C3C3C.


Використовуйте інструментdistort (Спотворення) з меню edit> transform> distort (Редагування – Трансформування – Спотворення) для того, щоб трохи спотворити створений градієнт, як показано на малюнку.


Дублюйте градієнт і поверніть його на 15 градусів.


Створіть ще 3 дубліката. Два з них відобразіть по горизонталі: flip horizontal (Відбити по горизонталі) з меню edit> transform> flip horizontal (Редагування – Трансформування – Відбити по горизонталі).


Крок 5. Збільште масштаб зображення до 500% І використовуйте інструмент polygonal lasso tool (Прямолінійне ласо) для того, щоб створити фігуру зеленого кольору (AADD01) На новому шарі на одному з тих градієнтних зображень, які ми створювали в кроці четвертому.


Виділіть верхню невелику частину щойно створеної зеленої фігури


і застосуйте до цієї частини hue / sauration (Колірний тон / Насиченість) з меню image > adjustments > hue / sauration (Зображення – Корекція – Колірний тон / Насиченість): Колірний тон: -15, Насиченість: +15, Яскравість:+20.


Крок 6. Далі до фігури зеленого кольору з кроку п’ятий застосуєте drop shadow (Тінь) з меню layer> layer style> drop shadow (Шар – Стилі шару – Тінь) з тими параметрами, що наведені на малюнку:


Крок 7. Тепер створіть на новому шарі овальну область виділення та заповніть її градієнтної заливкою, використовуючи при цьому білий колір – колір переднього плану, чорний колір – колір заднього плану.


Стисніть виділення на 2 піксела, і заповніть створене виділення чорним кольором.


Збільште масштаб зображення до 300% І виконайте заливку градієнтом на новому шарі кольором, з показником: від прозорого до # 696969.


Об’єднайте обидва цих шару для створення кнопки і використовуйте інструмент elliptical marquee tool (Овальна область виділення) для того, щоб трохи обрізати шар з градієнтом.


Крок 8. Дублюйте круглу кнопку з градієнтом, помістіть її під зелену фігуру, яку ми створили в кроці п’ятому, і відобразіть її по горизонталі.


Крок 9. Створіть маленький округлий прямокутник сірого кольору (# 535353), радіус заокруглення встановіть 20%.


Трохи поверніть цей прямокутник


і додайте до нього необхідну напис.

Крок 10. Створіть округлий прямокутник, він буде розташовуватися під зеленими формами, і використовуйте інструмент rectangular marquee tool (Прямокутна область виділення) для того, щоб відсікти від округлого прямокутника більшу частину.


Завантажте виділення решти від округлого прямокутника і створіть на ній градієнт – колір переднього плану – #535353, Колір заднього плану – чорний.


Тепер додайте текст.


Крок 11. На цьому урок закінчений.


Бажаю Вам успіхів!
Переклад:Луговський Тетяна
Посилання на джерело


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*