JavaScript Давайте писать JavaScript для фотошопа?

[Great Rash]

А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый 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 раза.

 

Двухмегабайтная гифка процесса! Простите, ужимал как мог. Всем спасибо за внимание

[antonKar]

Спасибо за справочники, на выходных как раз хотел поправить скрипт, выписывающий в csv список шрифтов в макете, а то из интернетов ни один не работает с CC

Edited February 6, 2015 by antonKar

[lexxcode]

уууээээээууууу. крутяяяяк. Спасибо, полезно.

 

Двухмегабайтная гифка процесса! Простите, ужимал как мог.

Ну можно же было просто записать видео FHD, хотя бы. Сегодня же уже 2015 год, зачем себя так мучить (и меня немножко) ?  

 

А вообще крутяяяяяк

[rus]

молодца Раш плюсану!
только вот пока не имею понимания на сколько это все будет полезно.

как-то видел скрипт который поворачивал картинку зеркально - это было в принципе полезно, т.к. в фотошопе нет таких стандартных инструментов для подобных действий - я так понимаю это как раз и есть то, что ты мутишь?

[lexxcode]

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

 

Вообще-то есть...

[rus]

Точно! Надо же... видимо невнимательность - это мой конек

[prodx]

Вот кстати ресурс по Javascript'у для фотошопа: forum.rudtp.ru/resources/categories/adobe-photoshop.3