Как создавать собственные сеточные системы в Photoshop

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

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

В этом посте TipsMake.com покажет вам, как создавать собственные сетки как для CSS, так и для Photoshop. Чтобы упростить этот процесс, в статье будет использоваться несколько инструментов. Давайте узнаем подробнее в этом разделе!

Установить GuideGuide

Во-первых, вам нужно установить GuideGuide, расширение Photoshop для создания определенных, заданных путей, чтобы упростить сетку. Чтобы иметь возможность установить GuideGuide, вам потребуется как минимум Photoshop CS4.

Изображение 1 из Как создавать собственные системы сеток в Photoshop

Расширение Photoshop можно установить через Adobe Extension Manager следующим образом.

Изображение 2: Как создавать собственные системы сеток в Photoshop

Рассчитать размер сетки

Перед настройкой стандартных линий в Photoshop нам нужно рассчитать размер сетки, включая общую ширину, ширину столбца, количество столбцов и расстояние между столбцами. Это легко сделать с помощью инструмента Gid Calculator на Heroku.com (см.: http://gridcalculator.dk/).

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

Изображение 3: как создавать собственные системы сеток в Photoshop

Вы также можете скачать сгенерированную сетку CSS.

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

Пора вернуться в Photoshop. Перейдите в меню «Окно»> «Расширения», чтобы отобразить панель GuideGuide на боковой панели Photoshop. Затем создайте новый холст Photoshop и установите ширину рамки на полную ширину — в данном случае 1000 пикселей.

Изображение 4: Как создавать собственные системы сеток в Photoshop

Заполните поля на панели GuideGuide — Промежуток столбца, Ширина столбца и Номера столбцов — в соответствии с полями в Калькуляторе сетки.

Изображение 5: Как создавать собственные системы сеток в Photoshop

Затем в панели управления GuideGuide перейдите на вкладку «Наборы». На этой вкладке вы найдете предустановленные контуры для создания стандартных линий на краю холста.

Изображение 6 из Как создавать собственные системы сеток в Photoshop

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

Изображение 7 из Как создавать собственные системы сеток в Photoshop

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

Надеюсь, у вас все получится.

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

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

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