8 (8452) 32-00-84

Модульная сетка Bootstrap для Photoshop

Интернет ужа давно стал мобильным и от этого уже никуда не уйти. К примеру на одном из моих проектов уже более 40% пользователей заходят именно с мобильных устройств. Поэтому первоначально при разработке дизайна необходимо планировать его под адаптивную верстку.

Один из самых популярных на сегодня фреймворков для верстки является Twitter Bootstrap.

Смысл состоит в том что при проектировании дизайна нужно использовать 12 колонок с заданным расстоянием между ними. Какая будет ширина макета и какое расстояние между колонками дизайнеру лучше сразу согласовать с верстальщиком. И вообще эти два специалиста в идеале должны работать в тандеме, подсказывая друг другу специфику своей деятельности, иначе получиться не web-дизайн, а сказка «лебедь, рак и щука». Ладно, хватит философии, переходим к делу.

Этапы

Создание направляющих для объекта

Создаем новый файл в Фотошопе, добаляем любой объект на отдельном слое, выбираем этот слой, в меню нажимаем View — New Guides From Shape. Это позволит нам создать направляющие на основании размеров объекта на выбранном слое.

Создание Bootstrap сетки

Выбираем View — New Guides Layout. Откроется окно, в нем ставим галочку в пункте Clear Existing Guides. Это нужно для того чтобы очистить макет от направляющих вокруг объекта, которые мы сделали на первом шаге. В поле Number указываем количество колонок, а в Gutter расстояние между ними.

Предустановленные значения

В Adobe Photoshop есть возможность задать предустановленные программой значения в поле Preset. Это может быть 8, 12, 16 или 24 столбца. Обратите внимание на то что расстояние между ними создается автоматически в зависимости от количества выбранных колонок.

Строки

В диалоговом окне New Layout Guide выберите параметр Rows, Number — 6, тем самым мы добавим шесть вертикальных «строк». Значение Gutter сделайте таким же как и для столбцов.

Отступы от краев макета

Выбираем параметр Margin. Устанавливаем значения Top, Left, Bottom и Right в 20px. После этого наши столбцы и строки сжимаются, а по краям появляются отступы.

Вставить картинку

Чтобы добавить еще одно изображение в рабочую область перейдите в основное меню, File — Place Embedded.

Быстро отключить и включить направляющие можно сочетанием клавиш Ctrl + ;

Обязательно посмотрите видео: