Почему скриншоты 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 (меньший размер файла)

Варианты использования

  • Разработчики расширений подготавливают промо-изображения для списка Chrome Web Store, которые выделяют ключевые функции с аннотированным текстом
  • Команды продукта создают согласованные фирменные скриншоты для нескольких расширений или обновлений расширений
  • Фрилансеры и агентства быстро создают отполированные макеты для презентаций клиентов без открытия Figma или Photoshop

Советы

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