Почти год я работал над пользовательской документацией с большим числом скриншотов – несколько сотен на полуторатысячный документ в формате Markdown. В этом случае мне пригодились приёмы, о которых рассказываю ниже.

Вложенность. Для хранения изображений я создал структуру папок, и в каждой хранил скриншоты для соответствующего раздела. Например, папка для раздела “Сообщения” называлась s-messages.

Именование. Скриншотам внутри папки я давал имя папки и порядковый номер. Например, первое изображения для раздела “Сообщения” называлось s-messages_01.png, второе s-messages_02.png и так далее. Удобно, потому что не нужно придумывать осмысленное название для каждого.

Автоматизация. Довольно скоро я устал делать снимок, переименовывать файл, присваивать ему порядковый номер и сохранять в нужную папку. Это приводило к ошибкам. Поэтому я разработал скрипт на Python, который переносит файл в нужную папку, переименовывает и присваивает порядковый номер и копирует в буфер обмена полную ссылку на файл в формате Markdown. И ещё один скрипт, который избавляет папку от ненужных файлов и указывает на "битые" ссылки внутри документа.

Требования к скриншотам я изложил в отдельном руководстве по стилю. Да-да, в этом случае нужен style guide для изображений. В нём можно указать:
• параметры у изображения,
• визуальные эффекты и их настройки,
• очерёдность вставки – до или после поясняющего текста,
• поведение, если скриншот делится на две или более части. Например, если у окна есть прокрутка и не все поля помещаются в один снимок.
• тип снимка. Смотри ниже.

Снимки могут быть двух типов:

• фотографируется вся рабочая область приложения с использованием затенения или маски. Хорош тем, что пользователь всегда видит, в какую часть экрана смотреть. Не нужно искать кнопку или поле по всему экрану. Недостаток в том, что придётся переделывать все скриншоты, если появится элемент, одинаковый для всех снимков. Например, новый пункт главного меню или логотип в правой верхней части экрана. Ну или “дорисовывать” нужное с помощью библиотеки ImageMagick.

• фотографируется только описываемая область экрана. Тут всё просто – вырезал кусок из рабочей области и сохранил изображение. Недостаток подхода в том, что пользователь будет искать нужное по всему экрану. Да и вообще, куски изображений в разных разрешениях выглядят некрасиво.
Я использовал первый вариант.

Размер окна у приложения можно настраивать с помощью скрипта. В Windows можно написать скрипт на Visual Basic, в MacOS есть AppleScript, в Linux наверное можно написать скрипт на Python. В этом случае все снимки выглядят одинаково и понятно.