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

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

Чудове меню в стилі "Новини"


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


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

Крок 2

Створіть новий документ розміром 600х335 пикселей. Почніть із відображення Rulers (View>Rulers), потім створіть дві мітки, як показано на малюнку внизу. Один з них повинен перебувати на оцінці 285 пикселей, другий - 310 пикселей.


Крок 2

Створіть прямокутник (U), що заповнить нижню область лінійок і назвіть шар “Нижня панель”. Відкрийте Effects Menu шару. Виберіть властивість Gradient Overlay і створіть градієнт від #000000 до #0c0c0c з рівнем 90 градусів.

Тепер створіть ще один прямокутник у верхній області й назвіть його “Верхня панель”. Знову відкрийте меню ефектів і застосуєте Gradient Overlay від #35393d до #787b7d на 90 градусів. Виберіть обоє із прямокутника й зміните Opacity на 90%. Коли пізніше буде додане тло, це створить приємний ефект, тло буде злегка видний.


Крок 3

Наступним етапом є додавання підсвічування до меню за допомогою Line Tool (U). Виберіть Line Tool і зміните товщину на 2 пикселя. Намалюйте лінію поперек панелі й зміните цвіт на #9fa2a4. Перейменуйте шар на “нижнє підсвічування”. Тепер намалюйте ще одну лінію прямо над попередньою й зміните цвіт на #484b4d, а назва шару - на “верхнє підсвічування”. Згрупуйте ці шари за допомогою панелі шарів, назвавши групу “панель”. Цим кроком ми завершуємо основу нашого меню.


Крок 4

Тепер, після завершення панелі меню, ми можемо створити набір роздільників для тексту. Знову виберіть Line Tool і значення товщини лінії 2 пикселя. Намалюйте вертикальну лінію із центральної мітки на лінійці перед підсвічуванням. Це не вимагає великої точності й легко може бути виправлене пізніше. Відкрийте меню ефектів і застосуєте Gradient Overlay на 90 градусів від #676a6d до #4d6672. Назвіть шар “верхній роздільник”.

Намалюйте ще одну вертикальну лінію із центральної оцінки долілиць і зупинитеся на такій же відстані від краю як і вгорі. У цій секції немає градієнтів, тільки поміняйте цвіт на #43474b. Перейменуйте шар на “нижній роздільник”. Згрупуйте дві секції й назвіть групу “роздільник”.


Крок 5

Виберіть Type Tool (T) і зміните цвіт на білий (#FFFFFF). Шрифт, обраний мною для меню, називається Segoe UI, тому що він використовується в інтерфейсі Вісти. Однак, не в усіх є цей шрифт, тому замість нього ви цілком можете використовувати Arial. Поставте розмір на 11pt і наберіть посилання, роблячи між ними рівні інтервали. Згрупуйте їх і назвіть групу “посилання”.

Тепер скопіюйте роздільники й розташуєте їх між посиланнями. У вас повинне вийти щось схоже на картинку внизу.


Крок 6

Тепер, коли ви в основному закінчили меню, виберіть тло. Я вибрав як тло фотографію трави. Підійде будь-яке барвисте й вражаюче зображення.


Скопіюйте тло в меню й назвіть шар “тло”. Переконаєтеся, що цей шар перебуває на задньому плані у вашій палітрі шарів. Помітьте, що прозорість меню дозволяє щоб тло було злегка видно без перекриття.


Крок 7

Тепер ми створимо размитие прямокутника під текстом. Цей ефект розповсюджений у Вісті і є відмінною технікою. Він фокусирует увага на тексті за рахунок тла, але гарну картинку за ним як і раніше видно.

Насамперед, дублюйте тло. Цей шар непостійний, але ми будемо використовувати вирізані з нього частини. Потім, використовуючи Rounded Rectangle Tool (U), намалюйте фігуру, що починається за лівим краєм листа. Це означає, що у фігури всього два закруглених кути.

Растеризуйте шар і потім, використовуючи Magic Wand Tool (W), виберіть прямокутник і зітріть цвіт, залишивши краю. Видалите копію фонового шару й додайте новий шар, іменований “размитие”.

Вставте фігуру в шар “размитие” і застосуєте Gaussian Blur із властивістю 5 пикселей (Filter>Blur>Gaussian Blur). Застосуєте Drop Shadow, як показано нижче.


Крок 8

Тепер додайте усередину размития ваш текст. Використовуючи той же шрифт, що й для посилань, наберіть ваше ім'я й підзаголовок. Частина тексту виділите жирним шрифтом, а частину залишіть як є, далі застосуєте Drop Shadow і Gradient. Це зробить сучасний вражаючий ефект.


Крок 9

Цей крок не обов'язковий, він служить для додавання блакитного підсвічування, що буде показувати наведення на кнопку. Намалюйте великий Ellipse (U), яким заповните інтервал між роздільниками. Зміните цвіт на #5c94c5 і застосуєте Gaussian blur в 10 пикселей. Цей шар треба растеризовать, а надлишки размития підчистите, використовуючи Marquee Tool (M).


Висновок

Це меню створює приголомшуючий ефект у сполученні з яскравим, вражаючим тлом. Отут використовується прозорість, так само, як і сучасні градієнти. Використання підсвічування надає сучасний вид зображенню, висветляя його краю. Це меню легко буде нарізати й перетворити у функціональне меню у веб з підсвічуванням стану кнопок.


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