Темый дизайн сайту

35

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

Від автора: ми використовуємо Adobe Photoshop у цьому підручнику для створення «випещеного» веб-інтерфейсу, який можна застосувати до багатьох вебсайтів мобільних додатків. Ми опишемо масу прийомів, включаючи форми, текстури, маски, власні користувальницькі іконки, друкарську розмітку тексту і ще багато чого з того, що можна легко адаптувати і застосувати до своїх власних вебсайтів.

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

Програма: Adobe Photoshop

Версія: CS3 (або вище)

Складність: середня

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

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

В підсумку, ви отримаєте наступний дизайн макет сайту в темних тонах і з глянцем

Що стосується коду

Якщо ви є користувачем Tuts+ premium, можете відразу перейти до повного коду цього підручника. Ерік детально розповість вам, як цей дизайн кодувати в HTML/CSS шаблон!

Для новачків поясню, що Tuts+ Premium – це сервіс, надає топ-можливість навчання та відпрацювання навичок у безлічі творчих областей. Чи вважаєте ви книги, візуальні тренінги або поглиблені курси, ми надамо вам будь-яку інформацію. Хоча, на жаль, у нас немає можливості надавати сервіс безкоштовно, коштує він всього $19 в місяць – менше, ніж ви витратили б на вечерю.

Так, добре, тепер перейдемо до безкоштовної частині дизайну на tut!

Про дизайні

Основа цього підручника – чистий дизайн сайту в темних тонах для Leaflet, додатка iPhone, створеного для видавців Envato marketplace. Ерік Еллі (Eric Alli) з Trilab Media допомагав створювати і кодувати сайт, тому зможе покроково пояснити нам весь підручник. Чи плануєте ви застосувати подібний дизайн у своїх проектах, або просто хочете знати, як він зроблений – ви зможете почерпнути з нашого підручника безліч відмінних прийомів і методик. Насолоджуйтесь!

Крок 1

Створення темного дизайну сайту почнемо з нового документа Photoshop, вибравши Файл/File > Новий/New. Встановіть Ширину/Width і Висоту/Height полотна на 1100px, Дозвіл/Resolution на 72 і колір фону/Background Contents на Білий/White.

Далі потрібно створити дві напрямні, які послужать контейнером нашої сторінки. Виберіть Вид/View > Нова направляюча/Guide New…

Для першої направляючої встановіть Орієнтацію/Orientation на Вертикальну/Vertical, а Розташування/Position на 70 px.
Для другої направляючої знову виберіть Вид/View > Нова направляюча/New Guide… і створіть іншу вертикальну напрямну з Розташуванням/Position, встановленим на 1030 px.

Зараз на нашій сторінці повинно вийти обрамлене простір шириною 960px.

Крок 2

Наступний етап у створенні темного дизана сайту – це фон. Виберіть інструмент Заливка/Paint Bucket (G) і встановіть групу кольорів переднього плану/Foreground Color Swatch на «1e1e1e». Потім клацніть по полотну, щоб застосувати колір до шару фону.

Також давайте призначимо текстуру фону, вибравши Фільтр/Filter > Шум/Noise > Додати шум/Add Noise… Встановіть Величину/Amount на 2.5 і клацніть OK.

Крок 3

Далі нам потрібно зробити світлове пляма, з допомогою якого увага буде фокусуватися на верхній частині сторінки. Візьміть інструмент Кисть/Brush (B), виберіть Базовий діаметр/Master Diameter на 400px і встановіть Жорсткість/Hardness на 0%.

Створіть новий шар, вибравши Шар/Layer > Новий/New > Шар/Layer… і назвіть його «Spotlight».

Змініть групу кольорів переднього плану/Foreground Color Swatch на «FFFFFF» (білий) і створіть у верху полотна окружність з допомогою інструмента Пензель/Brush.

Щоб змішати світлове пляма з фоном, давайте додамо на шар плями шум, вибравши Фільтр/Filter > Додати шум/Add Noise… Встановіть Величину/Amount на 20 відзначте галочкою Монохроматичне/Monochromatic і клацніть OK.

Для згладжування світлового плями виберіть Фільтр/Filter > Розмиття/Blur > гаусівських розподілу розмиття/Gaussian Blur… Виберіть Радіус/Radius на 50.0 і натисніть OK.

Нарешті встановіть Непрозорість/Opacity шару Spotlight приблизно на 25%.

Крок 4

Далі додамо графіком телефону. Для цього підручника я візьму iPhone з чудового Векторного PSD iPhone 4 (Vector iPhone 4 PSD) з сайту Psdtuts+, який можна безкоштовно завантажити тут. Крім того, пам’ятайте, що використовувати можна графіком будь-якого підходящого для вас телефону (Android, Blackberry і т. д.).

По закінченні завантаження відкрийте в Photoshop PSD е. Розгорніть папку «Phones» в панелі шарів, клацніть правою кнопкою миші на папці «FRONT» і виберіть Створити дублікат групи/Duplicate Group… Дайте групі запам’ятовується назва (я назвав «iPhone»), виберіть пункт призначення «Leaflet» (чи як там ви назвали PSD для цього підручника) і натисніть OK. Закінчивши, закрийте цей PSD.

Розмістіть свій перший iPhone так, щоб той стосувався лівої направляючої і знаходився приблизно в 100px від верху полотна.

Зараз якраз вдалий час модифікувати скріншот всередині iphone’а. Це легко зробити, розгорнувши папку «iPhone» в панелі шарів, а потім клацнути на папці «SCREEN CONTENTS». Тепер виберіть Файл/File > Помістити/Place, виберіть з браузера свій скріншот і натисніть Помістити/Place.

Перетягніть поміщений шар на iPhone і змініть розмір так, щоб той збігався з екраном. Закінчивши з цим, натисніть Enter і збережіть зміни.

Продублюйте групу «iPhone», вибравши Шар/Layer > Створити дублікат групи/Duplicate Group… назвіть її «iPhone 2» і клацніть OK у діалоговому вікні.

Виберіть Редагувати/Edit > Трансформування/Transform > Масштабування/Scale і розгорніть скопійований iPhone до 107.0% ширини і висоти. Розташуйте його приблизно в 50px від верху і 200px від лівої направляючої.

Повторіть ці дії для заміни скріншота всередині папки «iPhone 2».

Крок 5

Фінальний штрих наших iphone’ов – створення їх відображення. Давайте почнемо з вибору обох груп iPhone («iPhone» і «iPhone 2»), потім виберемо Шар/Layer > Створити дублікати шарів/Duplicate Layers… і натиснемо OK. Потім виберіть Шар/Layer > Об’єднати шари/Merge Layers.

Далі нам потрібно відобразити наші iphone’ов и. Виберіть Редагувати/Edit > Трансформування/Transform > Відобразити по вертикалі/Flip Vertical, потім розташуйте відбитий шар прямо під вихідними iphone’ов ами.

Додайте Маску шару/Layer Mask, натиснувши на іконку маски шару в палітрі шарів.

Візьміть інструмент Градієнт/Gradient (G) і виберіть групу кольорів від чорного до білого. Накресліть на відображених iphone’ов ах лінію зверху донизу приблизно 50px у висоту.

Нарешті, знизьте непрозорість шару до 30%.

Крок 6

Наступне дію – додавання основних властивостей додатка праворуч від наших телефонів. Перед початком давайте додамо ще одну напрямну, щоб все було вирівняне. Виберіть Вид/View > Нова направляюча/New Guide… виберіть вертикальну орієнтацію і розташування 550 px.

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

Під логотипом потрібно вставити параграф тексту з описом свого додатка. Виберіть інструмент » Горизонтальний текст/Horizontal Type (T) і накресліть прямокутник між центральною і правою напрямними. Виконайте наступні установки:

Font-Family: Helvetica Neue

Size: 16 px

Style: Regular

Leading: 26 px

Tracking: -25

Anti-aliasing: Crisp

Color: #FFFFFF

Крок 7

Далі ми в макеті нашого сайту з темним дизайном, створимо для відвідувачів кнопку покупки веб-додатки. За допомогою інструменту Прямокутник з округленими кутами/Rounded Rectangle (U), накресліть прямокутник 240x75px з радіусом 4px. Вирівняйте його так, щоб ліва сторона кнопки стосувалася центральною направляючою і розташовувався він на 45px нижче тексту.

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

Щоб додати іконку Apple’а, накресліть всередині кнопки маленьке текстове поле за допомогою інструменту Горизонтальний текст/Horizontal Type (T), потім скопіюйте та вставте цей символ:  в текстове поле і встановіть наступні характеристики:

Font-Family: Helvetica Neue

Size: 50 px

Style: Regular

Anti-aliasing: Crisp

Color: #000000

Нарешті, змініть непрозорість цього шару до 30%. Праворуч створіть інше текстове поле і додайте два рядки (напр.: «Завантажити з App Store»). Застосуйте наступні установки:

Font-Family: Helvetica Neue

Size: 11 px (first line) 24 px (second line)

Style: Bold

Leading: 26 px

Tracking: -25

Anti-aliasing: Crisp

Color: #FFFFFF

Додайте в текст стиль шару, як на зображенні нижче:

Далі ми збираємося внести в праву частину щойно доданого тексту роздільник. Виберіть інструмент Лінія/Line (U) і, притримуючи клавішу SHIFT, накресліть лінію в 1px від верху кнопки до її низу, потім змініть колір лінії на «FFFFFF» (білий).

Встановіть непрозорість цієї лінії на 15% і продублюйте її, вибравши Шар/Layer > Створити дублікат шару/Duplicate Layer… натисніть OK. Змініть колір продубльованою лінії на #000000 (чорний), а її непрозорість на 10%. Потім посуньте продубльовану лінію на 1px вліво.

Останній елемент, який ми додамо до цієї кнопки – іконка, що позначає завантаження. Почніть з інструменту Еліпс/Ellipse (U) і створіть коло діаметром 25px.

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

Нарешті, візьміть інструмент Довільна фігура/Custom Shape (U) і виберіть стрілку-вказівник (я використовую фігуру за умовчанням «Arrow 9»). Зробіть всередині кола маленьку стрілку шириною 10px і виберіть колір «FFFFFF» (білий).

Крок 8

Тепер створіть маленьке поле для показу вартості нашої програми. Візьміть інструмент Прямокутник з округленими кутами/Rounded Rectangle (U), встановіть радіус 4px і створіть прямокутник висотою 52px і будь-завширшки більш 100px, перекриває кнопку завантаження.

Змініть колір цього поля на «2B2B2B» і посуньте в панелі шарів під кнопку завантаження.

Далі призначте йому стиль шару Обведення/Stroke з наступними установками:

Тепер ми можемо додати інформацію про вартості. Для цього потрібно створити два окремих текстових поля, так як контент всередині них вимагає різних стилів. У перше поле додайте текст (я написав «ONLY») і застосуйте наступні установки:

Font-Family: Helvetica Neue

Size: 19 px

Style: Bold

Anti-aliasing: Crisp

Color: #FFFFFF

У друге поле введіть вартість (я написав «$1.99») і застосуйте наступні установки:

Крок 9

По мірі просування до низу сторінки потрібно створити який-небудь символ. Для нього ми застосуємо метод двох ліній, використаний нами раніше на кнопці завантаження, для додання роздільником виду «вкладки».
Візьміть інструмент Лінія/Line (U) і, притримуючи клавішу SHIFT, накресліть лінію в 1px від напрямною лівого до правого, потім визначте колір лінії «000000» (чорний).

Змініть непрозорість цієї лінії на 80% і продублюйте її, вибравши Шар/Layer > Створити дублікат шару/Duplicate Layer… і натисніть OK. Поміняйте колір продубльованою лінії на «FFFFFF» (білий) і непрозорість на 10%. Потім опустіть її вниз на 1px, щоб та опинилася під чорною лінією.

Крок 10

Під тільки що створеної лінією-роздільником ми збираємося додати дві колонки: для скріншотів і списку властивостей. Почніть зі скріншотів – імпортуйте перший, вибравши Файл/File > Помістити/Place. Візьміть скріншот з файлів і натисніть Помістити/Place. Змініть його розмір до 80% ширини і висоти, потім перемістіть скріншот до лівої направляючої і натисніть Enter.

В панелі виберіть шар і двічі натисніть кнопку Додати маску/Add-Mask, щоб додати Векторну маску/Vector Mask. Тепер виберіть інструмент Прямокутник з округленими кутами/Rounded Rectangle (U), призначте радіус 6px і створіть поверх скріншота прямокутник розміром 175x120px.

Наостанок ми додамо стиль шару Обведення/Stroke з наступними характеристиками:

Повторіть ці кроки для всіх своїх скріншотів і зробіть між ними проміжки в 35px.

Крок 11

Щоб відокремити скріншоти від властивостей програми, накресліть лінію в 1px від верху першого скріншота до низу останнього, що становить приблизно 55px від скріншотів. Встановіть колір лінії на «FFFFFF» (білий) і її непрозорість на 5%.

Крок 12

Давайте додамо заголовок, що описує властивості (я написав «Leaflet Features»). Розмістіть текст у 55px від лівої лінії-роздільника і застосуйте наступні установки:

Font-Family: Helvetica Neue

Size: 24 px

Style: Regular

Tracking: -10

Anti-aliasing: Crisp

Color: #FFFFFF

Тепер створимо список властивостей і розмістимо його під заголовком. Зробіть текстове поле, додайте п’ять-шість рядків з властивостями і дайте їм наступні налаштування:

Font-Family: Helvetica Neue

Size: 15 px

Style: Regular

Leading: 28 px

Tracking: -10

Anti-aliasing: Sharp

Color: #8d8c90

Повторіть вищенаведені кроки, щоб додати системні вимоги програми.

Крок 13

Щоб список властивостей виділявся, давайте створимо власні прості маркери. Почніть з переміщення текстового поля зі списком властивостей на 25px вправо.

Тепер виберіть інструмент Еліпс/Ellipse (U) і створіть коло діаметром 9px зліва від першого властивості. Встановіть колір кола на «bce086».

Назвіть колу наступний стиль шару:

Крок 14

Тепер нам потрібно продублювати свої марекеры і вирівняти їх щодо кожного властивості. Почніть з дублювання шару з окружністю: вибрати його, клацніть на Шар/Layer > Створити дублікат шару/Duplicate Layer…

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

Крок 15

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

Крок 16

Тепер можна додати в область нижнього колонтитула корисні посилання. Спочатку слід зробити чотири текстових поля, одне біля іншого, де будуть знаходитися наші посилання. Почніть зі створення поля розміром приблизно 160x40px. Внесіть в нього текст і так повторіть тричі. Ось приклад тексту, який можна використовувати:

Поле 1: Follow @mycompany on Twitter for news and updates.

Поле 2: For help & head support to our Support area.

Поле 3: Download our press and media kit.

Поле 4: Copyright 2010 My Company, LLC.

До властивостей застосуйте наступні налаштування:

Font-Family: Helvetica Neue

Size: 12 px

Style: Regular

Leading: 20 px

Anti-aliasing: Sharp

Color: #5555552

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

Крок 17

Щоб вирішити проблему вирівнювання, помістіть створені нами чотири текстових поля в папку і назвіть її «Footer». Спочатку розмістіть перше поле 55px від лівої направляючої, а останнє повинно стосуватися правої направляючої.

Тепер виберіть чотири шари з текстами в папці Footer та візьміть інструмент Переміщення/Move (V). Клацніть кнопку Вирівняти центри по вертикалі/Align vertical centers, потім натисніть кнопку Вирівняти центри по горизонталі/Distribute horizontal centers з панелі інструментів Переміщення/Move.

Крок 18

Тепер можна виділити посилання, додавши кілька користувальницьких іконок. Виберіть інструмент Еліпс/Ellipse (U) і створіть коло діаметром 36px поруч з першим текстовим полем. Змініть колір цієї окружності на «FFFFFF» (білий). Тепер виберіть Шар/Layer > Растеризувати/Rasterize > Шар/Layer.

Наступна дія – додати в цю окружність свою іконку. Для першої іконки я застосовую «t», що позначає Twitter, безкоштовно викачане звідси. Після завершення завантаження виберіть в photoshop’е Файл/File > Помістити/Place, щоб імпортувати іконку в документ. Після імпортування виставите розмір іконки на 28% її ширини і висоти, додайте поверх колу і натисніть enter.

Далі клацніть правою кнопкою миші на піктограму іконки Twitter’а в панелі шарів і натисніть Вибрати пікселі/Select Pixels. Тепер візьміть в панелі шар колу, потім Редагувати/Edit > Очистити/Clear. Видаліть імпортовану іконку Twitter’а, вибравши її в панелі шарів, і клацніть або перетягніть іконку Trash. Нарешті, зменшите непрозорість шару з окружністю до 15%.

Крок 19

Для інших вищенаведених іконок повторіть Крок 18, взявши інші іконки або користувальницькі фігури photoshop’у.

Крок 20

Як фінальний штрих до посилань нижнього колонтитула, для більшої помітності давайте призначимо їм яскравий колір. За допомогою інструменту Горизонтальний текст/Horizontal Text (T) перейдіть в кожному полі частину тексту й змінити його колір на «83b546».

Висновок!

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