Как сделать мем: Impact, подписи и размеры на выходе
Откуда взялся белый Impact с чёрной обводкой, какой толщины должна быть обводка и в каком размере сохранять картинку под каждую площадку.
Мой первый мем я собирал в фотошопе минут двадцать, и он всё равно выглядел неправильно. Белый текст, чёрная обводка, нужный шрифт. Но обводка была в волосок толщиной, подпись висела слишком высоко над нижним краем, и в итоге это читалось как скриншот чьей-то ошибки. У классического вида есть правила. Почти все они тянутся от шрифта, который старше интернета.
Почему в мемах Impact
Джеффри Ли нарисовал Impact в 1965 году для шеффилдской словолитни Stephenson Blake. Тридцать лет это был обычный акцидентный шрифт для плакатов и заголовков. Потом Microsoft включила его в пакет Core fonts for the Web (1996), и Impact оказался почти на каждой машине с Windows, а остальным его раздавали бесплатно.
Вся история — про случайность распространения. К моменту, когда картинки с подписями расползлись по форумам, Impact был единственным жирным узким шрифтом, который уже стоял у всех. Эстетику никто не выбирал.
Загвоздка сегодня в том, что ни в iOS, ни в Android его нет. Мем, собранный в браузере телефона, подставит какой-нибудь другой узкий шрифт. Поэтому в генераторе мемов рядом с Impact лежат Arial Black и Verdana: честнее дать выбор, чем делать вид, что первый вариант работает везде.
Всю работу делает обводка
Белый текст на фотографии нечитаем примерно в половине случаев. Небо, снег, светлая рубашка, пересвеченное окно — всё это съедает белые буквы.
Чёрная обводка спасает, но только если она достаточно толстая. Обводка в один пиксель на картинке шириной 1200 пикселей исчезнет сразу же, как только «Инстаграм» пережмёт файл. Правило, которое стоит запомнить: толщина обводки примерно одна двенадцатая от высоты прописной буквы. На буквах в 90 px это около 7 px. И рисовать надо сначала обводку, потом заливку поверх, иначе контур вгрызается в буквы и тонкие места слипаются в кляксы.
Короткая подпись выигрывает
Две строки. Ну три. Дальше шрифт приходится уменьшать, а уменьшенную подпись в ленте никто не читает — картинка там размером с ноготь.
Если в верхней строке понадобилось придаточное предложение, режьте. Сверху завязка, снизу развязка, а связь между ними держит сама картинка. Это вся грамматика формата, и с 2008 года она не поменялась.
В каком размере сохранять
Исходник почти всегда годится как есть. Всё, что больше примерно 2000 px по длинной стороне, просто утяжеляет файл: площадка всё равно пережмёт. Ориентиры:
- лента «Инстаграма»: 1080×1080 квадрат или 1080×1350 вертикаль
- картинка в ленте X: 1600×900
- «Телеграм» и WhatsApp: любой разумный размер, оба жмут жёстко
- Reddit: исходное разрешение, здесь обращаются мягче всех
Сохраняйте в PNG, если есть возможность. JPEG на 80% качества оставляет вокруг чёрной обводки заметную кашу — ровно там, где глаз её и ловит.
Из браузера ничего не уходит
Фотография декодируется через Canvas API и рисуется на месте. Раз нет загрузки, нет и копии на чужом сервере, а в угол готового файла ничего не впечатывается. Закрыли вкладку — картинки на странице больше нет.
Закиньте фото в генератор мемов, впишите строку сверху и строку снизу и заберите PNG.