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

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

Як використовується модульна сітка

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

Відео: Модульна сітка для дизайну сайту. урок 2

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

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

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

Лінійка в Photoshop

Для створення інтернет-сайтів можуть використовуватися векторні і растрові графічні редактори. У них дуже зручно створювати модульну сітку. Подивимося, як виконується ця операція в такому популярному графічному редакторі, як Photoshop. Створити модульну сітку в Photoshop дуже просто. Щоб по периметру робочого вікна з`явилися лінійки, необхідно зайти в пункт головного меню "View" ("Перегляд") І натиснути на "Rulers" ("лінійки"). В даному редакторі можна використовувати різні елементи з поділами в міліметрах, сантиметрах, пікселях і дюймах. Щоб виконати необхідні настройки, потрібно зайти в пункт головного меню "Edit" ("редагування").

Після цього необхідно вибрати рядок "Preferences" ("установки"), А в ній "Units&Rulers" ("Одиниці виміру & лінійки"). В результаті висвітиться вікно, в якому можна буде змінити зовнішній вигляд лінійки. У випадаючому меню зверху можна вибрати одиниці виміру. Зазвичай при роботі в графічному редакторі Photoshop використовують інший спосіб. Щоб вибрати одиниці виміру, досить просто натиснути правою кнопкою миші на саму лінійку у вікні зображення В результаті модно буде виконати потрібну дію в меню. При створенні інтернет-сайтів зазвичай використовуються сітки в пікселях.

Сітка Photoshop

Модульна сітка програми Photoshop стане видимою тільки після того, як ви використовуєте пункт головного меню "Show" ("Показати") - "Grid" ("Сітка"). Можна налаштовувати крок між лініями сітки. Для цього досить виконати команду "Edit" - "Preferences" - "Guides, Grid, Slices" ("Напрямні, сітки, фрагменти"). Тут можна поміняти не тільки відстань між лініями, але і змінити їх колір. Застосовуючи цю сітку можна просто розбити всі об`єкти майбутнього інтернет-сайту по робочому полю.

Працюємо з курсором

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

Відео: Модульна сітка в веб-дизайні

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

Створення модульної сітки в Corel Draw

Поговоримо про створення модульної сітки в вектором редакторі Corel Draw. Створюється вона приблизно таким же чином, що і в Photoshop. Її іконка розташована на верхній панелі. Якщо натиснути на неї, то можна буде виконати всі необхідні настройки. Можна міняти відстань між лініями, вибирати одиниці вимірювання і т.п. Щоб у вікні зображення в програмі Corel Draw розмежувати робоче поле, використовуються направляючі. При необхідності їх можна зробити видимими або невидимими.

Відео: Як працювати з модульною сіткою