Модульная сетка представляет собой особый шаблон, на основе которого строится весь дизайн сайта. Она по сути представляет собой систему отображения визуальной информации в виде отдельных блоков, которые также называются модулями. Сайт, который был разработан с использование такого шаблона, удобнее воспринимается. К тому же, система навигации получается более продвинутой.
Как используется модульная сетка
Обычно модульная сетка применяется при разработке дизайна визиток, книг, товарных знаков, логотипов и тому подобных вещей. Модульная сетка обязательно должна использоваться и при разработке интернет-сайтов. Благодаря удачно сделанной сетке можно гармонично скомпоновать среду для всех элементов интернет-ресурса, начиная от графических заканчивая текстовыми. С использованием модульной сетки значительно проще разместить на сайте различные элементы, сделать между ними границы. Расположим определенным образом различные элементы, можно сделать тот или иной из них более заметным и при этом связать в одно целое информацию о сайте.
Типы модульных сеток
Модульная сетка, которая чаще всего используется в дизайне страниц в интернете – это три основные колонки ячейки. Верхний и нижний колонтитулы при этом имеют ширину, которая равна их размерам. Такой вариант обычно при создании сайтов используют любители. В некоторых случаях ширина одной ячейки может быть увеличена за счет другой. Второй вариант модульных сеток – нестандартный. Он под силу только тем пользователям, которые профессионально занимаются веб-дизайном. Точно в этом случае определяется только расстояние между отдельными элементами и ширина колонок. В дизайне интернет-журналов и разного рода новостных ресурсов модульная сетка обычно разрабатывается следующим способом. Сперва создается колонтитул.
В нем может располагаться название ресурса, навигационное меню и различные видеоматериалы. Как правило, страница разбивается на три колонки. Две при этом имеют одинаковый размер. Третья колонка разделена на две части при помощи вертикальной линии. В результате получается четыре раздела: фотогалерея, новостной раздел, место для рекламы и последние информационные изменения. Для интернет-магазинов различной специализации модульная сетка создается несколько иначе. Здесь важно обеспечить посетителям удобство навигации. Все элементы при этом группируются единообразно и стандартно. Для каждого объекта необходимо выбрать самую важную информацию, которая будет характеризовать данный объект.
Линейка в 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 разграничить рабочее поле, используются направляющие. При необходимости их можно сделать видимыми или невидимыми.