Как сделать шрифт из многоцветного битмапа?

очевидный fontforge. выбираешь трешолд, чтобы тени букв были белые, как и остальной фон, а сами буквы полностью чёрные. трассируешь, масштабируешь, позиционируешь — готово. получатся буквы без теней. но они ведь и не нужны. их всегда можно добавить в любом граф. редакторе. можешь попытаться, конечно, сделать svg-шрифт, но они нигде почти не поддерживаются. вот там вот можно и цвета для каждой буквы отдельно и тени и прозрачности и всё шо хош. но лучше первый варик. если уж так нужны тени, то можешь попробовать каким-нибуть халфтоном их изобразить. но увеличь разрешение картинки перед этим, чтобы трассировщик потом понял, что там круглые или квадратные точки.

svg-шрифт, но они нигде почти не поддерживаются

Каким образом сделан данный символ: 🍎 ? У меня шрифт по умолчанию отрисовывает его как 3-цветное яблоко. Будет ли он поддерживаться в Photoshop CS2? Photoshop CS6? Gimp? Inkscape? Krita? sK1?

Gimp?

2.99.4. Скопипастилось без проблем, автоматически подцепило мозилловский шрифт.

Krita?

4.0.1. Нужный шрифт не цепляется и вообще не виден, надо выставить шрифт вручную. Noto Color Emoji — не то, но сработало, Symbola — монохромный.

Inkscape?

0.92. Яблок нет, даже если вручную выставить шрифт Noto Color Emoji.

эмоджи — это opentype. внутре тот же самый svg. в браузерах поддерживается, да, насчёт остального — сомневаюсь. разве что в фотошопе новом.

в фотошопе новом.

Новом — это с какой версии? SVG в OTF добавили в 2015 году. CC 2017, вышедший в 2016-м поддержку имел. А был ли соответствующий апдейт на CS6?

P.S.

насчёт остального — сомневаюсь.

Как я уже писал, последние Гимп и Крита нормально эти шрифты показывают.

Если английский вариант ещё туда-сюда, то в кириллице уже просто трэш какой-то.

Зачем тебе такое?

Есть речь про TrueType, то там куча вариантов для битмап-шрифтов. Cамый популярные это sbix и CBDT.

Как сделать? Пожалуй через fonttools. Но это очень низкоуровневая борода. Если нужно мышкой накидать - плати $500 за FontLab.

Gimp? Inkscape? Krita? sK1?

Они freetype используют.

Зачем тебе такое?

Интересует, как произвольный битмап с многоцветными картинками превратить в OTF. Для примера привёл битмапы с многоцветными буквами.

P.S. И что конкретно не нравится? Помимо «м».

Они freetype используют.

И какой из этого следует вывод? Гимп смог. Крита смогла, но символ взяла из другого места. Инкскейп не смог. Не прослеживаю закономерности.

Cамый популярные это sbix и CBDT.

Взять битмапы, намасштабировать для всех размеров, сделать из этой пачки битмапов шрифт?

https://github.com/fonttools/fonttools

Делает шрифт из XML? А как сделать XML, который ей скормить? Перегнать все битмапы в 32-битные PAM, отрезать заголовки, перегнать в 16-ричные цифры и вставить в XML?

ВГ – одна толщина, ТПШЩ – другая. Одни буквы завалены сильно, другие как-то, третьи не завалены вовсе. ЕЁ мельче остальных. Затруднительно выделить какие-либо общие элементы, кроме тех групп букв которые были нарисованы копи-пастой.

Если это должно символизировать «буквы вырезали спьяну маникюрными ножницами», тогда другое дело.

В данном конкретном случае «многоцветность» это просто добавленная тень, которую действительно проще добавлять как эффект.

Было бы что-то более эстетичное или практичное, то по совету перво-анонимуса можно было бы слепить что-то за два вечера.

Если это должно символизировать «буквы вырезали спьяну маникюрными ножницами», тогда другое дело.

По замыслу авторов это должно имитировать иероглифы, которыми главный герой игр Ace Attorney заявляет протест.

В данном конкретном случае «многоцветность» это просто добавленная тень, которую действительно проще добавлять как эффект.

Убедили.

это должно имитировать иероглифы

Хмм… Ни за что бы не догадался.

Как-то вот так? https://rugraphics.ru/sites/default/files/img-for-teaser/shrifty-v-yaponskom-stile.jpg

https://rugraphics.ru/sites/default/files/img-for-teaser/shrifty-v-yaponskom-stile.jpg

Там именно начерчено жирными мазками и не очень аккуратно: https://aceattorney.fandom.com/wiki/Objection!

Битмап глифа выдирает freetype. Затем harfbuzz правильно расставляет глифы (одного шрифта). Затем pango в GTK и QtGui в Qt их рисуют.

Крита смогла, но символ взяла из другого места

Потому, что Qt использует другой алгоритм для font fallback.

Инкскейп не смог.

Это проблемы самого Inkscape.

Не прослеживаю закономерности.

А её и нет. Каждый волен делать что хочет. Стандарта для отрисовки ШГ не существует.

fonttools может перегнать существующий шрифт в XML. То есть берём шрифт с emoji - «распаковываем» - редактируем - «запаковываем». Работы валом, но иначе никак.

Можно ещё FontForge потыкать, но он больно наркоманский. Или заплатить за редактор ШГ для мака.

Ага... Ну, ладно...

На мой взгляд «оригинальная английская версия» (кто ж поймёт что там на самом деле оригинал?) содержит скорее ближневосточные элементы, чем дальневосточные. «j» так почти цельнотянутая у наших аравийских или персидских братьев.

Если цель векторизации в том, чтобы затем «легко» делать другие надписи узнаваемо стилизованные под эту, то «всё плохо».

Подход использованный по ссылкам из стартового сообщения порочен и убог. Если предположить, что в оригинале текст не был нарисован вручную, а использовался какой-то готовый шрифт, то очевидно, что такой шрифт выглядел существенно иначе чем в конечном результате. Текст был трансформирован: размещён по кривой и «перспективно» искажён или вписан в какую-то «кривую трапецию», буквы были сдвинуты друг на друга и добавлена обводка и тень.

Открути всё это назад и получишь шрифт без левого наклона и с буквами «стабильного» размера и толщины.
Но. ;)
Текст «просто набранный» таким шрифтом не будет достаточно для узнаваемости похож на оригинал. Чтобы стало похоже придётся навернуть обратно все отмотанные трансформации (и возможно использовать совпадающие цвета, хотя может быть и чёрный + серый для тени или наоборот тоже будут узнаны «ценителями»).

Взгляни на постер «Back to the future». Супержирный шрифт без выкрутасов. Надпись выполненную этим же шрифтом никто не «опознает», даже если написать этот же самый текст.
И тут приключается довольно близкая ситуация: нашлись «специалисты» сделавшие шрифт, в котором буквы... завалены влево и погнуты =)
Вот тут такого типа шрифтом сделаны заголовки разделов на странице: https://boomstarter.ru/projects/616093/izdadim_komiksy_nazad_v_buduschee_na_r...

Шрифт забавный, но тому, для кого это похоже на постер или кадры с названием из фильма стоит сходить проверить зрение.

Сам ты наркоманский!

Но за svg-cleaner большое спасибо =)

Если предположить, что в оригинале текст не был нарисован вручную, а использовался какой-то готовый шрифт

Он именно был нарисован.

Он именно был нарисован.

Но «идея» ведь наверное не в том, чтобы ручками рисовать каждый раз заново?

очевидный fontforge.

выбираешь трешолд,

Где его выбирать в FontForge?

Сделал несколько десятков чёрно-белых битмапов — по одному для каждого глифа, но при попытке импортировать все сразу получаю ошибку на 2-м файле: «Bad image file», хотя по одному всё импортируется нормально. Если выбрать «Image Template», ошибка будет «Bad image file, not a bitmap» и всё зависнет намертво. (Чтобы развисло, нужно закрыть диалоговое окно, открываемое под основным окно FontForge, поэтому недоступное.)

Лечится? Или только импортировать по одному?

RazrFalcon, frob, вам тот же вопрос.

Готовые картинки я в FF последний раз обводил довольно давно. Если правильно помню, затягивал их самописным PE-шным скриптом.

Вот тебе несколько ортогональных советов… =)

Импорируй по отдельности две-три буквы и попробуй их превратить в глифы. Выбери такие, чтоб из них можно было чего-нибудь написать… «мама» или там «ололо». Убедись, что получается трэшак и перейди к следующему более полезному делу по списку.

Если речь всё ещё о векторизации того, что ты привёл в качестве примера, то послушай совета: не работай на мусорную корзину. Из такого «исходного материала» по-любому получится только ейный наполнитель. Единственное применение может быть в том, чтобы иметь возможность при чьём-то заявлении, что нечто «ШГ» сказать: «Это ШГ? Ха-ха-ха! Вот посмотрите на настоящее ШГ!» и предъявить.

Если очень хочется, то я бы наверное поступил примерно так. Взял Криту, поиграл с кистями и попытался бы нарисовать похожий нормальный «рукописный» шрифт. Без левых наклонов, поворотов и прочих искажений. (Можно и в инкскейпе попробовать – если хорошо пойдёт, то и с векторизацией будет проще.) В случае достижения удовлетворительного результата – оцифровал бы полученное.

Хехехе… Нашлось на диске вот такое поделие… А рядом ещё «переименовыватель» на баше, чтоб «А.bmp» в «affii10017.bmp» превращать и так далее.

Дата последнего обновления: 23 января 2002 года.

И всё это для «китайского» шрифта :)

#!pfaedit
New();
Reencode("KOI8-R");


/* i = 17;

while ( i<50 )
    a = "afii100" + i;
Print(a);
    Select(a);
    n = a + ".bmp";
Print(n);
    Import(n);
    i = i + 1;
endloop

Select("afii10017","afii10049")
*/
Select("afii10017");
Import(afii10017.bmp);
Autotrace();

Save("new.sfd");
Close();
Quit()

трешолд выбери в граф редакторе, чтобы избавиться от теней (вооще, такое чувство, что png переделана из какого-то зашакаленного джипега). потом разбей картинку на буквы, каждую отдельно импортируй в fontforge и выбери для каждой autotrace. это, конечно, довольно муторно, учитывая, что надо ещё будет подгонять размеры, положение, метрики.

но есть второй вариант. импортируй оригинальную цветную png в инкскейп, в котором предварительно создай новый документ из шаблона «typography canvas», трассирни её с нужным трешолдом (в инкскейпе его можно регулировать), открой панель /text/svg font editor… и насоздавай там глифов в новом шревте под каждый контур. понадобятся, правда, некоторые навыки работы с векторкой, типа «разбить контур», «объединить контуры» и т.п. но всё же в инкскейпе это делать одно удовольствие. сами контуры, я так понел, можно удалять после того как создашь глиф. потом сохрани svg, открой fontforge и импортируй туда свой svg-шривт. только я так сам не делал, а нашёл способ в этой статье. в целом я подозревая, что в инкскейпе это будет делать проще.

если бы сетка глифов в оригинальном пнг была регулярная, то можно было бы вообще легко скриптануться, так как формат svg-шрифта довольно простой. но увы. хотя, вместо создания svg-шрифта, в инкскейпе можно сделать такую сетку, где всё расставить красиво, а потом скриптом перевести её в svg-шрифт, подправляя координаты или просто «извлекая» глифы из трансформированных групп. ну или может слоями как-то.

кириллический вариант шрифта, кста, какой-то уж совсем нелепый.

но ты, прежде чем делать шрифт, всё же подумай, так ли он тебе нужен, может проще те пару надписей, что ты планируешь им написать, проще вручную составить и не париться со шрифтом. м? потому что из такого материала навряд ли что-то хорошее получится и всё равно потом каждый раз в надписях будешь кернинги поправлять. я те отвечаю.

но есть второй вариант … в инкскейпе … насоздавай там глифов

Так и попробовал, когда не смог импортировать несколько битмапов сразу. FontForge отказывается понимать полученные SVG.

разбей картинку на буквы, каждую отдельно импортируй в fontforge и выбери для каждой autotrace

Так в итоге и сделал. С оговоркой, что potrace не работает, если фон небелый, а глиф нечёрный.

кириллический вариант шрифта, кста, какой-то уж совсем нелепый.

Большую часть переделал.

отказывается понимать полученные SVG

А ты их svg-cleaner-ом почистил?

А ты их svg-cleaner-ом почистил?

Отказывается принимать SVG создаваемые potrace-ом из битмапов. Пропущенные через Inkscape и сохранённые как «plain SVG», как выяснилось, читает нормально.

любой векторный редактор и ручками обводить буковки.

каждую отдельно импортируй в fontforge и выбери для каждой autotrace

Так в итоге и сделал.

жесть, конечно. ты, походу не понял, что надо импортировать svg-шрифт, точнее даже не импортировать его, а прямо открывать в fontforge. у меня всё прекрасно открылось. с небольшими исправлениями глифов и редактированием метрик на всё ушло полтора часа. результат: https://i.imgur.com/FdhN1fh.png

я в инкскейпе трассирнул сразу всю картинку, потом создал пару глифов в панели редактирования svg-шрифта, сохранил документ и открыл его в «блокноте», там вручную накопировал svg-тегов для глифов (потмушто так быстрее, чем в инкскейпе), потом обратно открыл файл в инкскейпе и для каждого глифа указал свою кривую из результата трассировки, через ту же панель. сохранил и закрыл инкскейп. открыл fontforge и в нём открыл свой файл. там уже поправил метрики и бейзлайн. пары не расставлял, конечно. нафиг оно мне надо :)

скачать архив с исходниками.

ты, походу не понял, что надо импортировать svg-шрифт, точнее даже не импортировать его, а прямо открывать в fontforge.

У меня глаза быстро устают от мелкого и неразборчивого интерфейса Инкскейпа. Поэтому я порезал битмапы в Гимпе, сконвертировал их в SVG potrace-ом и пытался грузить в FontForge. Безуспешно. Опыта ручной правки SVG также нет.

http://s000.tinyupload.com/index.php?file_id=08686790247079591493

Спасибо. Не возражаешь, если на Гитхаб выложу под CC0? Когда кириллицу добавлю.

да выкладывай, конечно, мне даже приятно будет :)

только, раз это был просто тест, то я сильно не старался и, на мой взгляд, там ещё много чего можно улучшить.

может тебе ещё пригодится такая неочевидная информация: в svg-документе базовая линия смещена на 270 единиц, то есть, после импорта svg-шрифта в fontforge, надо сместить глифы на -270 (минус двести семьдесят) единиц по оси y (игрек).

после импорта svg-шрифта в fontforge, надо сместить глифы на -270 (минус двести семьдесят) единиц по оси y (игрек).

Я скопировал все теги <path в секцию <font, заменил <path на <glyph, добавил параметры glyph-name и unicode. В результате шрифт нормально импортируется, но все глифы получаются отражённые от горизонтальной оси. То есть, все координаты Y нужно вычитать из какой-то величины. Из-за чего так получается?

там у тебя где-то может быть трансформация на группе, например, или на слое. я не знаю точно, над смотреть. но оно в принципе и не страшно, в fontforge можно трансформировать глифы пачкой. выделяй все, которые надо перевернуть и нажимай ctrl+\, там в диалоге уже сам сообразишь. выбирай flip или как там.