Створення дизайну інтернет-магазину в Photoshop

29

Від автора: пам’ятайте халявний Fashion Store? Сьогодні я покажу вам, як створити дизайн, цього інтернет магазину в Adobe Photoshop. Цей підручник битком набитий не тільки методами photoshop’у, але і дизайнерськими концепціями, що йдуть далеко за межі практичної області, чого, я впевнений, ви не захочете пропустити. Отже, давайте почнемо створювати дизайн нашого інтернет магазину!

Деталі підручника «Створення дизайну інтернет-магазину з нуля»

Складність: Початковий рівень

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

скачать исходники

Кінцевий продукт, який ми створимо:

Перш за все, хочу віддати належне Сунилу (Sunil), який фактично створив цей інтерфейс. Я зробив кілька модифікацій макета, таких як його реорганізацію згідно сітці.

Зробіть ескіз своєї ідеї

«Нехай ваші ескізи будуть вільними і зразковими»

Перш ніж перейти безпосередньо до створення дизайну інтернет-магазину в Adobe Photoshop, потрібно спочатку приділити час роздумів над тим, як зробити структуру свого проекту. Давайте візьмемо ручку і папір і почнемо замальовувати каркас.

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

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

На жаль, так як я не робив цей макет «з нуля», немає можливості показати вам скріншот з ескізом каркаса. Але скажу одне: нехай ваші ескізи будуть вільними і зразковими. Їм не потрібно бути химерними або високохудожніми.

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

Для подальшого читання:

18 Great Examples of Sketched UI Wireframes and Mockups

Why Sketching And Wireframing Ideas Strengthens Designs

Створення каркасу в сірих тонах

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

Ось як остаточно повинен виглядати чорно-білий каркас:

Розмітка: Композиція

Перед початком роботи над каркасом в Adobe Photoshop нам потрібно прийняти кілька рішень.

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

Розмітка: Сітка

Використання сітки полегшує вирівнювання елементів і вибір їх розміру. У цьому проекті ми застосуємо Сітки базових ліній, створену приголомшливими хлопцями з Teehan+Lax. Це сітка з 6px-них базових ліній, поєднана з 960 grid system.

Для подальшого читання:

По мірі просування вперед ми обговоримо, як вирівняти текст і елементи, а поки вам варто прочитати цю статтю, щоб зрозуміти, як користуватися сіткою.

Designing Faster with a Baseline Grid

Розмітка: Біле простір

Біле, або негативний простір – це проміжки між елементами інтерфейсу. Простір між основними елементами називають білим макропространством. Біле микропространство – це незаповнені проміжки між такими елементами, як пункти списку, порожнє місце між заголовком і зображенням, або простір між словами та символами.

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

Друкарська розмітка тексту: Гарнітури

Гарнітури/шрифти потрібно вибирати дуже ретельно. Вибрати правильний шрифт зовсім непросто, і досліджувати цю проблему слід з різних боків – від підбору індивідуальної гарнітури, передає потрібне послання, до відображення її в браузері. Не буду вдаватися тут у подробиці, замість цього хотів би згадати кілька постів, знайдених мною дуже цікавими:

Для подальшого читання:

A beginner’s Guide to Pairing Fonts

How to Choose a Typeface

What Font Should I Use?: Five Principles for Choosing and Using Typefaces

Choosing the Right Font: A Practical Guide to Typography on the Web

Choose your web fonts wisely

On Choosing Type

У своєму інтерфейсі ми використовуємо три наступних гарнітури: Helvetica – «чисту» і сучасну, цим все сказано; Georgia – викликає королівські асоціації і задає серйозний тон гарнітуру; Bebas – гарнітуру авторитетну і, подібно жирного шрифту, завжди доречну.

Helvetica Neue: Основний текст (стандартний шрифт).

Bebas: Заголовки (Завантажити тут).

Georgia: Інші елементи заголовків (стандартний шрифт).

Друкарська розмітка тексту: Ієрархія

«Ієрархія розмітки тексту» просто описує, як різні шрифти, типи стилі та розміри структурують документ.

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

24px: заголовки H1.

18px: заголовки H2.

14px: H3 і заголовки навігації.

12px: Основний текст — зі значенням міжрядкового інтервалу 18px.

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

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

Друкарська розмітка тексту: Міжрядкові і інтервали між знакові і трекінг

Як я вже говорив, ми застосуємо значення міжрядкових інтервалів в залежності від сітки, що складе 18px і 21px.

Інтервали між знакові у нас будуть Metrics (автоматичні, за замовчуванням) в основному тексті і Optical (вільно визначені) в заголовках (дивіться статтю для подальшого читання). І нарешті, для всього тексту ми використовуємо значення трекінгу (0).

Для подальшого читання:

Metrics versus Optical Kerning

Друкарська розмітка тексту: Згладжування

Ось дійсно відмінна стаття. Ви зобов’язані її прочитати! Я не скажу нічого, крім того, що для основного тексту (маленькі розміри точок) ми використовуємо метод згладжування Sharp, а для заголовків (великі розміри точок) застосуємо Crisp.

The Ails Of Typographic Anti-Aliasing

Крок 1: Створення документа

Коли вже прийняті якісь рішення, пора запустити Adobe Photoshop і фактично почати створювати каркас! Отже, відкрийте заздалегідь завантажений документ сітки, який називається “grid2.psd». Перше, що ми зробимо – виділимо всі шари документа, крім папки з назвою «Marks», і позбавимося від них, або згрупуємо їх у папку і поки приховаємо. Перш ніж продовжити, давайте виберемо папку «Marks» і натиснемо в панелі шарів кнопку Закріпити всі (Lock All).

Тепер потрібно змінити висоту документа, так як наш остаточний дизайн проекту вище існуючого документа. Виберіть Зображення (Image) > Розмір полотна (Canvas Size), змініть висоту на 1540px і переконайтеся, що встановили Точку прив’язки/вузлову точку (Anchor) вгорі по центру.

Потім відкрийте Перегляд (View) > Допоміжні елементи (Extras), щоб переглянути напрямні Лінійки (Rulers), щоб відкрити для перегляду лінійки, і Захоплення (Snap) для прив’язки створюваних нами об’єктів до напрямних).

Крок 2: Створення фону

Ми почнемо з фону. Створіть новий шар, назвіть його (наприклад, «bg»), потім виберіть інструмент » Прямокутна область (Rectangular Marquee Tool) (M). Виділіть весь полотно та натисніть Shift+Backspace для заливки, Застосувати: Колір (Use: Color), потім зробіть заливку, встановивши значення кольору #f5f5f3. Зверніть увагу, що значення застосовуваних нами в чорно-білому каркасі квітів неостаточні, а використовувати їх ми станемо для розрізнення елементів сторінки.

Крок 3: Створення верхньої панелі

Тепер давайте створимо верхню панель. Знову виберіть інструмент » Прямокутна область (Rectangular Marquee Tool) (M), зробіть виділення розміром 1260x45px і залийте його кольором #2d2d2d.

Виберіть Горизонтальний текст (Horizontal Type Tool) (T), напишіть елементи навігації, потім застосуйте до них наступні налаштування символів.

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #767676.

Anti-Aliasing (метод згладжування): Sharp.

Щоб переконатися, що наш текст вирівняний щодо фону правильно, виберіть обидва шару (шар з текстом і шар з фоном) і натисніть на панелі параметрів Вирівнювання центрів по вертикалі (Align vertical centers).

Крок 4: Створення поля входу

За допомогою інструменту Горизонтальний текст (Horizontal Type Tool) (T) надрукуйте слово «Вхід» («Sign In»),застосуйте наступні налаштування і обов’язково вирівняйте, як показано на зображенні внизу.

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 75 Bold.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Sharp.

Тепер давайте створимо поля введення даних. Використовуючи інструмент Прямокутник з округленими кутами (Rounded Rectangle Tool) (U), створіть дві фігури, кожна розміром 127x26px, з радіусом кута 15px. Залийте їх кольором #767676 і вирівняйте, як на зображенні внизу.

Всередині цих полів напишіть слова: «Ім’я користувача» (User name») та «Пароль» (Password), застосувавши до них наступні налаштування шрифту, потім вирівняйте їх згідно зображенню нижче.

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Sharp.

Кнопку «Увійти» («Go») ми створимо за допомогою інструменту Прямокутник з округленими кутами (Rounded Rectangle Tool) (U), але тепер фігура буде розміром 33x25px з радіусом кутів в 25px. Після цього всередині неї надрукуйте слово «Увійти» («Go»), застосувавши ті ж параметри, що на попередньому зображенні, але змінивши накреслення шрифту на 75 Bold (напівжирний).

Виберіть інструмент Лінія (Line Tool), намалюйте вертикальну лінію 1x25px і залийте її білим кольором. Тепер напишіть слово «Зареєструватися» («Sign Up»), використовуючи такі параметри символів, потім вирівняйте згідно зображенню всі створені нами в цьому кроці елементи.

Крок 5: Створення рекламної області

Використовуючи інструмент Прямокутна область (Rectangular Marquee Tool) (M), створіть виділення 480x60px, залийте його кольором #767676 і вирівняйте, як на зображенні внизу. Вона стане місцем для розміщення реклами.

Тепер призначимо цього шару Обводки (Stroke). На зображенні нижче показані потрібні нам настройки.

Крок 6: Створення логотипу

Власне, наш логотип не повинен робитися в Adobe Photoshop, але поки що ми створимо його тут. Так, виберіть інструмент Еліпс (Ellipse Tool) (U), створіть коло розміром 60x60px, залийте його кольором #2d2d2d, і вирівняйте, як показано на рисунку.

Надрукуйте букву «F», вкажіть наступні параметри і вирівняйте її так, як показано на зображенні:

Font (шрифт): Avant Quelombre.

Size (розмір): 53.65 px.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Потім надрукуйте слово «Мода» («Fashion») з наступними налаштуваннями:

Font (шрифт): Avant Quelombre.

Size (розмір): 30px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Sharp.

Переконайтеся, що ви розташували їх згідно зображенню нижче:

Крок 7: Створення панелі навігації

На цьому етапі ми створимо панель навігації. Виберіть інструмент » Прямокутна область (Rectangular Marquee Tool) (M), виділіть область розміром 940x48px, залийте її кольором #c3c3c3 і опустіть на 20px нижче галузі реклами, як на зображенні нижче.

Йдемо далі. Виберіть Горизонтальний текст (Horizontal Type Tool) (T) і надрукуйте назви сторінок-підрозділів, використовуючи наступні налаштування:

Font (шрифт): Bebas.

Weight (накреслення): Regular.

Size (розмір): 14px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d/#ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Тепер давайте відділимо створені нами зараз заголовки. Використовуючи інструмент Лінія (Line Tool) (U), проведіть між заголовками по вертикальній лінії, залийте їх кольором #b4b4b4 і переконайтеся, що залишили по 20px між кожним заголовком і лінією.

Крок 8: Створення випадного меню

А тепер давайте створимо випадаюче меню? Виберіть інструмент » Прямокутна область (Rectangular Marquee Tool) (M), виділіть простір між двома лініями, оточуючими слово «Жінки» («WOMEN»), і залийте його кольором #2d2d2d. Потім створіть інше виділення розміром 340x147px, залийте тим же кольором і встановіть, як на зображенні внизу. Воно послужить фоном нашого випадаючого меню.

Натисніть на клавіатурі кнопку (T), щоб вибрати інструмент » Горизонтальний текст (Horizontal Type Tool) (T) і почніть друкувати елементи підменю, використовуючи наступні параметри символів:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Leading (міжрядковий інтервал): 30px.

Color (колір): #767676.

Anti-Aliasing (метод згладжування): Sharp.

Нарешті, переконайтеся, що всі вирівняне як на наступному зображенні.

Зараз ми створимо рамку для зображення (де розмістимо жіночу фотографію, щоб дати зрозуміти користувачеві, що він знаходиться в розділі «Жінки» («Women»)). Отже, створимо за допомогою інструменту Прямокутна область (Rectangular Marquee Tool) (M) виділення розміром 139x105px і заллємо кольором #1f1f1f, потім створимо інше виділення розміром 121x87px і заллємо кольором #767676. Переконайтеся, що центри обох прямокутників вирівняні по вертикалі і горизонталі.

Крок 9: Створення області пошуку

Йдемо далі. Створюємо поле введення пошукового рядка. Виберіть Прямокутник з округленими кутами (Rounded Rectangle Tool) (U), створіть прямокутник розміром 123x26px з радіусом кутів 15px і залийте його білим кольором. Не забудьте вирівняти, як показано на зображенні:

Використовуючи інструмент » Горизонтальний текст (Horizontal Type Tool) (T), надрукуйте всередині прямокутника слово «Пошук» («Search») і застосуйте до нього такі параметри шрифту:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #767676.

Anti-Aliasing (метод згладжування): Sharp.

Знайдіть іконку лупи і помістіть праворуч від поля пошуку, переконайтеся, що вона пофарбована в колір #929292 і вирівняна згідно зображенню нижче.

Крок 10: Створення області обраного вмісту

Давайте приймемось за створення області обраного вмісту. Почнемо з виділення прямокутної області розміром 640x315px за допомогою інструменту Прямокутна область (Rectangular Marquee Tool) (M) і заповнимо її кольором #c3c3c3.

Тепер створимо панель, де буде знаходитися повідомлення про представленому продукті. За допомогою інструменту Прямокутна область (Rectangular Marquee Tool) (M) створіть виділення розміром 480x33px, залийте його кольором #767676 і вирівняйте, як показано на малюнку нижче.

Виберіть інструмент » Горизонтальний текст (Horizontal Type Tool) (T) і надрукуйте повідомлення, використовуючи наступні параметри шрифту:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 14px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Sharp.

Не забудьте вирівняти текст і фон, як показано.

Пора написати вступний текст. Виберіть Горизонтальний текст (Horizontal Type Tool) (T) і надрукуйте слово «Колекція» («Collection»), використовуючи наступні налаштування:

Font (шрифт): Georgia.

Weight (накреслення): Bold.

Size (розмір): 18px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Crisp.

Потім напишіть слово «Літо» («Summer»), використовуючи ці налаштування:

Font (шрифт): Georgia.

Weight (накреслення): Bold.

Size (розмір): 48px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

І, нарешті, надрукуйте «Допоможемо вам відмінно виглядати» («Helping you look cool») з наступними застосуванням параметрів:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 18px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Crisp.

Переконайтеся, що вирівняли текст, як показано на зображенні внизу.

Крок 11: Створення ярлика розпродажі

Тепер давайте створимо ярличок розпродажі. Використовуючи інструмент Еліпс (Ellipse Tool) (U), створіть коло розміром 80x80px, залийте його кольором: #2d2d2d, після чого додайте, як показано нижче.

Впишіть у коло текст (наприклад, «Знижка 40%» («40% off»)) і застосуйте наступні налаштування шрифту:

Font (шрифт): Georgia.

Weight (накреслення): Regular / Bold.

Size (розмір): 48px / 14px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Крок 12: Створення області основного вмісту

Давайте зробимо область основного вмісту. Почнемо з заголовка. За допомогою інструменту Горизонтальний текст (Horizontal Type Tool) (T) надрукуйте заголовок і застосуйте наступні налаштування:

Font (шрифт): Bebas.

Weight (накреслення): Regular.

Size (розмір): 24px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Crisp.

Не забудьте помістити його на 20px нижче області обраного контенту.

З допомогою обраного раніше інструменту Горизонтальний текст (Horizontal Type Tool) (T) напишіть короткий опис цього заголовку з наступними налаштуваннями:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #767676.

Anti-Aliasing (метод згладжування): Sharp.

І, звичайно, його треба вирівняти за сітки базових ліній, як показано на зображенні нижче.

Використовуючи інструмент Лінія (Line Tool) (U), створіть межу шириною 640px і пофарбуйте її в колір #e5e5e5.

Крок 13: Створення зображень продукту

Вибравши інструмент Прямокутна область (Rectangular Marquee Tool) (M), виділіть область розміром 200x152px, заповніть кольором #2d2d2d і вирівняйте на 20px нижче тільки що створеної нами лінії.

Створіть ще один ярлик розпродажі, такий, як в кроці 11, але на цей раз зробіть коло 45x45px білого кольору. А текст потрібен розміром 24px/14px і кольором #767676.

Щоб надрукувати назву і вартість товару, використовуйте Горизонтальний текст (Horizontal Type Tool) (T) з наступними налаштуваннями:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Leading (міжрядковий інтервал): 21px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #767676 / #000000.

Anti-Aliasing (метод згладжування): Sharp.

Якщо вам цікаво знати, порожній простір між текстом ми заповнимо іконкою.

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

Якщо іконка кольорова, перейдіть до Шар (Layer) > Новий коригувальний шар (New Adjustment Layer) > Чорно-білий (Black & White) … щоб зробити її чорно-білою.

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

Крок 14: Створення великого банера для бічній панелі

Тепер попрацюємо над бічною панеллю. Почнемо з великого банера – інструментом Прямокутник (Rectangle Tool) (U) створіть фігуру розміром 280x314px і залийте її кольором #2d2d2d. Потім створіть тим же інструментом інший прямокутник розміром 280x41px і залийте кольором #767676 і вирівняйте їх, як показано нижче.

Використовуючи інструмент » Горизонтальний текст (Horizontal Type Tool) (T), надрукуйте назву банера, використовуючи наступні параметри:

Font (шрифт): Bebas.

Weight (накреслення): Regular.

Size (розмір): 18px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Виберіть за допомогою кнопки (U) інструмент Еліпс (Ellipse Tool) (U), створіть коло 210x210px, залийте його кольором #7676767 і постарайтеся вирівняти, як на зображенні.

Тепер, щоб позбутися від частини кола, що виходить за край фону банера, відкрийте панель шарів, помістіть шар з колом («tag_bg») прямо над шаром фону банера («box_bg»), потім клацніть правою кнопкою миші по шару з колом і виберіть > Створити обтравочную маску (Create Clipping Mask).

Тепер з допомогою інструменту Горизонтальний текст (Horizontal Type Tool) (T) надрукуйте всередині кола текст, використовуючи наступні налаштування:

Font (шрифт): Georgia.

Weight (накреслення): Regular.

Size (розмір): 18px / 14px / 24px / 30px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Також переконайтеся, що на панелі Символ (Character) обраний «Faux Bold».

Крок 15: Створення менших банерів бічній панелі

За допомогою інструменту Прямокутник (Rectangle Tool) (U) створіть область розміром 280x144px, залийте її кольором #2d2d2d і розташуйте згідно зображення внизу.

Тепер давайте зробимо кнопку «Дізнатись більше» («Know More»). Використовуйте інструмент Прямокутна область (Rectangular Marquee Tool) (M) для виділення блоку розміром 120x30px і залийте його кольором #767676.

Потім виберіть Горизонтальний текст (Horizontal Type Tool) (T), надрукуйте «Дізнатись більше» («Know More») всередині прямокутника, використовуючи наступні налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 18px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

Надрукуйте ще трохи тексту за допомогою Горизонтальний текст (Horizontal Type Tool) (T), як на зображенні внизу, застосувавши наступні налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 14px / 24px / 18px.

Leading (міжрядковий інтервал): 24px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #ffffff.

Anti-Aliasing (метод згладжування): Crisp.

На зображенні внизу показано, як вирівняти текст.

Зробіть копію цього банера і залиште між ними 20px вертикального простору.

Крок 16: Створення розділу «Новинки Twitter’а» («Twitter Updates»)

Зробіть виділення розміром 280x235px за допомогою інструменту Прямокутна область (Rectangular Marquee Tool) (M), залийте його білим кольором і помістіть на 20px нижче банера.

За допомогою інструменту Горизонтальний текст (Horizontal Type Tool) (T) напишіть заголовок, використовуючи наступні налаштування:

Font (шрифт): Bebas.

Weight (накреслення): Regular.

Size (розмір): 18px.

Kerning (міжсимвольний інтервал): Optical.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Crisp.

Використовуючи інструмент Лінія (Line Tool) (U), створіть межу шириною 240px, і пофарбуйте в колір #e5e5e5.

Знайдіть іконку/зображення пташки Twitter’а і додайте, як зазначено нижче. Також переконайтеся, що вона чорно-біла, як в кроці 13.

За допомогою інструменту Горизонтальний текст (Horizontal Type Tool) (T) напишіть текст – приклад посту, потім застосуйте ці налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Leading (міжрядковий інтервал): 18px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #2d2d2d / #767676.

Anti-Aliasing (метод згладжування): Sharp.

Потім надрукуйте «Інші пости» («More Tweets»), використовуючи наступні налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #2d2d2d.

Anti-Aliasing (метод згладжування): Sharp.

Не забудьте включити на панелі Символ (Character) «Підкреслити» («Underline»).

Крок 17: Створення розділу «Інші товари» («Other Products»)

Виберіть інструмент Прямокутник (Rectangle Tool) (U) і створіть фігуру розміром 940x264px, залийте кольором #ffffff, і помістіть на 20px нижче розділу «Новини Twitter»а» («Twitter Updates»).

Створіть заголовок цього розділу, як в попередньому кроці. Потім скористайтеся інструментом Лінія (Line Tool) (U), щоб створити лінію шириною 898px, і залийте кольором #e5e5e5.

За допомогою інструменту Прямокутник (Rectangle Tool) (U) створіть фігуру розміром 178x113px. Скопіюйте її тричі і вирівняйте відповідно до зазначеного нижче.

Знову напишіть інформацію про товар і застосуйте до тексту наступні налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Leading (міжрядковий інтервал): 18px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #2d2d2d/#767676.

Anti-Aliasing (метод згладжування): Sharp.

Нарешті, не забудьте підкреслити «Купити зараз» («Buy Now»).

Знайдіть іконку покажчика-стрілки і додайте її, як на зображенні нижче, постарайтеся змінити розмір приблизно до 28x28px і залийте кольором #2d2d2d. Зробіть ще одну копію іконки, і помістіть з правого боку.

Крок 18: Створення області нижнього колонтитула

Виберіть інструмент » Прямокутна область (Rectangular Marquee Tool) (M) і виділіть область розміром 1260x122px, потім залийте її кольором #2d2d2d.

Наберіть текст в нижньому колонтитулі, використовуючи для нього наступні налаштування:

Font (шрифт): Helvetica Neue LT Std.

Weight (накреслення): 55 Roman.

Size (розмір): 12px.

Leading (міжрядковий інтервал): 21px.

Kerning (міжсимвольний інтервал): Metrics.

Color (колір): #ffffff / #767676.

Anti-Aliasing (метод згладжування): Sharp.

Нарешті, помістіть копію логотипу і переконайтеся, що він вирівняний, як зазначено нижче, от і все!

Поєднання кольорів

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

Залежний, або базовий колір: Візуально слабкий або підлеглий колір. Контрастує або відтіняє.

Домінуючий, або основний колір: Визначає комунікативну значущість колірних поєднань.

Акцентний, або виділяє колір: Може гармоніювати з базовим або основним кольором. Або, навпаки, можна вибрати візуально сильний акцентуирующий колір, який конкурує з основним кольором в цілях забезпечення суперечливості поєднання.

На цьому зображенні демонструються базовий, основний і акцентний кольору.

Область перегляду

Так як у своєму проекті ми застосовуємо портрети, я вважаю себе зобов’язаним коротко розповісти про «область перегляду» («Looking Room»). Зазвичай на портретне фото є предмет і простір навколо нього. Глядацький інтерес до портрета може бути взятий з руху, саме так наші очі переміщуються по знімку. Щоб змусити погляд рухатися, фотограф відповідно регулює простір навколо предмета.

Так, наприклад, як можна побачити на зображенні нижче, вирівнювання предмета зліва (1), з білим простором (областю перегляду) справа, створює якийсь рух (3), яка змушує наш погляд переміщатися в тому напрямку, куди дивиться об’єкт.

Для подальшого читання:

A Practical Guide to Designing With Faces

Крок 19: Кольору фону

Тепер давайте розфарбуємо свій інтерфейс! Щоб залити фоновий шар кольором, можна двічі клацнути на його піктограмі на панелі шарів, утримуючи при цьому клавішу Cmd/Ctrl, щоб виділити її пікселі, а потім натиснути Shift+Backspace > Колір (Color)… > #f6f6f4. Чи можна додати до нього Накладення кольору (Color Overlay).

Крок 20: Кольору верхньої панелі

Окрасьте слово «Вхід» («Sign In») в колір #ffffff, «Ім’я користувача/Пароль» («User name/Password») – в #8e8e8e, поля введення даних – #8e8e8e, фон кнопки «Зареєструватися» («Sign Up») – в #ea6a53, текст навігації – в #999999.

Заповніть рекламну площадку зображенням, як показано внизу, і створіть для нього Обтравочную маску (Clipping mask), як в кроці 14.

Пора розфарбувати логотип. Призначте колу і слова «Мода» («Fashion») колір #2d2d2d, залийте букву «F» тим же кольором, що і фон – #f6f6f4, а слово «Магазин» («магазин») – #bc3726.

Крок 21: Кольори навігаційної панелі

Ми заллємо фон тексту навігації цим кольором: #c3c3c3, текст – #2d2d2d, слово «Жінки» («WOMEN») – #f6f6f4 (представляє стану наведення мишею і вибору об’єкта), а вертикальні лінії відокремлюють – #b4b4b4.

Щоб додати навігаційного тексту більше візуальної привабливості, додамо ефект Падаючої тіні (Drop Shadow). Налаштування – на зображенні нижче…

Перейшовши до рядка пошуку, заллємо поле введення білим #ffffff, слово «Пошук» («Search») – #a6a6a6, а значок пошуку – #ea6a53.

Тепер давайте розфарбуємо субнавигационную панель… Заповніть фон кольором #2d2d2d, текст – #c4c4c4, а кордон зображення – #1f1f1f.

Краї зображення можна зробити цікавіше, додавши до них ефекти Падаюча тінь (Drop Shadow) і Внутрішня тінь (Inner Shadow). Всі налаштування показано нижче.

Нарешті, помістіть зображення дівчини-моделі, як показано на рисунку.

Тепер настав час створити пунктирні лінії між елементами навігації. Відкрийте Adobe Illustrator, створіть новий документ, виберіть інструмент Лінійний сегмент (Line Segment Tool) (\), створіть лінію шириною 135px і зробіть заливку Немає кольору (None) (/). Потім відкрийте панель Обведення (Stroke) і встановіть, як зазначено нижче.

Скопіюйте пунктирну лінію і вставте в Adobe Photoshop, зробіть з неї дві копії і залийте кольором #484848.

Крок 22: Кольори великого банера бічній панелі

На цьому етапі ми почнемо з розміщення зображення в якості тлі банера. Виберіть Файл (File) > Помістити… (Place) > Вибрати зображення (Select an image) > Помістити (Place).

Тепер рухаємося далі. Розфарбуємо коло з текстом всередині. Застосовуються кольору показано на зображенні нижче.

Щоб трохи виділити число «50», ми застосуємо до блогу шару ефект Падаюча тінь (Drop Shadow). Налаштування можна бачити нижче.

Пора попрацювати над заголовком… Залийте його фон кольором #000000, а текст – #c3c3c3. Потім створіть дві пунктирні лінії (як в кроці 21), залийте їх кольором #414141 і помістіть зверху і знизу заголовка, як показано нижче.

Давайте додамо фону заголовка візуальної привабливості, призначивши йому легку текстуру «потертості». Завантажте дивовижний набір кистей Function Subtle Grunge Brushes, створений класними хлопцями з WeFunction, або будь-який інший кращий набір кистей. Вибравши шар фону заголовка, створіть прямо над ним новий шар, помалюйте поверх заголовка однією з кистей з допомогою інструменту Кисть (Brush Tool) (B) (або замість неї використовуйте один із включених PNG’ів), залийте білим кольором, потім зменшите непрозорість шару до 30%. Нарешті, клацніть на ньому правою кнопкою миші і виберіть Створити обтравочную маску (Create clipping mask)…

Крок 23: Кольори області обраного вмісту

Ми заллємо фон області обраного контенту градієнтом, щоб вона виглядала цікавіше. Так що виберіть інструмент Градієнт (Gradient Tool) (G), відкрийте Редактор градієнтів (Gradient Editor) на Панелі параметрів (Control panel) і встановіть значення кольору від #b6a397 до #9d8a83.

Нам потрібно виділити область, яку слід залити градієнтом, для цього ми робимо на ній виділення. Перейдемо до панелі шарів, клацнемо на мініатюру фону шару, утримуючи клавішу Cmd/Ctrl, щоб зробити виділення, при вибраному інструменті Градієнт (Gradient Tool) (G), візьмемо Радіальний градієнт (Radial Gradient), і протащим, як показано внизу, утримуючи при цьому клавішу Shift, щоб обмежити кут.

Значення кольорів елементів цього розділу видно нижче.

Нарешті, знайдіть фото дівчини-моделі, помістіть в свій документ і вирівняйте по сітці, як показано внизу.

Крок 24: Кольори маленьких банерів бічній панелі

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

Для виділення тексту додамо йому Тінь (Drop Shadow). Налаштування ви можете бачити внизу.

І зробимо те ж саме з іншим банером…

Тепер додамо кольору розділу «Новинки Twitter’а» («Twitter Updates»)… Зображення нижче містить всі використовувані в цьому розділі кольору.

Крок 25: Кольори області основного вмісту

Почнемо з заголовка. Залийте його кольором #2d2d2d, потім опис кольором #858585, і лінію – #e5e5e5.

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

Елементи розділу «Інші товари» («Other Products») будуть пофарбовані в ті ж кольори, що і в попередньому кроці, тільки переконайтеся, що залили фон білим #ffffff, а значок вказівника-стрілки – #040707.

Кольори області нижнього колонтитула

Залийте фон нижнього колонтитула цим кольором: #2d2d2d, а текст – #a0a0a0 і #ffffff.

І, нарешті, кольори логотипу показано на зображенні нижче…

Висновок статті щодо створення дизайн-макету інтернет магазину

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