Що таке модульна сітка. Як зробити модульну сітку?

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

Як застосовується сітка

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

Види модульних сіток

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

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

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

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

Лінійка в редакторі «Фотошоп»

Сайти створюються з використанням растрових або векторних графічних редакторів. Сітку в них створювати дуже зручно. Розглянемо, як це робиться в популярному редакторі Photoshop. Створюється модульна сітка в «Фотошопі» дуже просто.

Для того щоб по периметру робочого вікна зображення з`явилися лінійки, слід пройти в пункт головного меню «Перегляд» (View) і натиснути на рядок «Лінійки» (Rulers). У цьому редакторі можна використовувати самі різні елементи - з розподілами в сантиметрах, міліметрах, дюймах або пікселях. Для того щоб виконати необхідну настройку, слід пройти в пункт головного меню «Редагування» (Edit). Далі вибрати рядок «Параметри» (Preferences) - «Одиниці ізмереніяЛінейкі» (UnitsRulers). Після цього висвітиться віконце, в якому і можна змінити вид лінійки. У верхньому випадаючому меню вибирають сантиметри, міліметри, пікселі і т. Д.

Проте зазвичай при роботі в редакторі «Фотошоп» використовують трохи інший, більш простий спосіб. Для зміни одиниць вимірювання слід просто натиснути на саму лінійку у вікні зображення правою кнопкою миші. Після цього в меню можна буде зробити потрібну дію. Зазвичай при створенні сайту використовується сітка в пікселях.

Сітка Photoshop

Сама модульна сітка програми «Фотошоп» стане видимою після того, як ви перейдете по пункту головного меню «Перегляд» - «Показати» (Show) - «Сітка» (Grid). Крок між лініями сітки можна налаштовувати. Для цього слід виконати команду «Редагування» - «Параметри» - «Напрямні, сітки і фрагменти» (Guides, Grid, Slices). Тут можна змінити не тільки крок між лініями, але і їх колір. Використовуючи цю сітку, швидко і точно розміщувати по робочому полю всі об`єкти майбутнього сайту буде абсолютно нескладно.

Робота з курсором

Модульна сітка сайту створюється таким чином дуже просто. Курсор при роботі прилипає до ліній. Це може бути зручним в тому випадку, якщо необхідно зробити блоки точних, певних розмірів. Якщо ж ця функція з яких-небудь причин виявиться непотрібною, її можна відключити. За замовчуванням початок координат сітки в «Фотошопі» розташовується у верхньому лівому кутку вікна. При бажанні його можна перемістити в будь-яке інше місце полотна. Для цього наводять курсор на квадратик початку координат і просто перетягують його, утримуючи кнопку миші. Для повернення точки відліку на місце слід двічі клікнути на тому ж квадратику в кутку.

Крім усього іншого, є різного роду плагіни для редактора «Фотошоп», що дозволяють зробити створення сайту з використанням модульної сітки ще більш зручним. Скачують їх в мережі. З використанням цих плагінів можна створювати сітки із заданими параметрами.

Сітка в CorelDraw

Тепер подивимося, як зробити модульну сітку у векторному редакторі CorelDraw. Тут вона створюється приблизно так само, як і в «Фотошопі». Іконка її розташована на верхній панелі (око в сітці). Після натискання на неї можна буде виконати всі необхідні настройки. Допускається вибір відстані між лініями, зміна одиниці виміру і т. Д. Розмежовують робоче поле у вікні зображення в CorelDraw і за допомогою напрямних. Їх при необхідності можна зробити видимими або невидимими.

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