В помощь дизайнеру — 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.

gridbootstrap

Указываем нужную ширину, в которой хотите творить великолепие, жмете кнопочку «Ok».

Перед глазами выстраивается сетка.

Все, точка.

Для ленивых сам файл прикрепил к посту.

Пользуйтесь на здоровье, если помогло, то просто напишите маленькое спасибо.

GridBootstrap

Просмотров: 29 481

Related Posts

Leave a comment

Hey, so you decided to leave a comment! That's great. Just fill in the required fields and hit submit. Note that your comment will need to be reviewed before its published.