Как создать собственную сеточную систему в Photoshop для веб-дизайна

Grid — это популярный подход к созданию сайтов. Это более последовательно и делает разделы пропорционально правильными. Несколько примеров CSS Grid-фреймворков: 960.gs или остов, Однако одно из ограничений использования каркаса сетки состоит в том, что у нас будет меньше гибкости.

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

В этом посте мы собираемся показать вам, как создать собственную сетку для CSS и Photoshop. Чтобы упростить процесс, мы собираемся использовать несколько инструментов. Давайте проверим это.
Установить GuideGuide
Во-первых, нам нужно установить GuideGuideрасширение Photoshop для создания направляющих линий, специально предназначенное для создания Grid с легкостью. Чтобы установить GuideGuide, ваш Photoshop должен быть не ниже CS4.
Расширение Photoshop можно установить через Adobe Extension Manager, следующее.
Рассчитайте свою сетку
Перед настройкой направляющих линий в Photoshop нам необходимо рассчитать сетку, которая включает в себя общую ширину, ширину столбца, номер столбца и желоб столбца. Это можно легко сделать, используя калькулятор сетки Heroku.com.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

В этом примере я хотел бы указать общую ширину для 1000 пикселей, 30 пикселей для ширины желоба и 10 для количества столбцов. Затем этот инструмент автоматически сгенерирует фактическую ширину содержимого, а также соответствующую ширину столбца.
Вы также можете скачать сгенерированную сетку CSS.
Создать сетку
Время вернуться в Фотошоп. Перейдите в это меню: «Окно»> «Расширения», чтобы отобразить панель «GuideGuide» на боковой панели Photoshop. Затем создайте новый холст Photoshop и установите ширину холста в соответствии с Fulll Width — в моем случае это 1000px.
Заполните поля на панели GuideGuide — «Желоб столбца», «Ширина столбца» и «Номера столбцов» — в соответствии с полями в калькуляторе сетки.
Затем на панели GuideGuide перейдите на вкладку «Наборы». На этой вкладке вы найдете несколько предустановленных направляющих. Выберите пресет Outline для создания направляющих линий на краю холста.
Мы закончили, и вот наша готовая сетка для использования при разработке веб-сайта.
Кроме того, вы можете добавить больше пространства для дыхания на левой и правой сторонах холста, увеличив ширину холста, а затем добавить прямоугольник в новых слоях для создания визуального помощника для столбцов сетки.