Прокрутите любой новостной аккаунт или ленту бренда, и большинство сообщений имеют общую форму: фотография, жирный заголовок, тонкая акцентная полоса, дата и ручка в углу. Это фотокарточки. Они выглядят спроектированными, потому что они построены из фиксированного макета, где меняются только слова и изображение, и именно поэтому команда может публиковать десятки в неделю, при этом каждая из них не выглядит по-разному.
В этом руководстве рассказывается о том, что делает карту читаемой в зависимости от размера канала, как размеры текста уменьшаются на телефоне, какие цвета соответствуют рекомендациям по контрастности, почему карты следует экспортировать как PNG, как адаптировать квадратную карту для других платформ и где находятся края конфиденциальности Генератор фотокарточек используется для пошаговых деталей, и каждая настройка, описанная ниже, является той, которую предлагает инструмент.
TL;DR: Фотокарта - это социальная графика, сделанная из шаблона: вашего изображения, заголовка и поддерживающего текста, помещенного в фиксированный макет. Генератор фотокарты имеет восемь шаблонов (классическая газета, современный жирным шрифтом, последние новости, кавычка, минималист, визитная карточка, градиентные новости и вертикальная цитата), 50 шрифтов Google, акцент, фоновые и текстовые средства выбора цвета, масштаб изображения и элементы управления положением, а также дополнительный логотип. Каждая карта экспортируется как 1080 x 1080 PNG, отображается в вашем браузере. Ваше изображение читается локально и не загружается, хотя шрифты загружаются из шрифтов Google. Это бесплатно, без регистрации.
Что такое фотокарта?
Фотокарта - это квадратное или прямоугольное изображение в социальных сетях, которое сочетает в себе фотографию с наложенным или соседним текстом, выложенным из многоразового шаблона. новостные агентства используют их для обмена заголовками, бренды используют их для объявлений, а создатели используют их для цитат. Шаблон исправляет типографику, интервалы и позиции; автор предоставляет контент.
Это разделение - это все. Шаблон один раз определяет дизайнерские решения: насколько велик заголовок относительно изображения, куда идет дата, сколько места окружает текст. Изменение слов не может разорвать эти отношения, поэтому лента карточек, сделанных из одного и того же шаблона, читается как одна последовательная публикация.
Какой шаблон выбрать?
Выбирайте по тому, что должна нести карта Каждый шаблон раскрывает только текстовые поля, которые использует его макет, поэтому панель контента меняется при переключении.
| Шаблон | Макет | Текстовые поля | лучше для |
|---|---|---|---|
| Классическая Газета | Большое изображение, область текста внизу | Заголовок, подзаголовок, дата, домен | Общие новости и сообщения в блогах |
| Современный смелый | Верхняя половина изображения, заголовок и сводка ниже, исправлено & quot;Читать далее" кнопка | Заголовок, подсубпозиция, дата | Объявления |
| Последние новости | Красная полоса заголовка, изображение, заголовок, тикер в стиле прокрутки | Заголовок, подсубпозиция, дата | Конфиденциальные обновления |
| Карта цитат | Цитируйте по затемненному фону фотографии | Заголовок (цитата), подзаголовок (атрибуция), дата | Притягивайте котировки, которыми у вас есть разрешение поделиться |
| Минималист | Образ в рамке с большим пробелом | Заголовок, подсубпозиция, дата | Простые заявления, даты событий |
| Карта функций | Изображение, перекрывающийся круглый логотип, полоса подножки | Заголовок, подзаголовок, дата, домен | Длинные статьи |
| Градиентные новости | Изображение с полным кровотечением, акцентный градиент, нижняя планка | Заголовок, категория, дата, домен | Истории, основанные на изображениях |
| Вертикальная цитата | Панель котировок слева, портретное изображение справа | Содержание (цитата), автор, обозначение, дата, домен | Цитаты с фотографией говорящего |
Большинство шаблонов имеют линию даты, а некоторые добавляют домен или поле дескриптора; любое поле может быть очищено Некоторые метки фиксированы в макете, например & quot;BREAKING NEWS& quot; на полосе "Последние новости" и & quot;Читать больше & quot; на современном жирном шрифте слот логотипа появляется только при добавлении логотипа; без него шаблон скрывает область логотипа, а не показывает пустую рамку.
Насколько большим должен быть текст на социальной карте?
Больше, чем он выглядит на вашем мониторе. карта разработана с шириной 1080 пикселей, но просматривается в телефонной ленте примерно на ширине экрана, а типичный телефон имеет ширину около 390 пикселей CSS. Это означает, что все на карте отображается примерно на 390/1080 = 36% от ее расчетного размера.
Вот что это делает с текстом размеров, которые используют шаблоны:
| Размер на карте 1080 px | Приблизительный размер в корме шириной 390 пкс | читабельность |
|---|---|---|
| 64-дюймовый заголовок | 23 шт | Очень ясно |
| 48-дюймовый заголовок | 17 шт | Очищать |
| Подсубпозиция или нижний колонтитул 32 шт | 12 шт | Читаемый |
| 24-х подробный текст | 9 шт | Маленький, требует внимания |
| метаданные 20 px | 7 шт | Трудно читать |
Арифметика просто размер × 390 /1080. для 48-пиксельного заголовка 48 × 0,361 = 17,3 пикселей, сравнимый с удобным текстом тела на телефоне. При 20 пикселях результат составляет около 7, поэтому даты и ручки на картах скорее декоративны, чем существенны. поместите в заголовок все, что должен видеть читатель, а не нижний колонтитул.
Это также устанавливает практический предел длины Заголовок, который завертывает в пять строк на 48 пикселей заставляет шаблон сжимать изображение или переполнять Цель для заголовка примерно от 6 до 12 слов.
Какие цвета следует использовать на фотокарточке?
Выбирайте цвета, которые сохраняют читаемость текста, в сравнении с тем, что находится за ним. Рекомендации по обеспечению доступности веб-контента устанавливают полезный ориентир: Критерий успеха WCAG 2.2 1.4.3 просит соотношение контрастности не менее 4,5:1 для обычного текста и 3:1 для большого текста, который WCAG определяет как минимум 18 баллов, или 14 баллов жирным шрифтом Социальный образ - это не веб-страница, но те же пороги описывают то, что могут читать люди с плохим зрением или тусклым экраном.
Генератор дает вам три цвета:
- Акцент цвета батончики, таблетки, градиенты и подсветка формы. он несет бренд.
- предыстор раскрашивает области, не охваченные изображением.
- Текст раскрашивает основную копию на шаблонах, которые ее используют; некоторые шаблоны устанавливают белый текст поверх акцентных панелей.
| Комбинация | Контрастное соотношение | Обычный текст (4,5:1) | Большой текст (3:1) |
|---|---|---|---|
Почти черный #111827 на белом #ffffff |
Около 17,7:1 | Пасс | Пасс |
Белый цвет с красным акцентом по умолчанию #D9232D |
Около 5,0:1 | Пасс | Пасс |
Белый на серединно-сером #999999 |
Около 2,8:1 | Неудача | Неудача |
Белый на светло-желтом #facc15 |
Около 1,5:1 | Неудача | Неудача |
Первые две строки - это генератор и #39;s по умолчанию. Вы можете проверить любую пару цветов вашего собственного бренда с помощью проверка контрастности цвета, и цветовое контрастное руководство объясняет, как рассчитывается соотношение.
Текст, помещенный непосредственно над фотографией, не имеет единого коэффициента контрастности, потому что фотография различается. шаблоны, такие как Gradient News, обрабатывают это с градиентом под текстом и тенью текста. когда вы выбираете фотографию для этих шаблонов, выберите один с более темной или спокойной областью, где находится заголовок.
Как сделать фотокарточку, шаг за шагом
- откройте фотокарточник и выберите шаблон из раскрывающегося списка Шаблон. Его образец текста загружается в поля контента.
- Замените текст в каждом поле. нажмите "Введите" внутри заголовка или поля контента, чтобы вызвать разрыв строки там, где вы хотите.
- Добавьте свое основное изображение: щелкните область загрузки, чтобы выбрать файл, или вставьте URL-адрес изображения в поле под ним.
- Отрегулируйте изображение с помощью ползунка Scale (от 0,5x до 2,0x) и ползунков положения X и Y (каждый от -200 до 200 пикселей) до тех пор, пока объект не сядет туда, где его обрамляет шаблон.
- Опционально добавьте логотип таким же образом. квадратное изображение логотипа лучше всего подходит для круглых и квадратных слотов логотипа.
- Откройте раскрывающийся файл "Шрифт", выполните поиск или фильтр по категориям (без засечек, засечек, дисплея, почерка или моноширинного) и выберите шрифт.
- Установите акцент, цвет фона и текста с помощью сборщиков цветов.
- Нажмите "Загрузить PNG". Файл сохраняется как
photocard-<template>-<timestamp>.pngтаким образом, повторяющийся экспорт никогда не переписывает друг друга.
Ваши настройки, текст и изображение сохраняются в браузере по мере работы, поэтому перезагрузка страницы возвращает карту. сброс очищает их и восстанавливает классический шаблон.
Почему карты загружаются как PNG?
Потому что карты в основном большие текст и плоский цвет, и этот контент сжимается лучше и выглядит чище как PNG, чем как JPEG. JPEG's сжатие с потерями работает в блоках 8 x 8 пикселей и отбрасывает мелкие детали, которые вокруг острых ребер букв проявляются как слабые ореолы и крапинки, часто называемые звонком. PNG хранит каждый пиксель точно используя сжатие без потерь, определенное в Спецификация W3C PNG, поэтому заголовок остается четким.
| формат | Сжатие | Острый текст | Плоские цветовые области | Фотографии |
|---|---|---|---|---|
| png | без потерь | Крисп | Маленький и точный | Большие файлы |
| неправильный | потеря | Гало по краям | Может показывать полосчатость и крапинки | Маленькие файлы |
Большинство платформ в любом случае повторно кодируют загрузки. Начиная с чистого PNG дает их кодеру наилучший возможный ввод. Если PNG с большой фотографией слишком велик для ограничения загрузки, Руководство по сжатию изображений покрывает как его сжать.
Как вы используете квадратную карту на других платформах?
Каждый шаблон экспортирует при 1080 x 1080, квадрат 1:1. это стандартный квадратный размер ленты в Instagram и Facebook, и он отображается без обрезки на большинстве лент. другие размещения хотят разные формы.
| Пункт назначения | Требуемый размер | С площади 1080 |
|---|---|---|
| Лента Instagram или Facebook | 1080 х 1080 | Используйте как есть |
| Портретная лента Instagram | 1080 х 1350 | Добавьте пространство сверху и снизу матовым штейном |
| Изображение в стиле ссылки LinkedIn или X | 1200 х 627 или 1600 х 900 | Обрезать до широкой полосы или выложить на широкий матовый |
| Миниатюра YouTube | 1280 х 720 | Обрезать до 16:9, затем немного увеличить |
| История Instagram | 1080 х 1920 | Положить на высокий матовый |
Обрезка теряет часть карты; матовый сохраняет все это Для миниатюры YouTube обрезка квадрата 1080 до 16:9 сохраняет полосу 1080 x 608 и удаляет 236 пикселей сверху и снизу. Увеличение этой полосы до 1280 x 720 - это шкала 1280 / 1080 = 1,19, небольшое увеличение. Если вы планируете это, держите заголовок рядом с вертикальным центром карты, чтобы урожай не прорезал ее.The обрезчик изображений в социальных сетях делает обрезку с предустановками платформы и руководство по изменению размера изображения объясняет, что расширение влияет на качество.
Чтобы вместо этого оставить всю квадратную карту на более высоком или широком холсте, поместите ее на фон с помощью Матовый Генератор, йо-
Ваши фотографии загружены?
Ваша фотография не загружается в Toolz. когда вы выбираете файл, браузер считывает его в память как URL-адрес данных, карта выкладывается на странице, и загрузка отображается локально библиотекой html2canvas, которая перерисовывает страницу 's HTML на холст. есть три детали сети и хранилища, которые стоит знать, хотя:
- Шрифты приходят из Google Fonts. Список шрифтов загружается с
fonts.googleapis.comитак, ваш браузер запрашивает у Google файлы шрифтов, которые Google описывает в своем документе Часто задаваемые вопросы о конфиденциальности шрифтов Google. Текст и изображение, которые вы добавляете, не являются частью этих запросов. в автономном режиме шрифты, которые еще не были загружены, возвращаются к шрифту по умолчанию. - URL-адреса изображений извлекаются из хоста. Если вы вставляете URL-адрес изображения вместо загрузки файла, ваш браузер загружает изображение с этого адреса, как и для любой веб-страницы.
- Работа сохраняется в вашем браузере. Ваш текст, цвета и изображение сохраняются в локальном хранилище браузера и #39;s, чтобы они пережили перезагрузку. на общем компьютере нажмите "Сбросить", когда закончите их очистку.
Общие проблемы и как их исправить
На загруженной карточке отображается шрифт, отличный от предварительного просмотра. Шрифт не закончил загрузку, когда вы нажали "Загрузить PNG", поэтому экспорт вернулся к шрифту по умолчанию. Подождите секунду или две после выбора шрифта, а затем снова экспортируйте.
Изображение, вставленное в качестве URL-адреса, отсутствует при загрузке. Для рендеринга удаленного изображения в загружаемый холст хост изображения должен разрешить использование между источниками с заголовками CORS, что является ограничением документация html2canvas примечания. многие сайты не отправляют их. загрузите изображение и загрузите его в виде файла вместо этого.
Изображение обрезано или имеет пустое место. Используйте ползунок Масштаб и ползунки положения X и Y. Масштабирование ниже 1,0x может выявить фон шаблона вокруг фотографии; масштабирование над ним обрезается плотнее.
Текст переполняет свою область. Заголовок слишком длинный для шаблона. Сократите его, или переключитесь на шаблон, который дает тексту больше карточки.
Карта сбрасывается после перезагрузки, или большие изображения не сохраняются. Браузеры ограничивают локальное хранилище несколькими мегабайтами на сайт, и большая фотография, хранящаяся в качестве URL-адреса данных, может превышать его. карта по-прежнему экспортирует; она просто может не пережить перезагрузку. Измените размер очень больших фотографий, прежде чем добавлять их.
Угловые скобки в тексте выглядят неправильно. Текст вставляется в шаблон в виде разметки, поэтому строка прерывает работу, что означает такие символы, как < можно прочитать как начало тега Избегайте угловых скобок в тексте карты.
Советы по картам, которые читают люди
- Ведите с одной идеей на карту Если ей нужно два заголовка, ей нужно две карты.
- Обрежьте фотографию так, чтобы ее тема не располагалась под заголовком вашего шаблона.
- Сохраняйте свой бренд постоянным: один и тот же шаблон, шрифт и цвет акцента в серии.
- Добавляйте альтернативный текст при публикации. Изображение представляет собой изображение слов для чтения с экрана, поэтому запишите заголовок и ключевые детали в текстовое поле платформы & #39;s alt.
- Только размещать цитаты и фотографии, которые вы имеете право использовать, и точно приписывать цитаты.
Альтернативы генератору карт шаблонов
- Общие инструменты проектирования такие как Canva, Figma или Adobe Express предлагают гораздо больше шаблонов, бесплатное позиционирование и командные библиотеки, обычно с учетной записью.
- Платформы новостей и социального планирования иногда включайте шаблоны фирменных карточек, привязанные к рабочему процессу публикации.
- Генераторы на основе кода это отображает HTML на изображения на сервере, что позволяет сайтам автоматически создавать карты для каждой статьи.
Инструмент шаблона браузера соответствует золотой середине: быстро, без учетной записи, согласованный вывод, и ваши изображения остаются на вашем компьютере. Для выполнения соответствующих шагов перед публикацией Изображение Водяной маркер добавляет логотип или авторство к фотографии, и центр инструментов социальных сетей перечисляет полный набор.
