Actions в Photoshop

Reading time ~4 minutes

Рассмотрим вопрос автоматизации действий в программе Photoshop.

Тема статьи перекликается с предыдущей статей “Macros в Sublime Text 3”, посвященной макросам в Sublime Text.

В Adobe Photoshop также имеется инструмент для записи макросов, только называется он по другому - Actions (Операции). Но от смены названия суть не меняется.

С помощью Actions (Операции) в Photoshop можно записать последовательность действий, а потом запускать их на выполнение каждый раз, когда это понадобиться.

Для чего нужны Actions (Операции) верстальщику? Не поверите, но это очень удобная вешь, которая значительно ускоряет работу в Photoshop. В частности, можно ускорить нарезку изображений из psd-макета.

Буквально за месяц до этого я приобрел лицензию на плагин PNG Hat для автоматизации вырезания картинок:

Плагин PNG Hat в Photoshop

Так вот - я просто на тот момент не знал о существовании макросов в Photoshop! Actions - это намного круче, чем PNG Hat.

Но меньше слов - больше дела. Приступим к изучению Actions (Операции) в Photoshop на простом примере. Создадим макрос для вырезания и экспорта картинок из psd-макета.

Actions - где они живут

Все actions в Photoshop “проживают”” по одному адресу - в меню “Окно” - “Операции” (если Photoshop русскоязычный). Или же быстрее и проще - через сочетание клавиш Alt+F9. Как и все другие инструменты в этой программе, actions имеют свою собственную панель:

Палитра Actions в Photoshop

По умолчанию, в Photoshop уже есть готовые операции actions, расположенные в папке “Операции по умолчанию”: “Виньетка”, “Рамка - 50 пикс.”, “Деревянная рамка - 50 пикс.” и так далее.

Actions в Photoshop не могут жить вне набора операций (правильно такой набор называется “Set”). На скриншоте как раз показаны два таких набора (“Set”) - один от Photoshop, второй - мой собственный.

Внизу палитры расположены шесть кнопок управления actions. Перечислю их по порядку, слева направо:

  • остановка записи action
  • запуск записи action
  • воспроизведение записанного action
  • создание нового набора actions
  • создание нового action

Создаем новую операцию action

В палитре “Операции” кликаем на кнопке “Создать новый набор”. В диалоговом окне вводим название нового набора - “Export-Images-to-Web”, затем сохраняем его.

Созданный набор операций (“Set”) готов, но он пока пустой, в нем нет ни одной операции (action):

Новый Set для Actions

В самом левом столбце палитры можно напротив каждого Set’а ставить или убирать галочки, тем самым включая или отлючая данный набор операций (actions).

Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (actions). Каждый набор операций (“Set”) может содержать неограниченное число операций (actions).

Предварительно откроем в Photoshop любой psd-макет, из которого можно экспортировать изображения для будущего HTML-шаблона. В палитре “Слои” заранее выделим слой с изображением, которое будем экспортировать (отключим все эффекты данного слоя, если они есть):

Слой с изображением для экспорта

И нажмем кнопку “Создать новую операцию” в палитре “Операции”. Откроется диалоговое окна настройки будущей операции (action):

Настройка будущего action

В этом окне указываем имя для будущей операции (action); в какой набор операций (“Set”) она будет входить; назначить “горячие” клавиши для данной операции.

Кнопка “Записать” запускает процесс записи макроса. Внизу панели “Операции” кнопочка “Запись операции” станет красной, что напоминает о том, что запись пошла! С этого момента все мои действия будут запоминаться программой Photoshop, поэтому буду внимательным.

Вырезание картинки из выбранного слоя я буду делать пошагово, в следующем порядке:

  • дублирование активного слоя
  • отрезка прозрачных пикселов (trimming)
  • сохранение полученной картинки для Web
  • закрытие нового документа без его сохранения

Не забываем нажать кнопочку “Остановить запись”. В принципе, все мои действия очень легко прочитать внутри самой операции (action):

Созданная операция (action)

Настройка операции (action)

По большому счету, созданная мною операция полностью готова к работе. Можно ради любопытства выбрать любой другой слой с изображением и нажать клавишу F3. Произойдет практически мгновенное экспортирование изображения в этом слоя для Web.

Но что может не устраивать нас в этой операции? Все, кроме одного - возможность самому выбирать, куда Photoshop должен сохранять экспортируемое изображение.

Для этой цели существует колоночка с пустыми квадратиками напротив каждого действия в записанной мною операции (action).

Если навести курсор мыши на любой из них, то всплывающий tooltip подскажет, что это - “Возможность установки или отмены установки диалогового окна”.

К слову сказать, все операции (actions) в Photoshop делятся на два вида:

  • автоматические (без вмешательства пользователя)
  • полуавтоматические (с частичным вмешательством пользователя)

Нам как раз нужно из автоматической операции (action) сделать ее полуавтоматической. На этапе “Экспортировать” нужно сделать так, чтобы Photoshop спрашивал нас, куда нужно сохранять изображение.

Делается это очень просто - достаточно кликнуть мышью в нужном окошке:

Диалоговое окно экспорта изображения

Попробуем снова экспортировать изображение по нажатию клавиши F3. Вуаля - видим, что открылось окно Photoshop, в котором можем задать параметры для экспорта изображения. И в том числе - куда необходимо сохранять изображение:

Экспорт изображения для Web

Заключение

На этом можно закончить тему создания операций (actions) в Photoshop. На самом деле эта тема большая и достаточно сложная. Я видел даже специальный курс для дизайнеров по написанию actions под Photoshop.

Но для верстальщика нет необходимости создавать большие и сложные операции. Поэтому этого уже достаточно для ускорения и облегчения своей работы. Попробуйте - оно того стоит!

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке