Модульная сетка psd: 13 готовых шаблонов модульных сеток

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

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

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

Для этого и существует модульная сетка. Она помогает предотвратить хаос элементов. Поэтому, когда она отсутствует, или представляет из себя вот это…

… на веб-странице правит произвол и путаница. Списки, кнопки, блоки и менюшки раскиданы как попало. Верстается все так же тупо и запутанно. А это не есть гуд.

Что из себя представляет модульная сетка

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

В подавляющем большинстве случаев она бывает 12, 16 и 24 колоночной. Если вы делаете свободный сайт с большим количеством «воздуха» между элементами, стоит использовать 12 колоночную сетку. Если же вы делаете сайт, где должно быть over дох*уя информации на квадратный пиксель (привет forex), стоит использовать 24 колоночную сетку.

Где раздобыть модульную сетку

Существует 2 легальных способа ее получения в домашних условиях:

1. Нарисовать.

Долго, дорого (если учитывать человеко/часы, за которые вам платят деньги) и не всегда аху*енно (зависит от опытности дизайнера в этом вопросе). Я никогда этого не делал. На мой взгляд — лишний геморой и тупая работа.

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

2. Скачать

Зачем рисовать, если можно взять уже готовое? Причем не украсть, а скачать бесплатно. В этом вопросе, такой принцип работает на 100%. Существует огромное количество, как готовых сеток, так и всевозможных генераторов.

Давайте обратим внимание на некоторые из них:

960 grid

Конечно же. Каждый дизайнер наверняка знает этот сайт. Здесь можно бесплатно скачать сетку под разрешение 960 px практически для всех возможных редакторов (Photoshop, Illustrator, Corel…)

Modular Grid Pattern

Довольно интересный сервис, который позволяет создавать сетки под любые разрешение экрана, хоть 2500px. Идеально подойдет для адаптивного дизайна.

Grid Calculator

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

Эти сервисы я с уверенностью вам рекомендую. Но можно поступить еще проще. Существует немало расширений для фотошопа, которые позволяют строить сетку прямо в окне программы. Я могу порекомендовать одно единственное:

Guideguide

Одно из самых популярных расширений. Полностью бесплатно (но вы можете сделать пожертвование). Рекомендации по установке (English) можно прочитать здесь . Если в двух словах и на русском: установите Adobe Extensios Manager (бесплатно), установите расширение, перейдите в Window > Extensions > GuideGuide, наслаждайтесь.

В заключении

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

Опубликовано 20/08/2014Автор: Антон

В рубрике Горячее

Библиотека систем сеток для iOS, Android и Bootstrap (.xd, .psd, .ai, .sketch, .fig)

Огромная библиотека систем сеток для iOS, Android и Bootstrap. С ней вы получите, 26 сеток с 6 и 12 колонками для 15 различных устройств, в файлах совместимых с популярными графическими инструментами: Adobe XD, Photoshop, Illustrator, Sketch и Figma. Легкий способ начать свой проект с помощью данного набора.

Bootstrap – 4 сетки для 4 устройств

Desktop HD

12 колонок
1440x1024px
Offset: 165px
Gutter: 30px
Column: 65px

Desktop

12 колонок
1024x1024px
Offset: 47px
Gutter: 30px
Column: 50px

Tablet

6 колонок
768x1024px
Offset: 45px
Gutter: 30px
Column: 88px

Mobile

2 колонок
320x1024px
Offset: 15px
Gutter: 30px
Column: 130px

Android – 6 сеток для 3 устройств

Tablet 9″

6 колонок
768x1024px
Offset: 15px
Gutter: 12px
Column: 113px

Tablet 9″

12 колонок
768x1024px
Offset: 17px
Gutter: 10px
Column: 52px

Tablet 7″

6 колонок
600x960px
Offset: 17px
Gutter: 10px
Column: 86px

Tablet 7″

12 колонок
600x960px
Offset: 17px
Gutter: 10px
Column: 38px

Mobile

6 колонок
360x640px
Offset: 16px
Gutter: 8px
Column: 48px

Mobile

12 колонок
360x640px
Offset: 16px
Gutter: 8px
Column: 20px

iOS – 16 сеток для 8 устройств

iPad Pro

6 колонок
768x1024px
Offset: 15px
Gutter: 12px
Column: 113px

iPad Pro

12 колонок
1024x1366px
Offset: 15px
Gutter: 14px
Column: 70px

iPad

6 колонок
68x1024px
Offset: 15px
Gutter: 12px
Column: 113px

iPad

12 колонок
768x1024px
Offset: 17px
Gutter: 10px
Column: 52px

iPhone 8 Plus

6 колонок
414x736px
Offset: 15px
Gutter: 12px
Column: 54px

iPhone 8 Plus

12 колонок
414x736px
Offset: 15px
Gutter: 12px
Column: 21px

iPhone X

6 колонок
375x812px
Offset: 15px
Gutter: 9px
Column: 50px

iPhone X

12 колонок
375x812px
Offset: 13px

Gutter: 11px
Column: 19px

iPhone 8

6 колонок
375x667px
Offset: 15px
Gutter: 9px
Column: 50px

iPhone 8

12 колонок
375x667px
Offset: 13px
Gutter: 11px
Column: 19px

iPhone SE

6 колонок
320x568px
Offset: 15px
Gutter: 10px
Column: 40px

iPhone SE

12 колонок
320x568px
Offset: 15px
Gutter: 10px
Column: 15px

Watch 42mm

6 колонок
312x390px
Offset: 15px
Gutter: 12px
Column: 37px

Watch 42mm

12 колонок
312x390px
Offset: 12px
Gutter: 12px
Column: 13px

Watch 38mm

6 колонок
375x667px
Offset: 15px
Gutter: 10px
Column: 32px

Watch 38mm

12 колонок
375x667px
Offset: 15px
Gutter: 10px
Column: 11px

Скачать бесплатно

Как создать сетку в Photoshop — журнал Smashing Magazine

• 6 мин чтения
• Графика, фотошоп, Сетки
• Поделиться в Твиттере, LinkedIn

Об авторе

Стив Шоеффель (@steveschoeffel) — визуальный дизайнер в Viget, живет за пределами Вашингтона, округ Колумбия.

Его портфолио можно посмотреть здесь. Больше о Стив ↬

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

Метод 1

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

Больше после прыжка! Продолжить чтение ниже ↓

Настройте сетку за 5 секунд

1. Определите поля, количество столбцов и ширину поля. Затем нажмите «Создать направляющие».
2. Если холст для вашей дизайнерской композиции широкий, сделайте быстрый расчет, чтобы длина полей позволяла сетке быть ограниченной вашими 960 пикселей. Например, если холст имеет ширину 1200 пикселей, то левое и правое поля будут равны 120 пикселям каждое.

Пример 12 столбцов с 20-пиксельными промежутками и полями, установленными на 120 пикселей.

Таким же образом можно установить базовую сетку, но в итоге получится много направляющих. Лучшим вариантом может быть метод, показанный в видеоролике Method & Craft Майка Прешеса…

Расширяемая базовая сетка Method & Craft

Вот краткое изложение шагов по настройке расширяемой базовой сетки.

1. Установите базовое значение сетки, затем создайте шаблон шаблона. Базовая сетка определяется интерлиньяжем (или высотой строки) основного текста. Например, если основная копия вашего дизайна выполнена шрифтом Helvetica с размером 13 пунктов, а интерлиньяж — с шагом 18 пунктов, то вам следует установить базовую сетку с шагом 18 пикселей.
2. Создайте файл Photoshop с высотой базовой сетки, заполните нижний пиксель и оставьте остальные пиксели прозрачными. В этом случае размеры вашего холста будут 1 пиксель в ширину и 18 пикселей в высоту.
3. «Выбрать все», а затем сохраните это как новый шаблон. Вы можете сделать это, перейдя в Edit → Define Pattern…
4. Перейдите в Adjustment Layer → Pattern и выберите только что созданный шаблон сетки.
5. Отрегулируйте непрозрачность по желанию.

Пример метода 1 со столбцами и базовой сеткой вместе.

Преимущества

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

Недостатки

• Использование вертикальных направляющих для обозначения других элементов в документе может быть затруднено, поскольку вы можете перепутать их с сеткой.
• По сравнению со способом 2 параметры сетки не столь конкретны и всеобъемлющи (например, установка высоты горизонтального модуля).
• Линии сетки определяются математически и не обязательно совпадают с пиксельной сеткой. Это означает, что ваши направляющие могут в некоторых случаях падать неравномерно и в конечном итоге располагаться посередине реальных пикселей.
• Этот метод требует двух отдельных процессов для создания вертикальной и базовой сетки по сравнению с одним методом.

Метод 2

Модульная сетка представляет собой комплексное сеточное решение. Инструмент создает вертикальную столбчатую сетку и базовую сетку как один шаблон. Существует два способа использования шаблона модульной сетки:

Панель приложений В дополнение к Photoshop это также работает с Fireworks, GIMP и Microsoft Expression Design. Обратите внимание, что для работы этой панели у вас должна быть последняя версия программного обеспечения (Adobe CS5 или эквивалент одного из других приложений) и подключение к Интернету. При этом, если вы уже создали шаблон и сохранили его в своей библиотеке, вы сможете получить к нему доступ, не нуждаясь ни в чем другом.

Веб-приложение Это работает в Chrome, Firefox, Safari и Opera. Веб-приложение позволяет создавать шаблон сетки и загружать его прямо из браузера во всех форматах.

Какой бы способ вы ни выбрали, просто выберите ширину модуля, ширину желоба и номер базовой линии, а модульная сетка сделает все остальное. Вы также можете указать высоту горизонтального модуля.

Преимущества

• Это быстрый способ получить все необходимое; сплошной слой.
• У вас есть возможность загрузить файл шаблона Photoshop, PNG или маску прозрачности.
• Вы можете пометить паттерны и поместить их в папку, чтобы вы могли вернуться к сетке практически без каких-либо настроек.
• Освобождает руководство для других целей.
• Вы можете указать высоту вертикального модуля, чтобы установить общий вертикальный ритм.
• Сетку можно накладывать с разной степенью прозрачности, чтобы она не отвлекала внимание при разработке.
• Поддерживает приложения, отличные от Photoshop.

Недостатки

• Если ваш холст широкий, то создание сетки в виде шаблона заставит ее распространяться на всю страницу, что может раздражать и затруднить различение границ содержимого. Это можно исправить несколькими способами:
  1. Примените маску слоя, чтобы ограничить сетку только областью основного содержимого.
  2. Нарисуйте прямоугольник размером с область основного содержимого (например, 960 × 1200 пикселей) и примените сетку в качестве стиля слоя, в этом случае задайте для заливки значение 0 %.
• Этот метод заставляет вас выбирать базовую сетку, не позволяя вам просто создавать вертикальные столбчатые модули.
• Требуется вручную скрыть и показать слой сетки без использования сочетания клавиш.

Заключительные мысли

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

Дополнительные ресурсы

• Улучшение дизайна сетки с помощью плагина GuideGuide
• Лучший способ проектирования для Retina в Photoshop
• Веб-дизайн на основе сетки, упрощенный
• Полезные инструменты и методы Photoshop для вашего рабочего процесса

Модульная сетка дизайны, темы, шаблоны и загружаемые графические элементы на Dribbble

1. Посмотреть Модульный Архитектор

   Модульный архитектор

2. Просмотр страниц продукта Lucid

   Страницы продукции Lucid

3. Просмотр Модульная система счисления

   Модульная система счисления
4. Просмотр неиспользуемой модульной идентификации

   Неиспользуемый модульный идентификатор

5. Посмотреть 36 Days of Type (фиолетовая версия), часть 2

   36 Days of Type (фиолетовая версия), часть 2

6. Просмотр анимации веб-сетки

   Веб-анимация сетки

7. Модуль просмотра 151.

   30 — Анимация веб-сетки

   Модуль 151.30 — Web Grid Animation

8. Просмотреть сетку буквы S

   Буква S Сетка

9. Просмотреть сетку буквы S

   Буква S Сетка

10. Посмотреть МОДУЛЬНЫЕ

    МОДУЛЬНЫЙ

11. Посмотреть Разборка визуального языка DWeb

    Разбор визуального языка DWeb

12. Посмотреть модульное движение

    Модульное движение

13. Посмотреть graphicdesigner.

    No related posts.