Почему скриншоты Chrome Web Store важны?

Скриншоты Chrome Web Store - это первое визуальное впечатление, которое получают потенциальные пользователи при просмотре списков расширений. Google позволяет загружать до пяти промо-изображений с рекомендуемым разрешением 1280×800 пикселей. Хорошо оформленные скриншоты с четкими заголовками, фирменными цветами и макетами устройств могут значительно увеличить количество установок, показывая пользователям, что делает расширение, прежде чем они решат его загрузить. Многие успешные расширения используют аннотированные скриншоты - комбинируя реальные снимки интерфейса с промо-текстом и отполированными фонами - вместо простых скриншотов.

Описание инструмента

Этот инструмент позволяет создавать профессиональные, готовые к загрузке промо-скриншоты для списков Chrome Web Store без использования программного обеспечения для дизайна. Загрузите скриншот вашего расширения, добавьте заголовок и подзаголовок, выберите шаблон макета и настройте фон, типографику и рамку устройства. Результат - идеальное по пикселям изображение, соответствующее требованиям размера Chrome Web Store, которое можно загрузить в формате PNG или JPEG.

Возможности

  • Предустановленные и пользовательские размеры - выберите Chrome Web Store (1280×800), HD, Full HD или введите любые пользовательские размеры
  • Шаблоны макетов - расположите текст и изображение в четырех вариантах: текст сверху, снизу, слева или справа относительно скриншота
  • Рамка браузера - оберните скриншот в реалистичную рамку браузера с кнопками управления в стиле macOS и адресной строкой

Объяснение параметров

Параметр Описание
Размер вывода Предустановленные размеры (1280×800, 1280×720, 1920×1080) или пользовательская ширина и высота
Макет шаблона Быстрые предустановки, которые расставляют текст и изображение: разделение сверху/снизу или слева/справа
Рамка устройства Оберните скриншот в рамку браузера или отобразите его без рамки
Позиционирование текста Управляйте вертикальным и горизонтальным размещением заголовка и подзаголовка, а также смещением в пикселях
Позиционирование изображения Управляйте вертикальным и горизонтальным размещением скриншота, а также смещением в пикселях
Масштаб скриншота Измените размер скриншота от 30% до 100% доступной площади
Тип фона Однотонный цвет или линейный градиент между двумя цветами
Направление градиента Шесть направлений, включая вертикальное, горизонтальное и диагональное
Шрифт Восемь семейств шрифтов, включая System UI, Arial, Georgia и моноширинные варианты
Вес шрифта Шесть весов от Regular (400) до Black (900)
Размер шрифта заголовка / подзаголовка Независимые ползунки размера для заголовка (24-160 пикс.) и подзаголовка (16-100 пикс.)
Прозрачность подзаголовка Управляйте тем, насколько заметен подзаголовок (20-100%)
Цвет рамки Установите цвет рамки браузера при выборе рамки браузера
Показать тень Переключите тень под скриншотом или рамкой устройства
Скругленные углы Добавьте скругленные углы к скриншоту, когда рамка устройства не используется
Формат вывода Экспортируйте как PNG (без потерь) или JPEG (меньший размер файла)

Советы

  • Используйте градиентный фон с тонкими различиями цветов для профессионального вида - большие скачки цвета могут отвлечь внимание от самого скриншота
  • Держите заголовки короткими (3-5 слов) и увеличивайте размер шрифта, чтобы они оставались читаемыми в масштабе миниатюр в результатах поиска Web Store
  • При использовании рамки браузера установите цвет рамки, соответствующий фону, для бесшовного внешнего вида
  • Экспортируйте как PNG для максимального качества при загрузке в Chrome Web Store; используйте JPEG только если вам нужен меньший размер файла для других целей