Представляйте скриншоты в мокапах браузера и устройств

Подготовьте скриншот

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

Используйте стиль браузера для веб-страницы или вида, похожего на рабочий стол. Стиль телефона или планшета подходит, когда важны сенсорная компоновка и вертикальное чтение. Это декоративные рамки: они не открывают браузер, не загружают URL и не меняют скриншот. Такое различие помогает честно описать готовое изображение.

1. Выберите один скриншот с ясным объектом и удалите конфиденциальное содержание.
2. Решите, лучше ли объясняет контекст рамка браузера, iPhone или iPad.
3. Убедитесь, что важный текст и элементы управления останутся видны внутри рамки.

Разместите рамку и выберите сцену

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

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

Читайте также: как добавить рамку iPhone к скриншоту

1. Выберите простой или собственный фон с достаточным контрастом.
2. Разместите декоративную рамку и оставьте поле вокруг внешнего края.
3. Сначала попробуйте прямую версию, затем сравните наклон в размере для публикации.

Проверьте читаемость и достоверность

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

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

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

1. Проверьте иерархию, затем текст и края рамки.
2. Сравните результат в полном размере и в размере публикации или статьи.
3. Если зрителю нужен контекст, добавьте короткую подпись за пределами скриншота.

Исправьте распространённые проблемы мокапов

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

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

1. Исправьте соотношение сторон до изменения масштаба.
2. Сначала улучшите читаемость кадрированием и иерархией, а потом добавляйте декор.
3. Один раз проверьте сохранённое изображение в реальном размере назначения.