Хайтеківський навігаційний інтерфейс

У цьому уроці робимо хайтек навігаційний інтерфейс.

От те що ми робимо отут

- Починаємо, створюємо новий документ (ctrl + n) і встановлюємо розміри 710 x 250рх, з білим тлом.

- Створюємо прямокутник і перейменовуємо цей шар як " base shape "

- Робимо новий шар, і розміщаємо на ньому чорне коло розміром 49*49рх. Це закруглить прямий край нашої форми. В screenshot нижче, я понизив непрозорість мого кола до 50 %, щоб показати вам, як я розмістив його.

- Тепер, зробіть чорне коло тим же самим цвітом як ваш прямокутник, і злийте його (ctrl + e).

- Тепер ви повинні мати один шар названий "base shape", що виглядає подібної цьому:

- Завантажуємо виділення шару з формою й створюємо новий канал, названий " base shape channel ".

- Залийте виділення білим цвітом, застосуєте до нього gaussian Blur 6 (Filter - Blur - gaussian Blur), після чого знову, але gaussian Blur 3, потім заключне gaussian Blur 1.

- Вернетеся до палітри шарів, і з основною формою на робочий шар (cwl) (тільки клацніть у палітрі шарів, щоб робити його активним cwl), застосуєте Filter-> Render -> Lighting Effects …

- Помістите ваше джерело світла як показане на скриншоте нижче, упевніться, що в настроюванні каналу коштує - "base shape channel"):

- Завантажуємо виділення основного шару знову, і створюємо новий шар " 2-ой lfx".

- Заливаємо виділення цвітом (я використовував #d6d6d6), і скидаємо виділення.

Знову заходимо в lighting effects filter при активному шарі " 2-ой lfx". І прменяем настроювання так, щоб було схоже на метал.

- Тепер вернетеся до висвітлення, міняємо фільтр і встановлюємо настроювання як на картинці (усе що ще використовує "base shape channel" як наш Канал Структури):

Підказка:Можливо ви повинні змінити яскравість і контраст "base shape" або " 2-ого lfx", якщо він занадто яскравий або темний. Вибираємо Image -> Adjustments -> Brightness/Contrast щоб настроїти як нам потрібно. Ідеально Ви хочете, щоб це нагадало наступний screenshot.

- Змінюємо спосіб накладення шару " 2-ого lfx" на Lighten, і знижуємо його непрозорість до 60 %. У підсумку у вас повинне вийти як на картинці:

- Робимо новий шар вище " 2-ого lfx" і називаємо його "inside shadow".

- Завантажити виділення шару " 2-ой lfx" і вибираємо stroke розміром 1pixel з параметром inside.

- Застосовуємо gaussian Blur 1.5, після чого скидаємо виділення.

- Беремо eraser tool з м'якою великою щіткою розміром 45px стираємо ліві сторони тіні (тільки підстава й права кругла сторона можуть бути в тіні):

Підказка:

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

- Створюємо новий шар, називаємо його " angular shape". З polygonal lasso робимо форму. Це 203*21рх. Заповните виділення темним сірим цвітом, коли ви закінчите.

- Помістите цю форму як показане в screenshot нижче (збільшено до 300 %)

- Завантажуємо виділення "angular shape і робити активним шар " 2-ой lfx", після чого натискає Delete. У підсумку у вас повинне вийти це:

- Створюємо новий шар, називаємо його "outside stroke", завантажуємо виділення "base shape" і застосовуємо Edit -> Stroke 1 пиксел, outside.

- Тягнемо шар з обведеним нижче основного шару "base shape" у палітрі шарів, і знижуємо непрозорість обведені до 50 %.

- Створюємо нову групу шарів, розміщаємо нижче наших шарів і називаємо її "Top Green Bar".

- У цій групі шарів, створіть новий шар з назвою "rectangle", і зробіть прямокутне виділення (приблизно 210*20рх), і розмістите його, як показано нижче:

- Заповнити наше виділення ясно-зеленим цвітом, я використовував #7cae33, і скиньте виділення. У підсумку у вас повинне вийти щось подібне:

- Створюємо новий шар і називаємо "shadow". Ми збираємося зробити градієнт від чорного до прозорого в середині зеленого прямокутника.

- Робимо прямокутне виділення як на картинці:

- Тепер вибираємо gradient tool від чорного до прозорого, і заливаємо як показано на малюнку (збільшене до 200 %):

- Тепер понизите непрозорість цього шару приблизно до 40 %.

- Створіть новий шар, назвіть " subtle lines ", і намалюйте білі лінії розміром 1рх, приблизно на однаковій відстані в 4 рх, робіть доти, поки не вийти щось схоже:

- Понизите непрозорість шару з лініями до 10 %.

- Створюємо новий шар і називаємо його "stroke" і намалюйте чорну лінію розмірів в 1рх паралельно землі й понизите прозорість до 80%

Створення Екрана

- Зробіть новий набір шарів і назвіть "Screen".

- Створіть новий шар у цьому наборі з назвою "Screen".

- За допомогою polygonal lasso tool зробіть виділення як показано на картинці нижче. Але не заповнюйте його цвітом. Я це зробив тільки для демонстрації.

- Тепер переходимо до нашої палітри каналів, і робимо новий канал з назвою "Screen".

- заливаємо наше виділення білим цвітом. Скиньте виділення й застосуєте до нього gaussian Blur приблизно 3 або 4, і потім відкрийте вікно рівнів (ctrl + L) і перемістите повзунків до центра, поки пляма не стане чітким.

- Завантажуємо виділення каналу й потім вертаємося до нашого шару "Screen", і заливаємо його темно-сірим цвітом, - Тепер ідемо в Layer -> Style -> Inner Shadow, і застосуєте настроювання для всіх параметрів:

Inner Shadow

Bevel and Emboss

Gradient Overlay

Satin

Stroke

- У підсумку у вас повинне получитсья:

- Тепер додайте шар " highlight " і завантажите виділення шару "screen".

- Стискаємо виділення на 2рх, і потім утримуючи клавішу Alt забираємо половину виділення, як показано на малюнку:

- Тепер застосовуємо білий до прозорого градієнта до нашого виділення, після чого скиньте виділення й понизьте непрозорість шару до 80%. У вас повинне вийти щось таке:

Тепер ми створимо головну частину, що буде розташовуватися вище екрана.

- Створюємо новий набір шарів, називаємо його "Top Gray Area". Розміщаємо його вище всіх наборів у палітрі шарів.

- Робимо новий шар і називаємо "shape".

- За допомогою polygonal lasso tool (L), робіть форму схожу на це (кут - 45 градусів.)

- Shift + ctrl + alt + клацання на "base Shape" у палітрі шарів, щоб перетнути вибір з основною формою. Після чого ctrl + alt + клацання на шарі "Screen", що перебуває в наборі шару "Screen". Це відніме частина "base Shape" і стане рівномірно з вершиною екрана:

- Заповнити виділення сірим цвітом *565656, і скиньте виділення.

- Дублюйте цей шар і вибираємо Edit - Transform - Flip Horizontal.

- За допомогою move tool (V) вибудуйте форму урівень із дубльованим шаром так, щоб вони зливалися воєдино:

- Переміните спосіб накладення шару на "Linear Light" і понизите непрозорість до 40 %.

- И так, створіть деякі вставки на віддалених частинах, з непрозорістю 50 %. Темні вставки - чорні лінії з 60%-ой непрозорістю:

- Створіть новий набір шарів у межах "Top Gray Area" і назвіть його "Top Left Button".

- У цьому новому наборі, зробіть шар з назвою "inset" і за допомогою polygonal lasso tool зробіть виділення як показано нижче:

- Увійдіть у нашу палітру каналів, і створити новий канал з назвою "button rounded".

- Заповните виділення білим цвітом і скиньте виділення.

- Закруглите краю нашої фігури, як ми це вже робили декількома абзацами вище.

- Вернетеся до вашої палітри шарів, і залийте градієнтом:

- Завантажити виділення шару "inset" і зробіть новий шар з назвою "button".

- Стисніть виділення на 1рх (Select - Modify - Contract) і потім застосовуємо градієнт від світлого до темного:

- Робимо новий шар і називаємо "hlight", застосовуємо на ньому білий до прозорого градієнт, що рівняється приблизно половині висоти кнопки:

- Створюємо новий шар і називаємо "stroke", і завантажуємо виділення шару "button". Застосуєте stroke з параметрами: чорний цвіт, 1рх, inside, після чого скиньте виділення.

Тепер дублюйте цей набір шарів і поверніть його горизонтально, після чого встановите його на протилежній стороні.

- Створюємо новий набір шару, і називаємо його "Mid Area Inset".

- Завантажуємо виділення шару "base Shape" і стискаємо його на 9рх.

- тепер за допомогою elliptical marquee tool відніміть виділення, як показано на малюнку:

- Як тільки ви це зробите, повторимо наші дії, коли ви закруглювали краї нашого виділення за допомогою каналів.

- Завантажите виділення каналу, і поверніться до нашої палітри шарів. Створіть новий шар і назвіть "shape". Залийте виділення сірим цвітом #a4a4a4. У вас повинне вийти щось схоже:

- Застосувати наступні стилі шару (Layer - Layer Style...) до цього шару:

Bevel and Emboss

Satin

Stroke

Ви повинні одержати щось схоже:

- Робимо овальне виділення за допомогою elliptical seelction tool, як показано нижче:

- Створюємо новий шар і називаємо "wire", і вибираємо ясно-сірий цвіт як ваш передній план.

- Після чого застосовуємо до нього Stroke з параметрами 7рх і встановлюємо center:

- Щоб зробити проведення 3D, я завантажив виділення цього шару, зробив канал, заповнив його білим, і скинув виділення. Після чого застосував до нього gaussian blur1,5. Потім я використовував lighting effects Filter із цим каналом, щоб вийшов бажаний ефект.

- Завантажите виділення "shape", і стисніть виділення на 1рх (Select - Modify - Contract) і натисніть shift + ctrl + I, щоб інвертувати виділення.

- Упевніться що активним шаром є "wire", і натисніть Delete. Це видалить частина проведення, що є поза формою:

- Тепер застосуєте до проведення stroke з параметрами: 1рх, чорний цвіт, outside stroke(на його власному шарі), і понизите непрозорість до 70 %.

- Тепер ви можете додати тонку тінь до проведення, і додати внутрішню тінь до обох сторін форми:

Right Shadow Area

- Робимо новий набір шару, і називаємо його "Right Shadow Area".

- Робимо новий шар і називаємо "inner shadow". Робимо чорний округлений прямокутник (з радіусом 4рх), що по розмірах 133*29рх:

- Вибираємо rounded rectangle і створюємо новий канал і називаємо inner shadow rounded rectangle, оскільки ми будемо мати потребу в цьому ще в декількох кроках.

- Робимо новий шар нижче "inner shadow", і називаємо його "gradient".

- Завантажуємо виділення "inner shadow" і заливаємо виділення градієнтом від чорного до прозорого.

- Завантажуємо виділення (inner shadow layer) і стискає його на 3рх. Після чого видаляємо й скидаємо виділення. У вас повинне вийти щось схоже (градієнт схований на цьому скриншоте):

- Застосовуємо до шару gaussian Blur 2, і потім стираємо підстава м'якою щіткою з непрозорістю 30 %. Відпустка тільки небагато в підставі: (шар градієнта схований)

- Робимо новий шар, не називаємо його ніяк. Завантажуємо канал "rectangle inner shadow". Застосуєте до виділення stroke з параметрами: 1рх, білий цвіт, inside.

- Завантажите виділення цього шару й створіть новий шар з назвою "subtle hlight".

- Виберіть градієнт від білого до прозорого, і за допомогою маски шару видалите частину, подібному цьому:

- Понизите непрозорість до 40 %.

Right Orbs

- Робимо новий набір шару з ім'ям "Right Orbs".

- Робимо новий шар з назвою "orb base". Зробіть два сірих кола розміром 17*17рх, і розмістите їх подібно цьому:

- Додайте ще два кола й зробіть виділення, як показано на картинці нижче:

- Натискаємо shift + alt і клацаємо на шарі "orb base". Це відніме два чорних кола з виділення. Після чого залийте ваше виділення тим же самим цвітом, у підсумку у вас повинне вийти щось схоже:

- Додати наступні стилі шару до цього шару.

Bevel and Emboss

Gradient Overlay

Це результат:

- Створюємо новий шар і називаємо його "inner stroke". Завантажуємо виділення шару "orb base" і застосовуємо stroke з параметрами: 1рх, чорний цвіт, inner. Понизите його непрозорість до 40 %.

- Зробіть новий шар з назву "top orb" і зробіть дві зелених кулі розміром 12*12рх і заллємо їхнім цвітом #2a8517:

- Тепер додайте наступні стилі шару до "top orb".

Inner Shadow

Stroke

- У підсумку у вас повинне вийти щось схоже:

- Створюємо новий шар і називаємо його "top orb top hlight". Тепер завантажуємо виділення шару "top orb" і стискає його на 1рх.

- Після чого, за допомогою elliptical marquee tool забираємо частина виділення, як показано на малюнку:

- Заливаємо наше виділення градієнтом від білого до прозорого:

- Зробити ту ж саму річ із "top orb bot hlight":

- "top orb bot hlight" і "top orb". Дублюємо ці шари й розміщаємо тому що нам буде зручно:

- Тепер ви можете додати деякий текст або художні оформлення. Я додав "+" і "-".

Bot Area

- Робимо новий набір шару з ім'ям "Bot Area".

- Створюємо новий шар і називаємо його "shape" і вибираємо polygonal lasso tool.

- Міняємо масштаб на 200% і робимо виділення як, показано на картинці:

- Робимо новий канал, і заливаємо виділення білим цвітом.

- Закруглюємо краю, як ми робили вже не раз. Я використовував gaussian Blur 4.

- Завантажуємо виділення цього каналу й переходимо до нашим слоям. shift + ctrl + alt, і натискає на шар "base Shape". Заповните виділення, що вийшло, темно-сірим цвітом (#444444):

- Застосовуємо inner shadow до цього шару

:

- Робимо новий шар і називаємо "subtle hlight", і завантажуємо виділення "shape". Інвертуємо виділення shift + ctrl +I.

- Виберете щітку з білими краями розміром приблизно 13рх у діаметрі, і проведіть щіткою по верхньому краї шару: (я сховав виділення, щоб ви могли бачити це краще)

- Знижуємо непрозорість до 65 %.

Bot Slide Out

- Створіть новий набір шару, поза Bot Slide Out один викликаним "Bot Slide Out".

- Робимо новий шар у межах цього набору, і назвати його "shape".

- Створити кутову форму за допомогою polygonal lasso tool, подібно цьому: (запам'ятаєте положення фігури й не заповнюйте її цвітом, я тільки зробив це для приклада)

- Створіть новий канал і заповнити виділення білим цвітом. Закруглите краю фігури, як ми робили це раніше. - Завантажуємо виділення каналу, і переходимо назад до нашого шару. Заповните це виділення сірим цвітом:

- Застосуєте до шару наступні стилі:

Bevel and Emboss

Stroke

- У вас повинне вийти таке:

- Клацаємо правою кнопкою миші на шарі й вибираємо "Create Layers".

Це дозволить створити шар, заснований на стилях обраного нами шару.

- Тепер завантажуємо виділення основного шару, після чого натискаємо ctrl + alt + клацаємо на шарі shape, що у наборі шару "Bot Area". Це відніме виділення з основного шару. Ви повинні одержати це:

- Тепер, з активним shape's Inner Bevel Shadows зробіть теж саме, після чого застосуєте для : shape's Inner Bevel Highlights, shape, shape's outer stroke. Це видаляє додаткову частину, у якій ми не бідуємо.

- Тепер, виберіть ці чотири шари, і перемістите їх долілиць на 3рх:

- Робимо новий шар і розміщаємо його вище форми "Inner Bevel Shadows". Назвіть його "hlight".

- Завантажуємо виділення "Shape", після чого стискає його на 1рх, і застосовуємо до нього stroke з параметрами: 1рх, білий цвіт, inner.

- Скидаємо виділення й застосовуємо gaussian Blur 1рх. Понизите непрозорість до 50 %.

- Тепер зітріть верхню й ліву частину того шару. Не соромтеся додавати тонку тінь:

- Я додав повзунка й кнопку до цього набору шару.

- Створюємо новий набір шару з ім'ям "Left Area".

- Створіть новий шар з назвою "inset shape.

- За допомогою polygonal lasso tool створіть виділення подібно цьому:

- Робимо новий канал і заповнюємо виділення білим цвітом. Скиньте виділення й округлите наші краї, як ми робили це раніше.

- Завантажуємо виділення нового каналу й натискаємо shift + ctrl + alt + клацаємо на "base Shape". Вертаємося до нашого шару "inset shape" і заповнюємо виділення #595959 сірими квітами:

- Застосовуємо inner shadow layer style для нашого шару:

- Робимо новий шар і називаємо "subtle hlight".

- Завантажуємо виділення "inset shape" і застосовуємо до нього stroke з параметрами: 1рх, білий цвіт, center. Скидаємо виделениеи зміщає шар на 1 рх долілиць вправо

- М'якою, невеликою щіткою розміром 21рх, зітріть верхню й ліву частину обведеного, і понизите непрозорість до 50 %:

- Після чого створіть новий шар з назвою "shape".

- За допомогою rounded rectangle tool радіусом 10pixels, робіть округлений прямокутник, розміром 93*40рх із сірим цвітом (#c8c8c8) і розмістити це в приблизно те ж саме положення:

- Застосуєте наступного стилю для.

Bevel and Emboss

Stroke

- У підсумку у вас повинне вийти щось подібне:

- Клацаємо правою кнопкою миші на шарі й вибираємо "Create Layers".

- Тепер завантажуємо виділення шару "base Shape", і натискаємо ctrl + alt + клацаємо на шарі "inset Shape", що є в межах шару "Left Area". Це відніме виділення "inset Shape" з "base Shape".

- Клацаємо на одному з недавно створених шарів, і натискає Delete. Повторите цю дію для інших шарів

- Робимо новий шар і називаємо "drop shadow".

- Завантажуємо виділення шару "inset Shape", що перебуває в "Left Area" і м'якою щіткою чорного цвіту формують тінь, так щоб це нагадувало що воно - фізично нижче основної форми:

Підсумок нашої проробленої роботи:

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

Хайтеківський навігаційний інтерфейс

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