Search the Community

А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый JS. Но не писать же "Hello World" в конце концов - не спортивно это как-то. Да и хочется создать что-то более-менее полезное для сообщества. Мы верстальщики, конечно ни разу не дизайнеры, но я стал за собой замечать, что частенько поучаю дизайнеров делать так а не эдак. И вот подумал как-то раз: дай-ка я для коллег замучу чо-нить полезное. Короче, давайте уже без лишних слов делать гриды, а? Значит так, первым делом нам надо заиметь Photoshop CC, потом нам нужно будет выполнить самую скучную часть работы, а именно прочитать документацию. Согласен - "БУЭ!" - сам терпеть не могу это дело. Причём, нам даже две (!) книжки прочитать придётся! Но иначе как научиться то? Значит первым делом читаем Scripting Guide(PDF): там написано как вообще писать скрипты для Photoshop CC, и как в частности сделать тот самый "Hello World" (хе-хе). А после того как вы замутите свой первый скрипт можно начинать мутить магию. Для магии нам понадобится справочник(PDF). Целиком его читать не будем, а только то, что нас интересует. Теперь определимся с тем, что будет делать наш скрипт. А будет он работать так: 1) Открываем новый документ или юзаем уже открытый 2) Спрашиваем какую ширину колонки хочет наш дизайнер 3) Спрашиваем какое расстояние между колонками (в инглише - gutter) хочет наш дизайнер 4) Создаём гайдлайны поверх открытого макета или в новом файле. 5) Все дизайнеры радуются и благодарят нас 6) Мы прохажываемся туда-сюда такие важные Открывайте ваш любимый текстовый редактор (я открыл Atom), создавайте новый файл с расширением .js и погнали писать код: // Первым делом получаем ссылку на документ с которым работаем var currentDocument = app.activeDocument; // Дальше лезем в справочник, нажимаем CTRL+F и ищем "guides". // Угу нашли, получаем сылку на интерфейс гайдов var guides = currentDocument.guides; // Получаем ширину и высоту открытого документа var docWidth = currentDocument.width; var docHeight = currentDocument.height; // Функция, которая будет делать основную работу за нас function createGrid(colSize, colGutter, rowSize, rowGutter) { if (colSize !== 0) { // запомним ширину колонки вместе с отступом var colTotalSize = colSize + colGutter; // посчитаем сколько всего колонок поместится в документе var cols = docWidth / colTotalSize; // нас интересует только целая часть - полумеры для слабаков! cols = parseInt(cols); // интересно, а какая ширина у всех колонок? var totalColWidth = cols * colTotalSize; // а сколько нам от края надо отступить, чтобы всё это дело по центру встало? var offsetLeft = (docWidth - totalColWidth) / 2; // цикл... // // Раз подругу посадил на мотоцикл, // У неё от страха прекратился цикл for (var i = 0; i <= cols; i++) { // первый гайд рисовать не надо (он всё равно за пределами документа может оказаться) if (i > 0) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) - parseInt(colGutter / 2)); } // последний гайд тоже не рисуем, т.к. он с другой стороны тоже вылезет за пределы документа if (i < cols) { guides.add(Direction.VERTICAL, offsetLeft + (i * colTotalSize) + parseInt(colGutter / 2)); } } } if (rowSize !== 0) { // запомним высоту строки вместе с отступом var rowTotalSize = rowSize + rowGutter; // посчитаем сколько всего строк поместится в документе var rows = docHeight / rowTotalSize; // нас интересует только целая часть - полумеры для слабаков! rows = parseInt(rows); // интересно, а какая высота у всех строк? var totalRowHeight = rows * rowTotalSize; // а сколько нам сверху надо отступить, чтобы всё это дело по центру встало? var offsetTop = (docHeight - totalRowHeight) / 2; // эта... кхм for (var i = 0; i <= rows; i++) { // ну, как и ранее, первая и последняя полосочка нас мало волнует if (i > 0) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) - parseInt(rowGutter / 2)); } if (i < rows) { guides.add(Direction.HORIZONTAL, offsetTop + (i * rowTotalSize) + parseInt(rowGutter / 2)); } } } } // запустим функцию и спросим у товарища юзера какую он сетку хочет собссно createGrid( parseInt(prompt('Друг, введи ширину колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по ширине, а', 10)), parseInt(prompt('Друг, введи высоту колонки пжалста', 30)), parseInt(prompt('Друг, введи отступ по высоте, а', 10)) ); Далее я загуглил себе хомячка для опытов, а именно подумал какую я сетку хочу попробовать замутить. Выбор пал на iPhone 4... а вот потому что я ща под мобилки верстаю. Ну и просто по приколу (потому кстати значения по умолчанию 30 и 10 в коде). Вот зверёк: Там 60 и 20, но мы то знаем, что во всём коварная ретина виновата! Так что не верим ей и уменьшаем всё в 2 раза. Двухмегабайтная гифка процесса! Простите, ужимал как мог. Всем спасибо за внимание