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

Для себя я эту проблему решил. Возможно, мой workflow пока не идеальный, но успешно и без сбоев работает во благо моих нервов уже более двух лет.

Сейчас я расскажу про «хвост» моего большого workflow про то, как я пишу и публикую материалы в интернет. С его началом можно ознакомиться в обзоре маленького текстового редактора nvALT, где я подробно рассказал о методике работы с текстовыми документами и дал ссылки на нужные инструменты.

Мой алгоритм работы c иллюстрациями

Раньше обработка скриншотов и вёрстка материалов занимала неприличную кучу времени. Бывало даже так, что какая-то готовая статья могла пролежать в черновиках несколько недель только потому, что мне было лень сесть и заняться скриншотами. На тот момент также был очень плохой интернет, что делало невозможным загружать картинки через админ-панель WordPress.

Методом проб и ошибок я создал систему работы с иллюстрациями, которая состоит из пяти этапов:

  1. Сбор и организация картинок
  2. Преобразование картинок для веб
  3. Переименование
  4. Автоматическая загрузка на сервер
  5. Расположение иллюстраций в статье

Провал в любом из этих пунктов моментально усложняет работу, так что каждому из них стоит уделить особое внимание.

В этой заметке я сознательно опущу пункт «два», так как ему недавно была посвящена отдельная статья — Оптимизация изображений для Web.

Каждый из шагов я буду описывать на своём примере. Ну а специфика вашей работы подскажет, как можно адаптировать этот workflow уже под ваши нужды.

1. Сбор и организация картинок

В большинстве случаев я использую для иллюстраций скриншоты с экранов Mac и iPhone/iPad. По умолчанию, скриншоты с Mac попадают на Рабочий стол, а скриншоты с iOS лежат в «событиях» или фотопотоке iPhoto. Для экономии времени очень важно, чтобы все новые скриншоты c OS X и iOS автоматически появлялись в каком-то едином месте, например, папке Screens (подробнее о моих папках можно прочесть в статье Finder минималиста.

Со скриншотами для Mac все просто, достаточно настроить автосохранение в произвольную папку (у меня это /Screens). А вот чтобы записать в нее скриншоты из iOS нужно каждый раз открывать iPhoto и искать нужные изображения в Фотопотоке. Разумеется, заниматься этим лень.

Чтобы автоматизировать процесс, я научил Hazel искать скриншоты в фотопотоке и копировать их папку Screens.

Все нужные картинки автоматически собираются в папке Screens
Все нужные картинки автоматически собираются в папке Screens

В качестве альтернативного варианта вы можете загружать снимки с iPhone/iPad на компьютер через функцию Camera Upload в Dropbox. По принципу «переброски» изображений они примерно одинаковые. Разница вот в чем:

Фотопоток

iPad/iPhone автоматически загружают фото в Фотопоток при наличии WiFi соединения. Загрузка на Mac также происходит автоматически. iPhoto для этого запускать не надо.

Dropbox

Загрузка происходит как по WiFi, так и через сотовую сеть, но только, если запущен Dropbox на мобильном устройстве. Загрузка же на Mac происходит автоматически.

Разумеется, я остановился на варианте с фотопотоком, так как он полностью автоматический и не требует никаких настроек. Hazel «выдирает» скриншоты из фотопотока и отправляет их прямо в папку Screens на MacBook Air. Все без единого клика. Нужно лишь подключить Mac/iPhone/iPad к одной сети WiFi. Обычно, после создания скриншота на iPhone он появляется на Mac через 5–7 секунд.

Скриншоты я определяю просто, это все файлы с расширением PNG. При желании можно учитывать разрешение изображений, и благодаря этому определять где скриншот от iPad, а где от iPhone.

Чтобы увидеть содержимое фотопотока, запустите Finder, нажмите ShiftCmdG и перейдите в папке ~/Library/Application Support/iLifeAssetManagement/assets/sub/.

Изображения в фотопотоке хранятся в подпапках
Изображения в фотопотоке хранятся в подпапках

Как видите, изображения в Фотопотоке находятся в подпапках. Мне понадобилась не одна чашка кофе и много гугла, чтобы разобраться, как научить Hazel работать с подпапками и не напортачить. Вот так выглядят мои правила для фотопотока (скачать):

Для работы с подпапками понадобится два правила
Для работы с подпапками понадобится два правила
Первое правило — перебирает папки
Первое правило — перебирает папки
Второе — ищет скриншоты, переименовывает их и перемещает в папку Screens
Второе — ищет скриншоты, переименовывает их и перемещает в папку Screens

Обратите внимание, что я переношу фотографии из Фотопотока, а не копирую их. Теоретически лучше их копировать, а не переносить. Перенос файлов может немного запутать iPhoto, но у меня никаких проблем с этим пока не было. Если вы будите копировать, то потом удалить скриншоты из iPhoto можно вот этим способом.

Во время копирования изображений я также переименовываю их, чтобы потом было легче отличить скриншоты iPhoto/iPad от Mac по названиям файлов. Hazel позволяет присваивать уникальное название файлу в зависимости от многих параметров: разрешения, мета-данных, тегов и т.п. По этим же параметрам вы можете настроить свою уникальную сортировку.

В итоге, в папке Screens я всегда имею нужные скриншоты для Mac, iPhone и iPad, которые имеют удобные имена и отсортированы по дате создания.

Свежие скриншоты уже в папке Screens
Свежие скриншоты уже в папке Screens

Также на эту папку настроено ещё одно правило Hazel, которое удаляет оттуда все файлы, старше одного месяца (скачать). Если мне что-то и понадобится, то я всегда смогу отыскать картинку в Time Machine. Но таких случаев пока не было.

Автоматическое удаление старых скриншотов
Автоматическое удаление старых скриншотов

2. Обработка изображений для web (уменьшение, оптимизация, экспорт)

Как я уже говорил, этой интересной теме посвящена отдельная статья.

Ещё раз быстро напомню свою систему папок для картинок:

  • В корне — черновые картинки
  • tmp – промежуточные результаты
  • Optimased — оптимизированные картинки
  • Final – оптимизированные и переименованные картинки, готовые для загрузки на сервер

После оптимизации картинки появляются в папке Optimased, а затем следуют переименование…

3. Переименование

Сразу после завершения оптимизации вы увидите окно Finder c уже выделенными оптимизированными изображениями (папка Optimased). Дальше нужно нажать ещё одно сочетание клавиш, которое запустит мою службу переименования файлов Automator. При этом появится окошко, где нужно ввести желаемое название. Например new screen. После этого на выходе я получу файлы типа xx-new-screen-macosworld.jpg.

Переименование скриншотов при помощи Automator
Переименование скриншотов при помощи Automator

Не буду подробно рассказывать о том, как делать службы в Automator, просто скачайте мою и редактируйте её по своему усмотрению.

Не забудьте также поставить шорткат на запуск сервиса (у меня OptCmdR). Сделать это можно через Системные настройки → Клавиатуры → Сочетания клавиш → Службы.

Шорткаты настраиваются в системных настройках
Шорткаты настраиваются в системных настройках

Этот сервис не только переименует картинки, но попросит ввести имя для новой папки, которая будет скопирована в папку Final. Эта папка служит отправной точкой для записи картинок на сервер.

Все новые папки их Final автоматически отправляются на сервер
Все новые папки их Final автоматически отправляются на сервер

4. Автоматическая загрузка на сервер

Как только в Final появится новая папка с картинками (например, с названием Test), в дело вступает клиент Transmit, а также Hazel, который отправляет наши картинки прямиком на его «дроплет» (Droplet).

Правило Hazel несложное и выглядит вот так (скачать):

Hazel отправляет свежую папку с картинками на дроплет Transmit
Hazel отправляет свежую папку с картинками на дроплет Transmit

Вся соль кроется как раз в дроплете Transmit, который автоматически загружает в заранее указанную папку наши картинки, а потом сам себя закрывает.

Чтобы сделать дроплет, нужно кликнуть правой кнопкой на настроенном FTP/SFTP/WebDAV подключении и выбрать соответствующий пункт из списка. Сам дроплет можно засунуть куда-то далеко в подполье, нам его больше видеть не обязательно. Каждые месяц в дроплете нужно будет обновлять название папки (месяц), чтобы все было по Фен-Шую :)

Создание дпроплета в Transmit
Создание дпроплета в Transmit

5. Быстроя расположение иллюстраций в статье

К этому моменту мои картинки уже на сервере. Чтобы оптимизировать и отправить их на сервер, мне потребовалось нажать всего 2 шортката.

Теперь осталось расположить их в статье. И Markdown разметка для этого просто идеальна.

Я копирую название первого скриншота, например, 01-new-screen-macosworld.jpg и начинаю набирать в нужном месте документа слово картинкоо. Замечательный TextExpander преобразует его в:

Расположение картинок в тексте при помощи TextExpander
Расположение картинок в тексте при помощи TextExpander

Как видите, название скриншота подставилось автоматически. Чтобы картинка отобразилась, мне надо только руками прописать название папки, в которой она находится. По желанию указать Alt и задать подпись. А дальше все просто. Я копирую эту конструкцию в нужные места и меняю 01 на 02, 03, 04 и т.д. Никакой войны с веб-интерфейсом сайта и временных задержек. Все быстро и просто.

В том, что картинки отображаются корректно, помогает убедится Marked 2. Он же экспортирует весь текст в HTML и копирует его в буфер обмена. Осталось только вставить текст в редактор WordPress и оформить всякие мелочи.

Проверка верстки в Marked 2
Проверка верстки в Marked 2

В завершение

Давайте ещё разок взглянем на процесс создания статьи от начала и до конца. Так:

  1. Я набрасываю простой черновик или идею в nvALT
  2. Пишу статью в iA Writer
  3. Оптимизирую иллюстрации при помощи этого workflow
  4. Они автоматически загружаются на сервер
  5. При помощи TextExpander расставляю их в статье
  6. Просматриваю результат в Marked
  7. Публикую

В качестве бонуса можете почитать как я извлекаю иконки Mac- приложений и iOS-приложений.

Share.