Створення макету сайту в мінімалістичному західному стилі

34

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

План уроку

1. Створення документа, основні напрямні.

2. Робота з першою сторінкою. Шапка, меню, фон, основні кольори, розміщення елементів.

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

4. Робота з третьою сторінкою. Направляючі, наповнення сторінки.

5. Робота з четвертою сторінкою і футером. Направляючі, поля введення, робота з текстом, копірайти.

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

Програма: Adobe Photoshop

Версія: CS 4

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

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

автор

Автор: Макс Дивиани

Захоплююся плівковою фотографією, живописом. Живу в місті Луганськ, Україна. Працюю 4 роки веб-дизайнером і радий ділитися своїм досвідом. Завжди Ваш, Макс Дивиани.

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

Ось макет сайту, який ми хочемо зробити:

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

1. Порядок і чистота в шапці сайті. Окремо логотип, окремо меню:

http://myrainbownursery.co.uk/

http://www.getballpark.com/

2. Мінімальне використання кольорів і градієнтів:

http://www.hathaciudad.it/

3. Максималізм у заголовках і текстах:

http://fixx.sg/

4. Силуэтность в ілюстраціях:

http://piccsy.com/investors/

http://www.hathaciudad.it/

5. Сторінки ми розташуємо вертикально, одна за одною.

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

Приклади використання:

http://www.getballpark.com/
http://piccsy.com/investors/

Частина 1. Створення документа. Робота з першою сторінкою

Ось макет-начерк нашої першої сторінки(салатовим показана шапка з логотипом і меню, блакитним – зображення, а рожевим – текстові блоки)

Крок 1. Створення документа, розбивка напрямними. Початок роботи з першою сторінкою. Фон

Створюємо полотно розміром 1000х3150(З урахуванням чотирьох сторінок висотою по 700, і футера висотою 350)

Відразу ж проставляємо напрямні, що відокремлюють сторінки один від одного: 700, 1400, 2100 2800 по горизонталі(Перегляд — Нова направляюча..)

Раджу встановити червоний колір напрямних, щоб вони не зливалися з нашим майбутнім фоном.(Редагування – Установки — Напрямні, сітка і фрагменти)

Далі, створюємо новий шар. Виділяємо область першої сторінки (до першої направляючої) за допомогою інструменту ‘Прямокутна область’

Нам потрібно залити цю область потрібним кольором. Для цього, міняємо колір переднього плану

на #00e5c8

І використовуємо інструмент ‘Заливка’

Крім цього, виставимо центральну вертикальну напрямну, вона нам теж пригодиться:

Крок 2. Робота з шапкою

Наша шапка буде заввишки 70 пікселів, відразу створимо направляючу для наших цілей:

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

Далі, встановлюємо білий колір переднього плану і використовуємо інструмент ‘Заливка'(на новому шарі!).

Додамо тінь під шапку. Копіюємо шар, на якому ми зробили заливку шапки білим, і маємо його під шаром-оригіналом

(назвати шар можна через пункт «Параметри шару’ в меню шару).

Знімаємо виділення (Виділення – Скасувати виділення (Ctrl+D)). Викликаємо діалог роботи з тоном і насиченістю (Зображення – Корекція – Колірний тон/Насиченість (Ctrl+U)). Значення яскравості встановлюємо на -100

Це забарвило шар в чорний колір, для природності тіні. Працюємо далі з дублікатом шару. Застосовуємо розмиття по Гаусу (Фільтр – Розумієте – Розумієте по Гаусу) з радіусом в 24 пікселя.

Тінь готова:

До шапці ми ще повернемося для вставки логотипу і меню

Крок 3. Центральна частина

Розставимо направлящие для іконок і тексту. Іконки(розміром 170х170) горизонтально розташовуються в центрі лівої половини, вертикально – з відступом в 60 пікселів від меню і 100 пікселів один від одного. Текст – в правій половині, від центру всієї сторінки.

Маємо іконки(знаходяться в матеріалах для уроку, /images/1balloon.png і 2cake.png) у відсіках, утворених направляючими(Файл – Помістити..):

Створюємо текст для кожної іконки з допомогою інструменту ‘Горизонтальний текст’ (попередньо встановивши колір переднього плану – Білий)

Включаємо діалог ‘Символ і абзац’ на панелі налаштування текстового інструменту

Встановлюємо параметри для тексту: MS Sans Serif, 34 пт, трекінг AV 120:

Крім цього, на вкладці ‘Абзац’ прибираємо галочку ‘Переноси’

Те ж саме робимо і з текстовим шаром для другої іконки:

Щоб виділити текст, можна застосувати стилі до текстових шарів. Для цього, в меню шару вибираємо пункт «Параметри накладання’, відкриється вікно ‘Стиль шару’. У списку стилів вибираємо ‘Тінь’ і застосовуємо її з такими параметрами, як на скріншоті:

Підсумок:

Крок 4. Повертаємося до шапці. Розміщення логотипу і меню

Наш логотип має розмір 30х30(його ви можете знайти в матеріалах для уроку /images/ 3logo-balloon.png). Розставимо для нього напрямні:

І помістимо сам логотип:

Додамо текстовий шар з назвою компанії(Arial 12, колір #777777, трекінг AV 120):

Далі, створюємо ще один шар, для меню, від центральною направляючою (Arial 12, чорний, трекінг AV 120):

Створимо індикатор активного пункту меню. Створюємо новий шар. За допомогою інструменту ‘Прямокутна область’ виділяємо тонку смужку, над напрямної під меню:

Встановлюємо колір переднього плану #c9c9c9 і з допомогою інструмента ‘Заливка’ фарбуємо виділення:

Поверх цієї смужки созадем нове виділення, шириною трохи більше третини слова ‘Головна’:

Встановлюємо колір переднього плану #02a792 і заливаємо виділення. Меню готово:

Крок 5. Закінчення роботи з першою сторінкою. Додавання скролла

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

Підкажемо користувачеві, що потрібно робити, для цього додамо знизу сторінки стрілочку(матеріали до уроку, /images/4-arrow.png).

Спочатку, напрямні стрілки:

Тепер, поміщаємо картинку на полотно(Файл – Помістити..):

Робота з першою сторінкою закінчена!

Частина 2. Робота з другою сторінкою

На другій сторінці буде розташовуватися коротка інформація про проведені компанією заходах – зображення й опис.

На зображенні внизу показано приблизне розташування блоків. Зроблено грубо, але допоможе нам не загубитися серед направляючих. Блакитним показано зображення(280х100 пікселів), рожевим – текстові блоки

Крок 1. Напрямні

Розставляємо напрямні(Перегляд – Нова направляюча..):

Горизонталь:

770– верхня межа блоків

870 – нижня межа зображень 1 ряду

895 – верхня межа текстових шарів 1 ряду

995– нижня межа 1 ряду

1045 – верхня межа 2 ряду

1145 – нижня межа зображень 2 ряду

1170 – верхня межа текстових шарів 2 ряду

1270 – нижня межа блоків

Вертикаль:

40 – початок першого стовпця (вже проставлена в минулій частині уроку)

320 – кінець першого стовпця

360 – початок другого стовпця

640 – кінець другого стовпця

680 – початок третього стовпця

960 – кінець третього стовпця

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

Тепер, маючи напрямні, нам не варто особливих зусиль розмістити всі елементи.

Крок 2. Розміщення елементів

Спочатку розміщуємо зображення(знаходяться в матеріалах до уроку, /images/article-birth.png, article-corporate.png, article-kids.png, article-mcfly-special.png, article-prom.png, article-wedding.png) за допомогою меню ‘Файл-Помістити..’

Під зображеннями, розміщуємо текстові блоки(інструмент ‘Горизонтальний текст’) з такими параметрами: шрифт MS Sans Serif, розмір 13, трекінг AV 120.

Виділяємо жирним потрібні нам слова (назви заходів):

Виглядає рівно, симпатично. Залишається завершити роботу над другою сторінкою, знову розмістивши стрілочку-підказку (матеріали до уроку, /images/cyan-arrow.png)

Вертикальні напрямні для неї вже є, розмістимо горизонтальні: 1334 і 1374

Тепер, ставимо стрілочку на сторінку:

Робота над другою сторінкою завершена:

Частина 3. Робота з третьою сторінкою

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

Крок 1. Напрямні

Розставимо напрямні:

Горизонталь:

1470 – верх блоків

1590 – низ першого рядка

1660 – верх другого рядка

1780 – низ другий рядка

1850 – верх третього рядка

1970 – низ блоків

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

Крок 2. Фон

Заливаємо фон кольором #00e5c8. Для цього створюємо новий шар. За допомогою інструменту ‘Прямокутна область’ створюємо виділення для сторінки:

Далі, встановлюємо колір переднього плану #00e5c8

І з допомогою інструмента ‘Заливка’ фарбуємо сторінку

Крок 3. Заповнення сторінки текстом

Створюємо текстові шари для цих областей:

Налаштування тексту: шрифт MS Sans Serif, розмір 120, колір білий(також, рекомендую «погратися» з налаштуванням ‘Задайте метод згладжування’ в правому нижньому кутку панелі налаштувань тексту). На вкладці ‘Абзац’ виставляємо параметр ‘Вирівнювання тексту вправо’

Далі, створюємо текстові шари для цих областей, регулюючи розмір шару так, щоб текст ‘притискався’ до нижньої частини області:

Налаштування тексту: шрифт MS Sans Serif, розмір 40, колір білий. На вкладці ‘Абзац’ – вирівнювання тексту ліворуч

Додаємо все той же ефект тіні, що додавали у першій частині уроку(для текстових шарів у правій частині сторінки). Викликаємо вікно ‘Стиль шару’, натиснувши ‘Параметри накладання’ в меню шару.

На вкладці ‘Тінь’ вводимо такі параметри, як на скріншоті:

Робимо це для всіх трьох шарів у правій частині сторінки

Крок 4. Стрілочка скролла

За традицією, додаємо підказку-стрілку на сторінку. Вертикальні напрямні для цього є, вводимо горизонтальні: 2034, 2074

Стрілочку беремо в матеріалах до уроку, /images/4-arrow.png, і поміщаємо її в область, утворену направляючими:

Частина 4. Робота над четвертою сторінкою і футером

На четвертій сторінці у нас буде розташовуватися форма замовлення. Людина залишає заяву, щоб надалі менеджер зміг з ним зв’язатися і обговорити деталі.

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

Приблизний макет майбутньої сторінки (блакитним – зображення, рожевим – текст і форма замовлення, салатовим – кнопка відправки):

Приблизний макет футера(рожевим – текст для пошукових систем, блакитним – логотип творців сайту):

Крок 1. Підготовка

За допомогою інструменту ‘Заливка’ окрасим футер в колір #00e5c8(від нижньої направляючої до кінця полотна), попередньо створивши новий шар. Це допоможе нам візуально розрізняти четверту сторінку:

Далі, створимо новий шар для фарбування четвертої сторінки в білий колір. «Нелогічно», — скажете Ви. Але потрібно це для того, щоб зробити тінь.

Після того, як сторінки пофарбована, созадем дублікат цього шару (розташовуємо в списку під оригіналом і над футером), і застосовуємо до нього ‘Зображення – Корекція – Колірний тон / Насиченість’ з параметром Яскравості -100:

Після цього, застосовуємо до дублікату ‘Фільтр — Розумієте – Розумієте по Гаусу’ з радіусом в 24 пкс.:

Як бачимо, тінь утворилася і зверху шару. Обводимо простим виділенням і видаляємо кнопкою Del:

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

Крок 2. Напрямні

Горизонталь:

2240 – верхівка заголовка

2380 – початок текстових полів ім’я, телефон, тощо)

2403 – кінець першого поля для вводу тексту

2420 – початок другого поля введення

2443 – кінець другого поля введення

2460 – початок третього поля введення

2483 – кінець третього поля введення

2500 – початок четвертого поля введення

2523 – кінець четвертого поля введення

2610 – верхня межа кнопки

2670 – низ кнопки

Крок 3. Розміщення елементів і тексту

Поміщаємо(Файл – Помістити..) зображення з матеріалів до уроку(/images/balloon-big.png) в цю область:

Далі поміщаємо заголовок(«Оформлення замовлення») в дану область:

Налаштування тексту: шрифт MS Sans Serif, розмір 40, трекінг AV 120, колір #00e5c8, вирівнювання по лівому краю:

Тепер, заллємо поля вводу. Спочатку використовуємо інструмент ‘Прямокутна область’, щоб виділити потрібні нам дільниці(для багаторазового виділення, слід поставити клавішу Shift):

Створюємо новий шар. За допомогою інструменту ‘Заливка’ фарбуємо області, попередньо встановивши колір переднього плану #f1f1f1:

На наступному етапі, розміщуємо текстовий шар в області:

Налаштування тексту: шрифт MS Sans Serif, розмір 17, колір #777777, інтерліньяж — 40 пт, вирівнювання по правому краю:

Залишилося розмістити кнопку відправки заяви. Працюємо з цією зоною:

Спочатку, заливаємо її на новому шарі кольором #00e5c8(інструменти ‘Прямокутна область’ і ‘Заливка’):

Далі, створюємо текстовий шар з наступними параметрами: шрифт MS Sans Serif, розмір 40, колір білий, вирівнювання по центру

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

Крок 4. Робота з футером

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

Параметри тексту: шрифт MS Sans Serif, розмір 12, колір білий, інтерліньяж – Авто, вирівнювання по лівому краю:

Горизонтальна напрямна: 2980. Під нею ми розмістимо логотип творців сайту. Зображення є в матеріалах до уроку(/images/copyright.png), або візьміть свій логотип

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

Свої коментарі та запитання по уроку ви завжди можете залишити у формі внизу або на нашому форумі.