Рассмотрим вопрос автоматизации действий в программе Photoshop.
Тема статьи перекликается с предыдущей статей “Macros в Sublime Text 3”, посвященной макросам в Sublime Text.
В Adobe Photoshop также имеется инструмент для записи макросов, только называется он по другому - Actions (Операции). Но от смены названия суть не меняется.
С помощью Actions (Операции) в Photoshop можно записать последовательность действий, а потом запускать их на выполнение каждый раз, когда это понадобиться.
Для чего нужны Actions (Операции) верстальщику? Не поверите, но это очень удобная вешь, которая значительно ускоряет работу в Photoshop. В частности, можно ускорить нарезку изображений из psd-макета.
Буквально за месяц до этого я приобрел лицензию на плагин PNG Hat для автоматизации вырезания картинок:
Так вот - я просто на тот момент не знал о существовании макросов в Photoshop! Actions - это намного круче, чем PNG Hat.
Но меньше слов - больше дела. Приступим к изучению Actions (Операции) в Photoshop на простом примере. Создадим макрос для вырезания и экспорта картинок из psd-макета.
Actions - где они живут
Все 1
actions
1
actions
По умолчанию, в Photoshop уже есть готовые операции 1
actions
Actions в Photoshop не могут жить вне набора операций (правильно такой набор называется “Set”). На скриншоте как раз показаны два таких набора (“Set”) - один от Photoshop, второй - мой собственный.
Внизу палитры расположены шесть кнопок управления 1
actions
- остановка записи
1
action
- запуск записи
1
action
- воспроизведение записанного
1
action
- создание нового набора
1
actions
- создание нового
1
action
Создаем новую операцию action
В палитре “Операции” кликаем на кнопке “Создать новый набор”. В диалоговом окне вводим название нового набора - “Export-Images-to-Web”, затем сохраняем его.
Созданный набор операций (“Set”) готов, но он пока пустой, в нем нет ни одной операции (1
action
В самом левом столбце палитры можно напротив каждого Set’а ставить или убирать галочки, тем самым включая или отлючая данный набор операций (1
actions
Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (1
actions
1
actions
Предварительно откроем в Photoshop любой psd-макет, из которого можно экспортировать изображения для будущего HTML-шаблона. В палитре “Слои” заранее выделим слой с изображением, которое будем экспортировать (отключим все эффекты данного слоя, если они есть):
И нажмем кнопку “Создать новую операцию” в палитре “Операции”. Откроется диалоговое окна настройки будущей операции (1
action
В этом окне указываем имя для будущей операции (1
action
Кнопка “Записать” запускает процесс записи макроса. Внизу панели “Операции” кнопочка “Запись операции” станет красной, что напоминает о том, что запись пошла! С этого момента все мои действия будут запоминаться программой Photoshop, поэтому буду внимательным.
Вырезание картинки из выбранного слоя я буду делать пошагово, в следующем порядке:
- дублирование активного слоя
- отрезка прозрачных пикселов (
1
trimming
- сохранение полученной картинки для Web
- закрытие нового документа без его сохранения
Не забываем нажать кнопочку “Остановить запись”. В принципе, все мои действия очень легко прочитать внутри самой операции (1
action
Настройка операции (action)
По большому счету, созданная мною операция полностью готова к работе. Можно ради любопытства выбрать любой другой слой с изображением и нажать клавишу F3. Произойдет практически мгновенное экспортирование изображения в этом слоя для Web.
Но что может не устраивать нас в этой операции? Все, кроме одного - возможность самому выбирать, куда Photoshop должен сохранять экспортируемое изображение.
Для этой цели существует колоночка с пустыми квадратиками напротив каждого действия в записанной мною операции (1
action
Если навести курсор мыши на любой из них, то всплывающий tooltip подскажет, что это - “Возможность установки или отмены установки диалогового окна”.
К слову сказать, все операции (1
actions
- автоматические (без вмешательства пользователя)
- полуавтоматические (с частичным вмешательством пользователя)
Нам как раз нужно из автоматической операции (1
action
Делается это очень просто - достаточно кликнуть мышью в нужном окошке:
Попробуем снова экспортировать изображение по нажатию клавиши F3. Вуаля - видим, что открылось окно Photoshop, в котором можем задать параметры для экспорта изображения. И в том числе - куда необходимо сохранять изображение:
Заключение
На этом можно закончить тему создания операций (actions) в Photoshop. На самом деле эта тема большая и достаточно сложная. Я видел даже специальный курс для дизайнеров по написанию actions под Photoshop.
Но для верстальщика нет необходимости создавать большие и сложные операции. Поэтому этого уже достаточно для ускорения и облегчения своей работы. Попробуйте - оно того стоит!
На этом все.