Робимо інноваційний дизайн сайту-портфоліо з альтернативним UI/UX

24

Від автора: чого ви насамперед хочете від свого сайту-портфоліо? Щоб він виділявся! Сьогодні Пол Дж. Нобл (Paul J Noble) проведе нас по етапах створення свого власного сайту-портфоліо з унікальним дизайном. Він покаже нам підказки і прийоми Adobe Photoshop, а також кілька розумних підходів до його виділення з величезної кількості подібних сайтів.

Деталі підручника

Програма: Adobe Photoshop

Версія: CS4

Приблизний час виконання: 1 година

дизайн сайта портфолио

демо

Створення незабутнього сайту-портфоліо

Думайте про сайт-портфоліо як про свого представника перед обличчям потенційних клієнтів. Ретельно зроблений, він повинен розповісти людям про те, чим ви займаєтеся, показати ваші найкращі роботи і дати їм можливість зв’язатися з вами. Це все очевидно – тоді в чому ж різниця між звичайним сайт-портфоліо та насправді незабутнім сайтом?

Розгадка створення ефективного сайту-портфоліо – не у великих проектах – вона у творі враження на відвідувачів. Звичайно, це можуть бути чудові ілюстрації, якщо ви графічний дизайнер – але для веб-дизайнерів і розробників це часто означає необхідність розширення меж UI/UX та кодування заради того, щоб показати свої сильні сторони.

У цьому підручнику Пол Дж. Нобл (Paul J Noble) збирається показати на прикладі власного сайту, як він застосував прості, але відрізняються новаторством підходи до UI/UX для створення перевершує очікування користувача портфоліо, використовуючи інтерактивність і легкі світлові ефекти.

Давайте приймемось за нього!

Крок 1. Полотно

Створіть в Photoshop новий документ розміром 1400 x 900px. Остаточний, візуалізований HTML сайт отримає як відмітної риси «гумові» (тобто масштабовані) елементи, так що нам слід пам’ятати про те, що остаточна модель буде не фіксованого розміру.

холст

Крок 2. Розмітьте основу

Створення стійкого фону – це легкий спосіб розпочати роботу. Для цієї моделі ми будемо використовувати основний колір, досить темний для підкреслення зображень переднього плану, і в той же час зміщений чистий чорний, який може опинитися в зображеннях портфоліо. Ми також включимо трохи розмиття для створення «прохолодного» темного кольору, що об’єднається з елементами інтерфейсу.

Вибрати шар/Select Layer > Нова заливка шару/New Fill Layer > Щільний колір/Solid Color і призначте колір #252a3b.

основа

Крок 3. Розмітка направляючих

Так як ми користуємося масштабованої розміткою, то потрібно визначити мінімальну ширину по горизонталі. Для більшості комерційних сайтів це приблизно 1000 px, щоб пристосуватися до користувачів з дисплеями дозволом 1024×768. Однак для цього сайту ми встановимо як мінімальну ширину 1100 px.

Спочатку переконайтеся, що елементи ваших направляючих встановлені на пікселі. Це можна визначити, зайшовши в Налаштування/Preferences > Одиниці виміру і лінійки/Units & Guides.

Разметка направляющих

Потім зайдіть в Вид/View > Нова направляюча/New Guide. Так як ми збираємося розташувати контент в центрі і зробити мінімальної загальну ширину 1100 px, то слід розмістити вертикальний напрямні 150px і 1250px.

Разметка направляющих

Крок 4. Створіть текстурний візерунок

Тонкі діагональні лінії допоможуть зробити дизайн моделі тонше шляхом створення поділу між елементами портфоліо переднього плану і текстурним фоном.

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

Створіть новий документ 12×12 пікселів з прозорим фоном і додайте новий фон з чорною заливкою (#000000).

текстурный узор

Тепер додайте новий шар (Шар/Layer > Новий/New > Шар/Layer). За допомогою інструмента олівець з розміром кисті 1px накресліть три лінії в точності так, як вони виглядають на зображенні внизу.

текстурный узор

Вимкніть заливку і встановіть непрозорість шару з лініями на 6%. Щоб зберегти його як шаблон, виберіть Правка/Edit > Визначити візерунок/Define Pattern.

Повернувшись до полотна, створіть новий шар з візерунком, вибравши Шар/Layer > Новий шар-заливка/New Fill Layer > Візерунок/Pattern і виберіть раніше певний візерунок.

текстурный узор

текстурный узор

Крок 5. Навігація

Тепер, коли створена основа, можна зробити кілька плоских шарів, що містять головні елементи сайту.

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

Створіть нову Групу/Group в панелі шарів і назвіть її ‘Navigation’ (навігація).

Потім створіть новий шар, застосувавши інструмент Прямокутник/Rectangle Tool (U). Відкривши вікно інформації (Info), накресліть цю фігуру розміром 1400×61 (загальна ширина вікна документа і 61 px у висоту). Вирівняйте цей шар внизу вікна документа.

Навигация

Тепер застосуйте градієнт, клацнувши правою кнопкою миші на шар фігури в панелі шарів (Layers) і вибравши Параметри накладання/Blending Options, а потім відзначте галочкою Накладення градієнта/Gradient Overlay (в якості альтернативного варіанту виберіть Шар/Layer > Стиль шару/Layer Style > Накладення градієнта/Gradient Overlay).

Навигация

В Редакторі градієнтів/Gradient Editor клацніть селектор кольору низу, щоб відкрити Вибір кольору/Color Picker. Для кольору лівого краю (низ фігури) використовуйте #2f313a. Для кольору правого краю (верх фігури) використовуйте #3c3f49.

Потім створіть новий шар і назвіть його ‘highlight’ (виділення). За допомогою інструмента Олівець/Pencil з пензлем 1px і кольором #ffffff накресліть лінію через верх попередньо створеного прямокутника, притримуючи shift. Потім встановіть непрозорість шару на 6%.

Навигация

Крок 6. Логотип

Створіть новий шар в 20 px від лівої сторони документа і вирівняйте текст вертикально по центру прямокутного шару з навігацією.

У цьому прикладу застосовано шрифт DIN Light 14px з вільним трекінгом (межбуквенным відстанню) в 200. Для створення зсуву між двома частинами логотипу використовуються два шрифту. Для першої частини — #dddddd, а для другої, більш темної частини — #737375.

логотип

Далі додайте легку тінь для створення зовнішнього вигляду тексту, вставленого в фон. Виберіть Шар/Layer > Стиль шару/Layer Style Скасуйте вибір ‘Use Global Light'(використовувати глобальне освітлення), змініть напрямок на -45 градусів, встановіть розмір на 0px, відстань 1px і непрозорість 30%.

логотип

Крок 7. Кнопки навігації

Для кнопок основної навігації ми використовуємо форму прямокутника із закругленими кутами.

Створіть нову групу з назвою ‘buttons’ (кнопки).

Створіть нову фігуру Заокруглений прямокутник/Rounded Rectangle 279×31, посуньте на 20 px від правого боку вікна документа і вирівняйте по вертикалі в прямокутнику з навігацією.

Кнопки навигации

Клацніть правою кнопкою миші по шару в палітрі шарів і виберіть Параметри накладання/Blending Options. Відзначте галочкою Накладення градієнта/Gradient Overlay і застосуйте значення від #292c33 до #43464f. Клацніть OK, а потім відзначте Тиснення/Bevel & Emboss.

Для Тиснення/Bevel & Emboss встановіть розмір на 0px з направленням у 122 градуси. Потім встановіть непрозорість Підсвічування/Highlight і Тіні/Shadow на 10% для створення стійкого легкого ефекту підсвічування.

Кнопки навигации

Додайте текстові дані з допомогою тих же самих установок шрифту, які застосовувалися для логотипу. Так як тексти кнопки знаходяться в меншому вертикальному просторі, нам потрібно зменшити розмір до 12 px і стиснути трекінг до 100. Застосуйте ті ж кольори, що і для логотипу, однак для назви активної сторінки візьміть більш яскравий колір.

Кнопки навигации

Для виділення кнопок при м’яко підсвіченому зовнішньому вигляді навігації нам потрібно накреслити дві лінії, кожна шириною в 1px. Перша повинна бути чорною (#000000), а друга білої (#FFFFFF). Встановіть непрозорість білого шару на 6%, а чорного – на 12%. Продублюйте ці шари, натиснувши Shift і клацнути на кожний, потім клацніть правою кнопкою на вибраний шар. Розташуйте продубльовані шари навігації з рівними інтервалами.

Кнопки навигации

Кнопки навигации

Кнопки навигации

Кнопки навигации

Кнопки навигации

Крок 8. Кнопки соціальних мереж

Функція цих кнопок відрізняється від решти навігації, так що ми застосуємо припускає це стиль. Давайте встановимо їх на додаток до основної навігації.

Спочатку створіть нову групу з назвою ‘social’ (соціальні) і помістіть її в батьківську групу ‘navigation’ (навігація).

Тепер за допомогою інструменту Заокруглений прямокутник/Rounded Rectangle з радіусом 4 px, притримуючи клавішу shift, створіть квадратну фігуру 25×25 px. Додайте її по вертикалі в центрі навігації та у 22 px зліва від кнопок основної навігації.

Кнопки социальных сетей

Клацніть правою кнопкою миші на тільки що створену фігуру і виберіть Параметри накладання/Blending Options.

Додайте тінь. Для неї ми застосуємо білий колір (#FFFFFF) і встановимо режим змішування на Заміна світлим/Lighten. Встановіть відстань на 1px, розкид на 0% і розмір на 0px. Таким чином ви створите ефект підсвічування нижнього краю звідси ефект вставленою кнопки.

Кнопки социальных сетей

Далі в тому ж вікні Стиль шару/Layer Style відмітьте внутрішню тінь. Застосуйте чорний колір (#000000) з непрозорістю в 39%, відстанню 1px і розміром 4px.

Кнопки социальных сетей

Нарешті, виберіть Накладання/Color Overlay і використовуйте #353741. Так ви розгладите зовнішній вигляд фігури і додасте контрасту з фоном.

Кнопки социальных сетей

Для іконок соціальних мереж ми візьмемо існуюче зображення і накреслимо кордону, застосувавши інструмент Перо для створення контуру (переконайтеся, що в меню опцій (Options) вибрані Контури/Paths).

Кнопки социальных сетей

Після створення контуру іконки застосуйте інструмент Вибір контуру/Path Selection і клацніть правою кнопкою миші на тільки що створений контур (переконайтеся, що обраний контур з панелі Контурів/Paths). Виберіть Визначити довільну фігуру/Define Custom Shape… Зберегти фігуру/Save the Shape.

Кнопки социальных сетей

Кнопки социальных сетей

Тепер ми можемо використовувати іконку як масштабований векторний об’єкт. З допомогою інструмента Перо/Pen змініть Опції/Options шарів фігури (верхній лівий пункт у колонці опцій) і виберіть інструмент Довільна фігура/Custom Shape, потім виберіть тільки що створену іконку. Притримуючи клавішу Shift, перетягніть об’єкт так, щоб він помістився в фрагмент зображення іконки.

Встановіть непрозорість іконки на 20%.

Кнопки социальных сетей

Повторіть ці кроки для решти іконок соціальних мереж.

Кнопки социальных сетей

Крок 9. Ще напрямні

У цьому прикладі ми збираємося показати зображення з портфоліо розміром 640×480 px.

Так як нам хотілося б вирівняти демонстроване зображення по вертикалі в області над навігацією, то потрібно додати ще кілька направляючих. Виберіть Вид/View > Нова направляюча/New Guide і Додати/Add горизонтальні напрямні на 180px і 660px. Так ми розташуємо показуються зображення посередині простору над навігацією по вертикалі.

Нам також потрібно трохи тексту зліва від демонструється зображення, так що додаємо вертикальні напрямні 400px і 350px для забезпечення поля для тексту і місця для навігації до наступного зображення. Нарешті, додайте вертикальні напрямні 1040px і 1070px для встановлення краю перегляду зображення поля між суміжними зображеннями.

направляющие

Крок 10. Створіть «наповнювачі» зображень

Створіть нову групу з назвою ‘Projects’ (проекти). Потім за допомогою інструменту Прямокутник/Rectangle накресліть прямокутник 640x480px, який вирівнюється вгорі в 400px зліва від вертикальної напрямної і вгорі в 180px від горизонтальної напрямної. Він послужить в якості «рамки» для нашого основного зображення.

Клацніть на тільки що створений шар правою кнопкою миші і виберіть Растеризовать шар/Rasterize Layer.

направляющие

Тепер, притримуючи кнопку Alt, клацніть і перетягніть шар для створення дубліката. Посуньте його в праву сторону шару з полем в 30px, щоб вирівняти по направляючої 1070px, і використовувати ту саму базову лінію.

Створіть ще два дубліката та вирівняйте їх по низу кожного з полем між ними в 30px.

направляющие

Потім, застосувавши інструмент Відро/Paint Bucket, залийте кожну з цих форм кольором #252a3a.

Крок 11. Віньєтка

Створіть нову групу з назвою ‘Vignette’ (віньєтка) під групою ‘Navigation’ (навігація) і вище групи ‘Projects’ (проекти).

Створіть новий шар і застосуйте інструмент Відро/Paint Bucket для заливки шару за допомогою кольору переднього плану #0f1219.

Інструментом Еліпс/Ellipse намалюйте абрис, що перетинає по кутах напрямні основного зображення.

Виньетка

Тепер для створення ефекту віньєтки нам знадобиться обрізати цю область при одночасній розтушовуванні її краю. Щоб домогтися цього, ми використовуємо Вибрати/Select > Модифікація/Modify > Розтушовування/Feather. Розтушуйте вибірку на 60px, а потім обріжте вибір шару (Ctrl-x / Command-x).

Виньетка

Виньетка

Крок 12. Створіть маски проекту

Так як потрібно виставляти роботу в найбільш вигідному світлі, нам знадобиться розмістити в «заповнювачах» кілька скріншотів. Поверніться до групи ‘Projects’ (проекти) і вставити скріншот, вибравши при цьому основний «заповнювач». Так ви вставите шар поверх нього. Потім клацніть правою кнопкою миші по шару і виберіть Створити обтравочную маску/Create Clipping Mask.

маска

Вставте ще три скріншота в інші «наповнювачі».

маска

Зменшите непрозорість усіх скріншотів, крім розташованого по центру, до 20%.

Крок 12 Вставка тексту

Для анотації кожного проекту ми використовуємо три текстових шару. Створіть для їх розміщення нову групу поверх групи ‘vignette’ (віньєтка).

Для першого шару, заголовка, ми застосуємо світлий шрифт. У цьому прикладі я використовував DIN Light, проте інший схожий вигляд шрифту теж може підійти. За допомогою інструменту Текст/Text перетягніть текстовий блок в напрямні ліворуч від основного зображення і на 40px нижче верхньої направляючої. Встановіть колір на #FFFFFF, трекінг -25 для більш щільного межбуквенного інтервалу і використовувати розмір шрифту 28px.

вставка текста

Ми, крім того, додамо рядок категорії проекту та дати. Встановіть розмір на 14px, трекінг на 100, натисніть caps і застосуйте колір #338966 для того, щоб підкреслити цю рядок.

вставка текста

Далі в тексті основи ми будемо використовувати системний шрифт, такий як Lucida Grande або Lucida Sans Unicode 12px з кольором #8C8F95 і висоту рядка 18px.

вставка текста

Крок 14. Додайте керування мишкою

Для навігації сайту-портфоліо ми зробимо управління мишею або з клавіатури. Інтуїтивне розміщення спрямованих кнопок навігації проводиться згідно їх функції. Наприклад, кнопка зі стрілкою вправо буде праворуч від основного зображення.

Для кнопок ми застосуємо напівпрозорі форми, що змінюють непрозорість при проведенні над ними мишею або подію клацання. Створіть нову групу з назвою ‘Buttons’ (кнопки) над групою ‘Vignette’ (віньєтка).

Потім створіть новий документ з роздільною здатністю 37x37px. З допомогою інструмента перо накресліть форму шеврона, як внизу. Повторюючи процес Кроку 8, за допомогою інструмента виділення контуру/Path Selection клацніть правою кнопкою миші по формі і виберіть Визначити довільну форму/Define Custom Shape. Зберегти фігуру.

управление мышкой

Перейшовши до основного полотна, використовуйте інструмент Довільна фігура/Custom Shape, щоб вставити попередньо створену фігуру.

управление мышкой

Потім виберіть Правка/Edit > Трансформування/Transform > Відобразити по горизонталі/Flip horizontal. Так ви розгорнете стрілку вправо. Скопіюй цю фігуру і використовуйте Правка/Edit > Трансформування/Transform > Поворот на 90 градусів за годинниковою стрілкою/Rotate 90 degrees Clockwise для створення фігури, що вказує вниз.

управление мышкой

Додайте всі ці фігури в центрі їх відповідного напряму. Передбачте поле в 15px, щоб кнопки могли частково перекривати суміжні зображення і знизьте непрозорість до 12%.

управление мышкой

Крок 15. Карта орієнтування

Щоб користувач міг бачити, де він загалом знаходиться в портфоліо, ми винесемо сітку моделі і використовуємо лінії різної висоти для подання колонок з зображеннями і індикатора для визначення поточного положення перегляду.

Створіть нову групу з назвою ‘Orientation’ (орієнтування) і розмістіть її над групою ‘Vignette’ (віньєтка).

За допомогою інструмента Олівець/Pencil виберіть Квадратну кисть/Square brush, встановлену з меню fly-out. Потім за допомогою кольору #FFFFFF і товщини 5px накресліть лінію висотою 60px, вирівняний по направляючої далекого лівого краю.

Карта ориентирования

Карта ориентирования

Скопіюйте цей шар і додайте його у 2px праворуч. Повторіть те ж саме і створіть до 12 ліній.

Карта ориентирования

Встановіть непрозорість усіх верств на 12%. Це легко зробити, встановивши непрозорість для першого шару, потім клацнути правою кнопкою миші і вибрати Скопіювати стиль шару/Copy Layer Style. Потім вибрати всі шари і Вставити стиль шару/Paste Layer Style.

Карта ориентирования

Розташуйте ці верстви в шаховому порядку з допомогою команди Правка/Edit > Вільне трансформування/Free Transform для зменшення/збільшення кожній лінії.

Карта ориентирования

Нарешті, створіть новий шар і знову застосувати олівець, щоб намалювати на першій лінії маркер. Це – індикатор розташування.

Карта ориентирования

Крок 16. Управління з клавіатури

Часто управління з клавіатури пропонує інтуїтивне використання навігації. Однак ми повинні дати користувачеві зрозуміти, що з клавіатури теж можна керувати. Для виконання цього завдання створимо іконки зі стрілками клавіатури.

Створіть нову групу з назвою ‘Keyboard’ (клавіатура) і розмістіть її над групою ‘Vignette’ (віньєтка).

За допомогою інструменту Прямокутна фігура/Rectangle Shape накресліть квадрат (притримуючи Shift) 20x20px з кольором #262a34. Клацніть правою кнопкою миші на панель шарів/Layers і виберіть Параметри накладання/Blending Options. Знайдіть Обведення/Stroke і застосуйте зовні обведення в 1px кольором #32343f.

правление с клавиатуры

Потім за допомогою інструменту перо (переконайтеся, що на панелі опцій стиль встановлений За замовчуванням/Default) кольором #fff намалюйте стрілку зі злегка квадратним вістрям. Відрегулюйте так, як вам треба за допомогою інструменту Прямої вибір/Direct Selection. Встановіть непрозорість на 20%.

правление с клавиатуры

В панелі шарів, притримуючи shift, виберіть тільки два створених шару. Клацніть правою кнопкою миші і виберіть Дублювати шари/Duplicate layers. Потім за допомогою опції меню Правка/Edit > Трансформування/Transform обертайте дубльовані верстви до їх правильного розташування. Повторіть той же крок для створення всіх чотирьох іконок.

правление с клавиатуры

Висновок

Відмінно! Зараз ми закінчили розділ моделювання свого проекту… значить, все, що залишилося зробити – це закодувати його за допомогою основного HTML/CSS, jQuery Hotkeys і декількох додаткових прийомів jQuery. Якщо хтось хоче побачити, як Стать кодував свою модель, дайте про це знати в коментарях, щоб ми змогли все організувати!