В помощь дизайнеру — Grid Bootstrap

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

Если вы готовите дизайн-макеты сайтов с использованием стандартной сетки Bootstrap, тогда жмите кнопочку «Подробнее».

Все началось с того, что как и все, при разработке сайта с использованием фреймворка Bootstrap, дизайн сайта стараешься выстраивать по стандартной 12-ти колоночной сетке. Соответственно, в своем файле PSD требовалась сетка, которая будет помогать в реализации будущего великолепного дизайна.

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

В итоге, плюнув на все, я просто сделал расчеты для нужной ширины и подготовил себе необходимые файлы с сеткой на 1170 и 1310 пикселей. Готовые файлы с удовольствием бы прикрепил сюда, чтобы неравнодушные просто скачали и пользовались, но я не буду этого делать (ха-ха, злой смех). Потому что нет смысла, все поймете сами чуть позже.

Долгое время проработав в таком ключе приходилось перестраиваться, т.к. современные тенденции требовали широкоформатные сайты, а это означало, что и рисовать нужно ширше. Готовить десяток файлов psd с разной сеткой под Bootstrap желания особого не было, т.к. каждый раз ширина всегда была разной на мое усмотрение, то 1500, то 1600, то 1620 и т.д.

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

Что делаем.

Создаем файл, например, GridBootstrap.js, в котором размещаем вот этот небольшой кусок кода:

if (app.documents.length != 0){

    preferences.rulerUnits = Units.PIXELS;

    var doc = app.activeDocument;

    var layoutWidth = Number (prompt(‘Введите ширину .container’ , 1310));

    var cols = 12;

    var padding = 15;

    var size = 0;

    var colSize = (layoutWidth-(cols*padding)*2)/cols ;

    var centerX = doc.width / 2;

    for(i = 0 ; i < 6 ; i++ ){

        doc.guides.add ( Direction.VERTICAL , centerX + size );

        doc.guides.add ( Direction.VERTICAL , centerX + (size * (-1)) );

        size += padding;

        doc.guides.add ( Direction.VERTICAL , centerX + size );

        doc.guides.add ( Direction.VERTICAL , centerX + (size * (-1)) );

        size += colSize;

        doc.guides.add ( Direction.VERTICAL , centerX + size );

        doc.guides.add ( Direction.VERTICAL , centerX + (size * (-1)) );

        size += padding;

        doc.guides.add ( Direction.VERTICAL , centerX + size );

        doc.guides.add ( Direction.VERTICAL , centerX + (size * (-1)) );

    }

}

Сохраняем файл и закидываем его в папку с фотошопом, адрес: C:/Program Files/Adobe/Adobe Photoshop/Presets/Scripts/. Адрес может отличаться, но суть должна быть ясна.

При необходимости перезагружаем великий и ужасный Photoshop.

Далее Ctrl+N — создаем новый документ, Ctrl + R — включаем линеечку, Ctrl+; — включаем вывод сетки, на текущий момент должно быть все пусто на белом листе.

Далее идем File -> Scripts и выбираем GridBootstrap.