Блог

Как снимать тёмные приложения, чтобы скриншоты читались

Опубликовано · тёмная тема, скриншоты, читаемость, пометки

Как снимать тёмные приложения, чтобы скриншоты читались

Тёмные интерфейсы наказывают небрежную разметку: тонкие штрихи исчезают, цвета спорят, подписи теряются. Настройки, с которыми снимок тёмной темы выживает.

Тёмные интерфейсы на экране выглядят чётко, а в документации превращаются в грязь. Тонкие серые рамки пропадают на белой странице, красная пометка сливается с тёмно-красным интерфейсом, а скриншот, вставленный в светлую презентацию, выглядит как чёрная дыра. Несколько решений исправляют почти всё.

Делайте пометки под тот фон, который есть

Стандартная палитра пометок рассчитана на светлые интерфейсы. На тёмном интерфейсе логику стоит перевернуть:

  • Берите светлые цвета для штрихов: белый, светло-синий или яркий зелёный. Тёмно-красный и тёмно-синий растворяются на тёмном фоне.
  • Используйте стиль текста «Обводка», а не «Стандартный». Обводка рисует контрастный контур вокруг каждой буквы, поэтому белая подпись выживает и на тёмной карточке, и на светлом пятне.
  • Увеличьте толщину на один шаг. Линия в 2 px, которая нормально читается на белом, кажется тонкой на фоне #1c1c1e.
  • Избегайте полупрозрачных выделений поверх тёмного текста. Маркер с низкой непрозрачностью поверх светлого текста на тёмном фоне ещё сильнее снижает контраст; выделяйте фон строки или используйте фигуру.

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

Сделайте рамку частью изображения

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

  • Обрежьте плотно, чтобы тёмная область явно была главным объектом.
  • Добавьте светлую подложку в редакторе изображений (Pro), когда снимок идёт в документ или презентацию. Светло-серая или белая рамка отделяет изображение от страницы и убирает эффект «чёрной дыры».
  • Добавьте мягкое скругление углов и тень в той же панели; на тёмных снимках тень работает сильнее, чем на светлых.
  • Держите одинаковое соотношение сторон во всём наборе снимков, особенно для слайдов.
ТЁМНЫЙ СКРИНШОТ НА СВЕТЛОЙ ПОДЛОЖКЕ · 1280 × 800

Выберите правильный момент для снимка

У тёмных интерфейсов часто есть переходные состояния, которые меняют контраст: подсветка при наведении, кольца фокуса, скелетоны загрузки. Снимайте то состояние, в котором есть нужная информация, а не то, что случайно оказалось под указателем.

  • Уведите указатель от элемента, который документируете, если только курсор не является частью замысла.
  • Дождитесь, пока анимации закончатся; снимок полупрозрачного уведомления бесполезен.
  • Если главное — подсказка, снимайте её открытой; замороженный кадр её сохранит.

Размечайте фигурами раньше текста

На тёмных интерфейсах текстовые подписи конкурируют с собственными подписями интерфейса. Предпочитайте:

  • Контур фигуры яркого цвета вокруг карточки или строки.
  • Номер рядом с элементом, а объяснение — под изображением.
  • Подсветку (Pro), чтобы затемнить остальное на насыщенном тёмном экране; она повышает контраст, не меняя палитру приложения.
  • Лупу (Pro) для крошечного значка состояния, ради которого и сделан снимок.

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

Маркер на тёмном интерфейсе

Проверьте результат там, где его будут читать

Скриншот, который хорошо выглядит в окне снимка, может провалиться на месте назначения:

  • В светлой теме чата тёмному снимку может понадобиться рамка, чтобы не сливаться с фоном сообщения.
  • В вики с тёмной темой светлым выглядит как раз светлый снимок; держите единый стиль для документа, а не для каждого снимка отдельно.
  • В печати тёмные фоны расходуют краску и прячут тонкие линии; используйте подложку или инвертируйте изображение только для печати.

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

Короткий чек-лист

Что проверитьПочему
Штрихи достаточно светлые?Тёмная палитра прячет тёмные цвета
Текст в стиле «Обводка»?Он выживает на насыщенных фонах
Изображение в рамке?Тёмные края исчезают на белых страницах
Состояние окончательное?Никаких полупрозрачных уведомлений и индикаторов
Курсор не мешает?Он конкурирует с интерфейсом
Оформление единообразное?Набор должен выглядеть как набор

Частые вопросы

Почему мои пометки исчезают на тёмных скриншотах?

У тёмно-красных, тёмно-синих и чёрных штрихов почти нет контраста с тёмным интерфейсом. Переключитесь на белый или яркий акцент, используйте стиль текста «Обводка» и увеличьте толщину линии на один шаг.

Стоит ли инвертировать тёмный скриншот для документов?

Обычно нет; инвертированный интерфейс выглядит непривычно, и цвета перестают совпадать с приложением. Лучше положите снимок на светлую подложку с отступом и рамкой — так он отделяется от страницы, но цвета остаются прежними.

Нужен ли Pro для подложек?

Да, фон изображения — функция Pro. Обрезка, пометки и закрепление снимка бесплатны; подложка и рамка входят в Pro.

Следующий скриншот — в одном сочетании клавиш.

macOS 14.4+ (Apple Silicon и Intel) · Windows 10+ (64-разрядная)