Обложка статьи должна сохранять тему и бренд в карточке блога и на маленьком экране. Изображение, которое хорошо выглядит целиком, может потерять заголовок при обрезке. Подготавливайте композицию под фактические места показа, а не только под исходный файл.
Определите обязательные элементы
В учебном примере статья посвящена мобильной форме. Обложка содержит условный экран телефона, короткую подпись темы и знак студии. Важные элементы находятся ближе к центральной области, а край используется для декоративного фона.
Для материалов Perkova&Perkova сохраните фирменное оформление, брендировку и водяной знак. Он должен быть заметен, но не перекрывать смысловую деталь. Не используйте ложную клиентскую фотографию или неподтверждённый результат в изображении.
Проверьте все места показа
- Найдите карточку материала в фактическом блоке блога.
- Определите её соотношение сторон на компьютере и телефоне.
- Подготовьте исходник с запасом по краям, чтобы нужная область выдерживала обрезку.
- Загрузите изображение в источник карточки.
- Опубликуйте и проверьте список и сам материал.
Для обычной страницы проекта обложка списка берётся из «Бейджика» в настройках страницы. После его замены проверяют карточки, которые используют эту страницу. Для «Потока» редактируют изображение соответствующего поста; это другой источник данных, поэтому изменение бейджика обычной страницы не обновляет автоматически все статьи потока.
Управляйте кадром
Если объект обрезается, измените композицию файла или параметры изображения выбранного блока. В галерее Zero Block Cover заполняет область с обрезкой, Contain сохраняет исходный формат целиком. Для карточки блога проверяйте её собственные настройки, не переносите параметры галереи вслепую.
Не размещайте длинный заголовок только внутри картинки. Название статьи должно оставаться обычным текстом в карточке. Короткая надпись на обложке может поддерживать тему, но не заменяет доступный заголовок.
Проверьте размер и читаемость
Загружайте изображение, достаточное для реального показа, и оптимизируйте вес без заметного разрушения текста и знака. Сравните исходник и сжатый вариант. Универсальный размер файла не гарантирует хорошую скорость всей страницы: проверяйте фактическую загрузку.
На телефоне посмотрите карточку в обычном масштабе, затем откройте статью. Должны узнавать одну тему и один бренд. Проверьте альт-текст по назначению изображения и его отсутствие в декоративных случаях по реальной реализации.
- Пропал водяной знак: перенесите его внутрь устойчивой области кадра.
- Тема не читается: сократите надпись и сохраните текстовый заголовок.
- В карточке старая картинка: проверьте источник данных и публикацию.
- После сжатия буквы расплылись: измените параметры экспорта.
Дополнительно полезны каталог карточек и превью внешней ссылки. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.