Для справки и руководств снимайте каждый экран одинаково, нумеруйте действия и экспортируйте все изображения одной ширины. В OpenScreenShot задайте точную ширину в пикселях в Масштаб в диалоге Экспорт, добавьте значки Номер шага для каждого действия и используйте Spotlight, чтобы указать читателю на нужный элемент управления. Шаблон имени файла вроде Docs/{title} сохраняет каждое изображение в папку внутри «Загрузок».
Сделать скриншот для руководства шаг за шагом
- Задайте окну браузера один и тот же размер для всех снимков статьи. Каждый раз используйте одну и ту же тему и масштаб.
- Снимите экран. Выделенная область или Снимок элемента в меню правой кнопки ограничивают изображение той частью интерфейса, к которой относится шаг.
- В Редактор поставьте Номер шага (
S) на каждый элемент управления в том порядке, в котором им пользуется читатель. - Добавьте Spotlight (
O) на важную область, когда на экране много другого содержимого. - Закройте примеры данных клиентов, реальные адреса электронной почты и API-ключи инструментом Размытие (
B) с заливкой Заливка. - При желании откройте Beautify в верхней панели, чтобы добавить отступы, скруглённые углы и тень.
- Нажмите Сохранить изображение. В диалоге Экспорт выберите PNG, введите ширину страницы в Масштаб, проверьте имя файла и нажмите Экспорт.
Все изображения одного размера
Читатели замечают, когда скриншоты в одной статье меняют размер от шага к шагу. В Масштаб выберите 25, 50, 100 или 200 % либо введите точную ширину в пикселях. Фиксированная ширина подгоняет все изображения статьи под колонку содержимого вашего сайта документации.
Включите Запомнить эти настройки в диалоге Экспорт, чтобы сохранить формат и качество как новые значения по умолчанию. Ширина в эти значения не входит, поэтому вводите её заново при каждом экспорте. Ширина сверх лимита холста Chrome отклоняется, поэтому расширение никогда не записывает пустой файл.
PNG сохраняет текст интерфейса чётким, потому что это формат без потерь. Используйте JPEG или WebP, только если ваша платформа документации ограничивает размер файлов.
Номера шагов, которые не сбиваются
Значки Номер шага считают сами: первый клик ставит 1, следующий — 2. Когда вы удаляете значок, остальные перенумеровываются, поэтому шаг можно убрать, не правя все номера после него. Номера на изображении должны совпадать с нумерованным списком в статье.
Используйте палитру из восьми цветов на клавишах 1–8. Редактор запоминает цвет, толщину штриха и кегль между сеансами, поэтому скриншоты для одной статьи сохраняют единый стиль.
Выделение и рамка
Spotlight оставляет одну или несколько областей подсвеченными и затемняет остальное. Вырезы бывают прямоугольными, скруглёнными прямоугольными или эллиптическими. Для длинной страницы настроек инструмент Cut (X) удаляет горизонтальные полосы, которые читателю не нужны, с живым предпросмотром перед применением.
Панель Beautify (под этим же названием она описана в документации) добавляет вокруг скриншота отступы, скругление углов, тень и фон. Рамка попадает в каждый экспорт и в буфер обмена. Выберите один пресет и используйте его для всех изображений документации.
Имена и папки для изображений
Откройте Настройки из окна расширения или из меню правой кнопки на значке панели инструментов, затем измените Шаблон имени файла. Нажмите на токен, чтобы вставить {date}, {time}, {title}, {domain}, {w} или {h}, и проверьте живой предпросмотр.
Добавьте /, чтобы сохранять в папку внутри «Загрузок». Например, Docs/{title} сохраняет каждое изображение в папку Docs с именем по заголовку страницы. Токен {title} заменяет символы, недопустимые в именах файлов, поэтому / в заголовке страницы не создаёт ещё одну папку. Диалог Экспорт показывает имя файла до сохранения, и его там можно изменить.
Ограничения
Скриншоты интерфейса устаревают, когда продукт меняется. Оставляйте заголовок страницы или URL в имени файла, чтобы находить и заменять старые изображения. Скриншот браузера показывает только содержимое страницы; адресной строки и панели инструментов браузера на нём нет.
Справка по экспорту и справка по настройкам перечисляют все параметры. Чтобы подготовить изображение для публикации, см. скриншоты для соцсетей.