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

Модульная сетка в веб-дизайне: скачивайте и используйте правильно

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

Я расскажу как профессионалы создают красивые сайты, какое значение имеет модульная сетка в веб-дизайне и как простые действия позволяют забыть о технике и целиком отдаться творческому процессу.

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

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

Какой формат получения информации выбрать – решать вам.

Что такое модульная сетка и зачем она нужна

Итак, модульная сетка – это некий шаблон, каркас, благодаря которому можно легко, просто и главное ровно выстроить все объекты на сайте. Она позволяет понять какого размера использовать шрифты, как вставить блок в интерфейс и где его лучше расположить.

«Сперва думаем – потом делаем». Этим и отличается работа профессионала от новичка. Специалисты не размышляют категориям: «нравится-не нравится». У них все четко.

Вспомните тетрадь в клетку. Линии помогают писать ровнее, а модульная сетка организовать рисунок в фотошопе.

Если вы уже когда-либо рисовали сайт, то знаете как сложно отмерить расстояние от бокового меню до основного контента или между двумя публикациями и поставить объекты ровно. Скорее всего вы использовали для этой цели направляющие. Это неудобно и долго. Ну а если вы просто использовали руки и линейку, то вы просто герой, потому что проделали адски сложную работу.

Сетка упрощает эту работу. Она может состоять только из вертикальных блоков или делиться на квадраты.

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

И тем не менее профессионал всегда будет действовать согласно намеченному плану и пользоваться этим каркасом от первой и до последней страницы. Ведь шаблон не только упрощает работу, но и создает впечатление целостности проекта, единой композиции для всего сайта.

Как создать сетку

Если вы читали мою статью «10 навыков профессионального дизайнера», то помните, что один из основополагающих факторов успеха заключался в умении понять смысл ресурса и исходя из этого грамотно расставить приоритеты и все элементы по странице.

Если этого не происходит уже сейчас, то со временем, сразу после получения заказа у вас в голове будет рождаться план-схема: страницы, блоки, важные элементы. Они как пазл будут появляться перед вашими глазами. Его останется только собрать.

Первым делом нужно будет отсортировать из этой кучи что и где должно располагаться. Какие элементы более важны для создания первого впечатления у читателя, а что останется «на сладкое».

Далее создается эскиз вашего проекта на листе бумаги. Он нужен, чтобы понять параметры модульной сетки. Вы должны понимать, что в дизайне нет и не может быть единого стандарта. Никто не скажет вам: «Вот так должен выглядеть модуль, вот его параметры, пользуйся исключительно этими цифрами».

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

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

Самое простое – это базовая линия (Baseline), она определяется исходя из размера шрифта, увеличенного в полтора раза. Если кегль 14, то высота будет 21.

Далее идет ширина модуля (Module width) 60. Если у вас есть какой-то повторяющийся элемент, то его параметры могут лечь в основу при определении этого показателя. Количество столбцов (Num of modules) можете поставить 13. Это значение определяет ширину всего проекта (Layout width), который выставляется автоматически. В моем случае 1020

Горизонтальное членение (Module height), то есть сколько строк будет в одном квадрате. Зависит от какого-то самого мелкого элемента, к примеру, логотипа. Он будет основным показателем, а все остальные станут кратны ему. То есть больше или меньше в определенное число раз. Можете поставить значение 3.

Для определения расстояния между блоками (Gutter), как правило, используется то же значение, что и для базовой линии, либо стандартное значение 20.

Таблица потеряет свою актуальность, если модуль будет слишком большой или маленький. В этом случае вам будет неудобно работать. Вы потеряете сетку или не сможете уменьшить блок.

Полезные видео

Рекомендую вам посмотреть обучающее видео, которое поможет разобраться в модульной сетке, установить плагин в фотошоп и работать через сервис modulargrid.org. В этом ролике вам также предложат портал для создания модульной сетки, помогающий работать с версткой.

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

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

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

Ну вот, наверное, и все. Напоследок мне бы хотелось посоветовать вам еще одну полезную вещь, это курс «Тех.дизайн», в котором собраны все полезные советы, которые помогут перейти к от понятий «нравится-не нравится» к созданию продуманных проектов, основанных на знаниях.

Подписывайтесь на рассылку, чтобы знать больше. До новых встреч и удачи в ваших начинаниях.

Что такое модульная сетка. Как сделать модульную сетку?

Модульная сетка – это особый шаблон, по которому и строится дизайн сайта. По сути, это система представления визуальной информации посетителю на основе отдельных блоков, называемых модулями. Сайт, разработанный с использованием такого шаблона, гораздо удобнее для восприятия и навигации.

Как применяется сетка

Модульная сетка используется при разработке дизайнов книг, визиток, товарных знаков, логотипов и т. д. Обязательно ее применение и при создании сайтов. Правильно сделанная сетка гармонично компонует среду для всех элементов ресурса – графических и текстовых. С ее использованием гораздо проще разместить их все на странице и создать между ними четкие границы. Расположив определенным образом элементы, можно сделать каждый из них заметным и при этом связать воедино всю информацию о самом сайте.

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

Самая распространенная модульная сетка в дизайне страниц – это три базовые колонки ячейки. При этом верхний и нижний колонтитулы имеют ширину, равную их размерам. Этот стандартный вариант обычно используют любители при создании сайтов. Иногда при этом ширина одной ячейки увеличивается за счет ширины другой.

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

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

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

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

Для того чтобы по периметру рабочего окна изображения появились линейки, следует пройти в пункт главного меню «Просмотр» (View) и нажать на строку «Линейки» (Rulers). В этом редакторе можно использовать самые разные элементы – с делениями в сантиметрах, миллиметрах, дюймах или пикселях. Для того чтобы выполнить необходимую настройку, следует пройти в пункт главного меню «Редактирование» (Edit). Далее выбрать строку «Установки» (Preferences) – «Единицы измерения&Линейки» (Units&Rulers). После этого высветится окошко, в котором и можно изменить вид линейки. В верхнем выпадающем меню выбирают сантиметры, миллиметры, пиксели и т. д.

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

Сетка Photoshop

Сама модульная сетка программы «Фотошоп» станет видимой после того, как вы перейдете по пункту главного меню «Просмотр» - «Показать» (Show) - «Сетка» (Grid). Шаг между линиями сетки можно настраивать. Для этого следует выполнить команду «Редактирование» - «Установки» - «Направляющие, сетки и фрагменты» (Guides, Grid, Slices). Здесь можно изменить не только шаг между линиями, но и их цвет. Используя эту сетку, быстро и точно размещать по рабочему полю все объекты будущего сайта будет совершенно несложно.

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

Модульная сетка сайта создается таким образом очень просто. Курсор при работе прилипает к линиям. Это может быть удобным в том случае, если необходимо сделать блоки точных, определенных размеров. Если же эта функция по каким-либо причинам окажется ненужной, ее можно отключить. По умолчанию начало координат сетки в «Фотошопе» располагается в верхнем левом углу окна. При желании его можно переместить в любое другое место холста. Для этого наводят курсор на квадратик начала координат и просто перетаскивают его, удерживая кнопку мыши. Для возврата точки отсчета на место следует дважды кликнуть на том же квадратике в углу.

Помимо всего прочего, имеются разного рода плагины для редактора «Фотошоп», позволяющие сделать создание сайта с использованием модульной сетки еще более удобным. Скачивают их в сети. С использованием этих плагинов можно создавать сетки с заданными параметрами.

Сетка в CorelDraw

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

Модульная сетка в дизайне сайта – основополагающий элемент, к разработке которого стоит подходить с максимальной ответственностью. Ведь от того, насколько правильно будет структурирован ресурс, зависит удобство его посетителей, а значит и время, проведенное ими на его страницах.

❶ Как сделать модульные сетки

Вам понадобится

• - программа Abode Photoshop.

Инструкция

Все современные графические редакторы, а также программы разработки веб-дизайна имеют встроенные модульные сетки. Если вы работаете в программе Adobe Photoshop, для удобства компоновки объектов изображения и точного их размещения на листе включите отображение сетки. Для этого зайдите в пункт меню Edit и наведите мышь на надпись Preference. В отобразившемся меню выберите пункт Guides, Grid & Slices (в зависимости от версии программы данный пункт может называться по-разному, выбирайте по слову Grid).

В открывшемся окне настройки задайте параметры модульной сетки. В области Grid выберите цвет линий, образующие элементы сетки и шаг линий. Нажмите «Ок», и проверьте, как принятые изменения повлияют на вид изображения. В среде разработки веб-проектов Adobe DreamWeaver модульная сетка включена по умолчанию в макет разрабатываемой страницы.

Вы можете добавлять различные таблицы (элементы сетки) с любым набором строк и столбцов с помощью пункта Insert Table, а также вставлять новые таблицы в ячейки, создавая тем самым сложную сеть для построения элементов страницы.

Вы можете создать модульную сетку вручную, используя стили 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% */

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

Видео по теме

#4 — Модульная сетка в Photoshop

Здравствуйте, дорогие дизайнеры! Тема сегодняшнего видеоурока — Модульная сетка. Давайте зададим себе следующий вопрос: а зачем нам нужна модульная сетка в работе?

Модульная сетка и ее преимущества

К преимуществам модульных сеток относятся следующие факторы.

1) Ускорение работы: это более удобный способ выравнивать объекты относительно друг друга. Мы не тратим лишнего времени на поиск геометрического места элемента в макете.

2) Сбалансированность и пропорциональность: объекты в макете соизмеримы и пропорциональны между собой.

3) Ускорение и подгон под шаблон, единообразность элементов: разработав модульную сетку, мы делаем основу для решений на будущее.

Давайте рассмотрим несколько ресурсов с модульными сетками и научимся создавать свою.

Модульная сетка с сайта 960 Grid System

Откроем сайт 960 Grid System — это сайт, где содержится множество модульных сеток. Вы можете выбрать и скачать ту сетку, которая вам понравится. На сайте применяется система из 16 либо 12 колонок, но существует и 24-х колоночная система, которая в практике редко встречается.

Мы рассмотрим 12-ти колоночную систему, в которой контент располагается в 3 столбца. В ней нет необходимости высчитывать ширину картинки, легко настраивается расположение элементов друг с другом и отступы между ними.

Модульная сетка фреймворка Twitter Bootstrap

Рассмотрим один из СSS-фреймворков Twitter Bootstrap, который также использует модульную сетку — http://getbootstrap.com/. На этом сайте есть раздел “CSS” с подразделом “GRID SYSTEM”, где содержится гибкая мобильная модульная сетка, которая соответствующим образом масштабируется до 12 столбцов по мере увеличения размера устройства или экрана.

На нашем канале есть курс по этому фреймворку, в котором вы сможете создать необходимую модульную сетку для вашего проекта, а также посмотрите цикл уроков по адаптивной верстке CSS3 BUTTON GENERATOR

Собственная модульная сетка

Ну и наконец, мы разберем пример, где вы сможете сами понять, как создать собственную модульную сетку с помощью CSS. Скачаем один из плагинов для Photoshop — http://guideguide.me/. Создаем документ шириной 960рх и высотой 1050рх и открываем в меню Окно->Расширения->Grid System. Создаем сетку из 12 колонок, ширина колонки 20рх, отступы между колонками по 10рх. Нажимаем кнопку Make grid и строим нашу модульную сетку.

Создадим новый слой и с помощью кнопки Rectangular marquee/Прямоугольное выделение выделяем первый столбец и выполним заливку красным цветом или любым другим. Размножим нашу заливку с помощью копирования слоя горячими клавишами Ctrl+J. Выделим все слои и выполним выравнивание по горизонтали, выставим непрозрачность на 10%. Объединим наши слои – Сtrl+E и назовем слой GRID. Модульная сетка готова! На этом все.

Если вам понравилось видео, ставьте лайк! А также нам будут очень приятны ваши отзывы и пожелания в комментариях под этим видео.

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog.

Ссылки на сайты из данного урока: 1. 960 Grid System — http://960.gs/ 2. Twitter Bootstrap — http://getbootstrap.com/ 3. Плагин для Photoshop — http://guideguide.me/ 4. Цикл уроков по bootstrap — https://www.youtube.com/playlist?list=PLY4rE9dstrJwP_JUTts9AtMVtJlJVGxWK 5. Цикл уроков по адаптивной верстке — https://www.youtube.com/playlist?list=PLY4rE9dstrJyJEghRkl7qfqdAdlyvaOVQ

---

Смотрите также

• 
  Как в фотошопе сделать стрелку
• 
  Фотошоп как изменить изображение
• 
  Как в фотошопе сохранить контур
• 
  Инструмент восстанавливающая кисть в фотошопе как пользоваться
• 
  Массив по траектории в автокаде
• 
  Как сделать в фотошопе брошюру
• 
  Как в фотошопе сделать скулы
• 
  Как в фотошопе добавить объем
• 
  Как сгладить края в фотошопе после вырезания
• 
  Как добавить фильтр в фотошоп
• 
  Как в фотошопе сделать эффект скорости