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

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

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

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

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

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

Загрузите PSD нашего примера ниже.

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *