Экспорт слоев из Photoshop в один клик!

HTML, верстка, кодинг, CSS /
Это перевод статьи Single-click layer exporting in Photoshop

Используйте этот классный Photoshop экшен для экспорта слоев и групп слоев в один клик.

Одной из наиболее часто повторяющихся задач в веб-разработке, это нарезка макета, то есть сохранение части изображения в отдельный файл, как .png или .jpg. Если вам когда-нибудь понадобиться выполнять много однообразных действий, ОСТАНОВИТЕСЬ, и откройте панель экшенов.


Прежде мы перейдем к экшенам, давайте сравним два способа как мы это делаем вручную.

Плохой способ:


  1. Скрыть все слои кроме нужного
  2. Использовать инструмент slice
  3. Увеличить на 1000% для того чтобы посмотреть не отрежете ли чего нужного или не оставите чего лишнего.
  4. Выберите Save for Web
  5. Удалить все ненужные части которые случайно попали в экспорт, потому что вы забыли его настроить.
  6. Вспомнить слои которые вы отключали и заново включить их.
  7. Удалить линии среза от предыдущего экспорта, для экспорта другой части изображения.
  8. Впасть в бешенство, потому что сегодня сделать так нужно еще 99 раз.

Такой ужас был в моей работе раньше. Давайте никогда не будем возвращаться туда, друзья. Существует способ получше.

Способ получше:




  1. Нажмите правой кнопкой мыши на слой или группу слоев и выберите “Duplicate Layer/Group”
  2. В диалоговом окне, которое появится, выберите “Document->New” и нажмите Ok
  3. Теперь у нас есть новый документ, с нужной частью изображения.
  4. В меню выберите Image -> Trim… -> Transparent Pixels
  5. Теперь наш документ соответствует размеру выбранного слоя с точностью до пиксела
  6. Выберите Save for Web
  7. Закройте документ.

И теперь ты попадаешь заново в оригинальный документ, в котором ничего не надо отменять и удалять.

Теперь перейдем к экшенам.

Самый лучший способ:

  1. Нажмите F12

Одно нажатие клавиши, ввести имя файла и все. Как это сделать, спросите вы меня? Экшены, друзья. Сохранение всех действий из способа “Способ получше” в файле экшена, с назначенной горячей кнопкой, это супер просто.

Вот как это сделать:


  1. Выбрать слой или группу слоев.
  2. Открыть панель экшенов(меню window->actions)
  3. Нажать на кнопку “Create new action”, и назвать его.(Я назвал “Asset to File”)
  4. Нажать на запись(на рисунке ниже)
  5. Внимательно повторить все действия из способа “Способ получше”, включая закрытие документа.
  6. Нажать на кнопку стоп(на рисунке ниже)

Ваш новый экшен должен выглядеть примерно так:

Поставьте галочку “dialog on/off”(в пункте b), для того чтобы вы могли настроить экспорт и назвать файл. Также вы можете нажать на кнопку play для собственно экспорта(пункт a).

И последний шаг, назначение горячей клавиши.

Выберите ваш экшен в панели.
Откройте контекстное меню панели(пункт c) и нажмите “Action Options”
Выберите клавишу(и клавишу модификатор если нужно)

Чтобы сэкономить ваше время вы можете скачать готовый экшен. Альтернативная версия только переносит слой в новый документ и обрезает его, вы можете нажать shift + F12 для переноса в новый документ и внести коррективы перед сохранением.

Вот и все! Теперь вы знаете как создавать экшены и сохранять слои одним нажатием кнопки. Какие ваши любимые экшены для сохранения времени? Я хотел бы услышать, какие приемы вы используете чтобы ускорить свой рабочий процесс.

4 комментария

talgautb
у меня на shift + f2 :D
если вдруг кто-то постоянно делает рутину значит он мыслит не правильно))
з.ы. css hat, enigma64 хочу еще использовать
roose
Enigma64 сейчас же PNG hat. Бесплатно если, использовал бы, а покупать, не то что бы жалко денег, а как-то не получается у меня с онлайн оплатой =) Сколько раз пробовал с карточки оплатить, всегда не проходит.
talgautb
хм, вроде недавно отдельно было))
у меня как-то не ладиться отдавать за софт)
за игры да, за софт еще нет :))
evildrumma
projectparfait.adobe.com/ а вот этим не пользовались? отпишитесь, если хорошо справляется с задачей, тем более пока бесплатно и от адобе
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.