про салон
художня зйомка
рекламна зйомка
репортажна зйомка
зйомка iнтер'єрiв
весiльна зйомка
вiдеозйомка
наше портфолiо
контакти
уроки photoshop
робота з текстом
робота з фото
графіка для сайту
робота з ефектами
магія фотошопу

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

Стильна навігація


Цей урок навчить Вас створювати гарне темне меню, що відрізняється зовнішнім виглядом від звичайних для мережі стилів web 2.0.

Почнемо з відкриття нового файлу розміром 800 на 600 пикселей з дозволом 72 пикселя. Вибираємо інструмент Заливання (Paint Bucket Tool) для заповнення нового файлу чорним цвітом.


Тепер вибираємо інструмент виділення Прямокутник з округленими кутами (Rounded Rectangle Tool) з радіусом 20 пикселей для того, щоб намалювати панель меню й потім натискайте Alt, користуючись тим же інструментом, але зменшивши радіус до 10 пикселей, для створення 4 елементів як показано на малюнку нижче:


Призначте нижеуказанние параметри, клацнувши мишкою на обробленому шарі в піні шарів. Параметр шару Заливання (Fill) повинен бути встановлений на 0%. Задамо шару стиль Шар > Стиль шару > Внутрішнє світіння (Layer > Blending Options > Inner Glow) установите наступні параметри як показано на малюнку внизу:


Додамо градієнт Шар > Стиль шару > Накладення градієнта (Layer > Blending Options > Gradient Overlay) установите наступні параметри як показано на малюнку внизу:


Параметри градієнта повинні бути як на малюнку внизу:


Виконаємо обведений Шар > Стиль шару > Обведений (Layer > Blending Options > Stroke) установите наступні параметри як показано на малюнку внизу:


І ми одержуємо наступне:


Використовуючи раніше застосовуваний інструмент виділення Прямокутник з округленими кутами (Rounded Rectangle Tool) з радіусом 10 пикселей, можна намалювати індикатори перемикання кнопок меню. Цвіт шару задаємо #EB2127.


Зробіть 3 копії шару індикатора, змінивши цвіт копируемого шару на #58595B. Виберіть Редагування > Вільне трансформування (Edit > Free Transform) для розміщення копій шару як зазначено нижче:


Використовуючи інструмент виділення Прямокутник з округленими кутами (Rounded Rectangle Tool) з радіусом 15 пикселей спробуйте намалювати підсвічування індикатора, що зображує перемикання між кнопками.


Установите Заливання (Fill) на 0%

Додамо градієнт Шар > Стиль шару > Накладення градієнта (Layer > Blending Options > Gradient Overlay) установите наступні параметри як показано на малюнку внизу:


Параметри градієнта повинні бути як на малюнку внизу:


Повинне вийти приблизно наступне:


Знову зробіть 3 копії, але цього разу шару підсвічування, і пізніше знову виберіть Редагування > Вільне трансформування (Edit > Free Transform) для розміщення копій шару як зазначено на малюнку нижче:


Використовуючи інструмент Лінія (Line Tool) розділите кнопки меню, створивши три вертикальні лінії, задавши цвіт #414142.



Уведіть назву кнопки меню, дотримуючись нижеуказанних параметрів:


Уведіть текст, наприклад, "Про нас" (About us)


І назви для інших кнопок:


Одержати кращий результат можна шляхом об'єднання шарів, з яких складається панель, із кнопками меню (після вибору відповідного шару затисніть клавішу Ctrl і за допомогою лівої клавіші мишки виділите потрібні шари, потім зробіть Шар > Згрупувати шари (Layer > Group layers). Зробіть копію тільки що створеної групи й розмістите її в окремому шарі (натисніть CTRL+E). Копію можна розгорнути застосувавши Редагування > Вільне трансформування (Edit > Free Transform). Помістите копію як зазначено на наступній картинці:


Унизу в панеле шарів мишкою клацніть на опцію Додати шар-маску (Add a Mask). Потім виберіть інструмент Градієнт (Gradient Tool) і задайте напівпрозоре відбиття як зображено нижче:


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