Модульная сетка для фотошопа : для чего нужна и как ею пользоваться


Всем привет! В этой статье речь пойдет о веб дизайне, а именно модульная сетка для фотошопаМы узнаем что это такое, посмотрим на нее и поймем для чего же она предназначена и нужна ли вообще, как с помощью нее делать сайты?

Модульная сетка для фотошопа, как сделать модульную сетку в фотошопе

При создании макетов сайтов важно учитывать точное размещение его частей относительно друг друга. Для этого очень удобно использовать такие вспомогательные программы как фотошоп. Так что я не много затрону вопрос о том как сделать модульную сетку в фотошопе самому.

Модульная сетка для фотошопа

Модульные сетки в веб дизайне, что это?

Модуль — это шаг в сетке. То есть определенное расстояние от одного блока к другому. Благодаря этой сетке веб дизайнер может видеть всю картину будущего сайта. Так же она помогает им чтобы элементы сайта не выходили за рамки экрана.То есть из вышесказанного можно сделать вывод, что модульная сетка в веб дизайне — это рамка сайта с помощью которой веб дизайнер может располагать элементы оформления в границах экрана.

что такое модульная сетка

 

Читайте так же статью: С чего начать в веб-дизайне

Зачем нужны модульные сетки в веб дизайне?

для чего нужны модульные сетки

Если у вас возник довольно логичный вопрос — зачем нужны модульные сетки, то я отвечу что основное ее предназначение — это правильное расположение элементов для упрощения дальнейшей работы верстальщика. Если бы веб дизайнер располагал все так как ему нравится, то сверстать такой макет будет крайне сложно, а некоторые элементы и вовсе не получится. Для упрощения работы верстальщика и используется модульная сетка. Все элементы в ней должны начинаться в большом столбце. Размещение начала элемента в малом столбце недопустимо. Думаю с вопросом — зачем нужны модульные сетки, мы разобрались и можем двигаться дальше.

Какого размера бывают модульные сетки в веб дизайне?

Самый распространенный размер под ПК — это 970px пикселя.

Для широкоформатных экранов — 1170 пикселя.

Под планшеты — 750 пикселя.

Под мобильные телефоны и смартфоны — 480 и 320 пикселя.

Примеры модульных сеток, создание модульной сетки

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

блочная сетка

Вторым типом становится сетка которая разделяется на колонки.

сетка делящиеся на колонки

Модульная же сетка имеет и вертикальное, и горизонтальное деления. Таким образом получается,то, что лежит на пересечениях прямых, и есть модуль.

сетка из вертикальных и горизонтальных делений

И последний тип в создание модульной сетки — иерархическая, блоки которой могут быть разных размеров, размещаются хаотично и не поддаются никакой логике.

Иерархическая сетка

 

Адаптивная верстка

Выше мы перечислили самые распространенные размере модульных сеток. Для чего они все нужны? Для корректного отображения на каждом экране будь-то ноутбук или смартфон, что повышает юзабилити сайта. Сейчас большинство сайтов используют именно адаптивную верстку для своего сайта ибо это удобно и практично.

Адаптивная верстка

Это была основная информация по вопросу: для чего модульная сетка в веб дизайне. Надеюсь статья была вам полезна. 

Топ 5 курсов обучения веб-дизайну

Пишите в комментариях ваше мнение) 


Читайте также: