Як зробити модульні сітки

Як зробити модульні сітки

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

Вам знадобиться

- Програма Abode Photoshop.

Інструкція

  1. Всі сучасні графічні редактори, а також програми розробки веб-дизайну мають вбудовані модульні сітки. Якщо ви працюєте в програмі Adobe Photoshop, для зручності компонування об’єктів зображення і точного їх розміщення на аркуші увімкніть відображення сітки. Для цього зайдіть в пункт меню Edit і майна, перейдіть на напис Preference. У відобразиться меню виберіть пункт Guides, Grid & Slices (залежно від версії програми даний пункт може називатися по-різному, вибирайте по слову Grid).
  2. У вікні налаштування задайте параметри модульної сітки. В області Grid виберіть колір ліній, що утворюють елементи сітки і крок ліній. Натисніть «Ок», щоб перевірити, як прийняті зміни вплинуть на вигляд зображення. У середовищі розробки веб-проектів Adobe DreamWeaver модульні сітка включена за умовчанням в макет розробляється сторінки.
  3. Ви можете додавати різні таблиці (елементи сітки) з будь-яким набором рядків і стовпців за допомогою пункту Insert Table, а також вставляти нові таблиці в осередку, створюючи тим самим складну мережу для побудови елементів сторінки.
  4. Ви можете створити модульну сітку вручну, використовуючи стилі CSS. Для цього скористайтеся інструментами # grid, Gridmaker, CSS Grid Builder, 1 KB CSS Grid, Gridr Buildrrr та іншими модулями. Наприклад, наступний фрагмент коду створює сітку з чотирьох модулів заданої ширини:

    . Page-layout {margin-right:-5px;}

    . Layout-box {float: left; margin: 0 5px 5px 0;}

    . Lb-1 {width: 779px;} / * 100% * /

    . Lb-2 {width: 583px;} / * 75% * /

    . Lb-3 {width: 387px;} / * 50% * /

    . Lb-4 {width: 191px;} / * 25% * /
  5. Наявність модульної сітки полегшує роботу як починаючим дизайнерам і веб-розробникам, так і досвідченим майстрам в цій галузі. Створені на основі модульної сітки проекти легко редагувати і переносити, що вельми зручно при великих обсягах роботи. Ви також зможете в будь-який час зупинити роботу і продовжити за допомогою збереженого файлу.