Типографика

Как найти шрифт по картинке: 6 быстрых и медленных способов

Сейчас я вас научу плохому.

Допустим, есть картинка

1*04BwGCyxkl3N__uKd3kw9g

и нужно найти шрифт, которым сделана надпись, или подобрать похожий по стилю и характеру.

Поиск по картинкам

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

1*PxvvgGyp0Mwnm1qYcbn9ZQhttps://www.google.ru/imghp?hl=ru

Исходную картинку загружаем через форму или кидаем на страницу поиска перестаскиванием.

Порой Яндекс отрабатывает лучше Гугла.
 
1*Fpo-6WM9oA88aM4845lC1whttps://yandex.ru/images/
 
Польза от поисковых систем следующая.

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

Кто знает, это дело такое. Шансы малы, но не настолько, чтобы их игнорировать. Тем более в безвыходной ситуации.

«Что за шрифт» на MyFonts.som

Идем на Майфонтс в раздел, где работает специально обученный робот.

1*9Xx0bbrYsQRAJeY3vsSSeQhttp://www.myfonts.com/WhatTheFont/

Мы роботу картинку, он нам — шрифты. Ну или ничего.

Но не спешите отправить ему картинку без проверки и доработки. Учтите, что:
Робот не понимает кириллицу. Перед загрузкой удалите с картинки все символы, которых нет в латинице. Кириллические символы, совпадающие с латинскими можно оставить.
У робота плохое зрение. Иногда он путает буквы с нестандартными формами. Поэтому иногда лучше кормить его по одной букве. Стоит найти самую характерную и начать с нее.

1*aRyDvui75x9ObIc2Kaepzg

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

1*RjBrA7aDCrcrwJpEubXDbAЕсли буква или знак (например, восклицательный) развалилась на две ячейки, перетащите одну картинку на другую и соберите букву назад.
 
Жмем Continue.

Робот постарается найти оригинал шрифта и предложит подходящие теги для дальнейшего самостоятельного поиска.

Поиск по ключевым словам на MyFonts.som

В поле поиска вбиваем по-английски слово или словосочетание, которое определяет инструмент рисования, характер шрифта или его классификацию.

Наше изображение выполнено как бы фломастером (brush pen). Еще тут подойдут слова типа «каллиграфия» (calligraphic), «от руки» (handwritten) и т.д. Здесь можно воспользоваться тегами, которые предложил робот.

1*Aw0owO8ckdd-foZbRo373Q
 
Можно искать термины по-отдельности или объединять их и комбинировать в одном запросе.

1*x-Cpanf0T_lEsJgjtMTP_g
 
Если обязательно нужна поддержка русского или другого языка, то указываем соответствующие настройки в полях расширенного поиска, отсекая мусор в результатах.

1*dowYLTRY1jdeWLENLzFIzA
 
Жмем кнопку Search и просматриваем результаты, попутно отмечая для себя подходящие варианты на замену.

1*nL4WLQXGugibGiXV_4CELA

1*ILX2_GQx9aiKD4pFnbqhiQ

1*KR8pnEqvBtOvLGpym6cgow

1*aA-v3AZoaP7sctJirE1MJA
 
На Майфонтсе много вариантов на замену исходному шрифту.

Да, на Майфонтсе шрифты платные. Но глупо же покупать целую гарнитуру, если надо сделать короткую надпись из нескольких символов для тестирования в своем проекте.
Находим нужный вариант и увеличиваем область просмотра примера до максимума. В отдельных случая можно еще сделать зум в браузере.

1*ltVONoMgAM4cX_zGIkVzkA
 
Скриним.

Растр

В Фотошопе скрин превращаем в смарт-объект. В смарт-объекте накладываем на него Gradient Map от нужного цвета к белому.

1*UTpuw_0mfKSuI2kLJHePYQ
 
В макете выставляем смарт-объекту режим наложения слоев, например, Multiply.

1*_HUvsIiwcf_Li6cmSpO16g
 
Для большинства случаев с белым фоном этого достаточно.

Кому этого мало, можете удалить из скрина белый цвет. Color Range…, тыкаете пипеткой в белый фон

1*X0WG-DJnNccdciS8ICxd1Q

 получаете выделение по цвету, инвертируете выделение, 

1*M6in1F_0ZtF52Yiz_IStCQ

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

1*LnvV2eXZg_Z8A56wmiSwHw

 и скрываете все белое под маску 

1*wnNzfuIzA7ztLfvJMvt5uw
 
В основном документе уже делаете со смарт-объектом все, что душе угодно, почти как с векторным шейпом.

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

Вектор

Если нужен вектор, то делаем трассировку в Иллюстраторе.

Открываем скрин из PNG-файла:

1*YAs6eQqjQOgPSnu3MuSFow
 
На панели Image Trace ставим Mode: Black and White, галочку Preview и аккуратно крутим Threshold и настройки в Advanced: 

1*QVAQJd77qDFe_NOfmh_arw

 Получив приемлемый результат, делаем надписи Expand 

1*niRJDozv-yebX8XE9p6Xgg

 и получаем вектор на все случаи жизни: 

1*djMFw93WeMOKs7PeigWNpw

Бесплатные шрифты

Возможно, что искомый шрифт — это не коммерческая история и делался по фану или не для продажи. Тогда нет смысла искать его в официальных магазинах.

За бесплатными шрифтами идем во Вконтакте, в группу «Бесплатные шрифты» или в раздел Шрифты сайта Infogra.ru.

1*mKkQxbA_bGcpQgwDNQ7fGghttps://vk.com/shrift 

Жмем на меню группы и выбираем «Поиск».

1*r9DjOFOt-NEAlKFR-lZZ7A
 
На странице поиска пользуем ключевыми словами на русском и английском и меню поиска справа:

1*Og-5VkP1RRCQ9i_bMl5vXQ
 
Здесь нет хорошего описания и тегирования для шрифтов, но что-то все же можно найти. Плюс можно просто полистать стенку группы в поисках чего-то подходящего.

1*Nhl31xmkxas3kWl8CgkozA

Палю тему тем, кто дочитал

Во Вконтакте можно найти и лицензионные шрифты с того же Майфонтса и других магазинов и словолитен.

Гуглите запрос типа: vk [имя шрифта] font download и найдете добрых нарушителей лицензий.

1*zi2Py5kPuEzn1sp8HJ3Rzw

1*wI_EVFQ87FIosA4JFh9Fqg

1*e4ffu5FbRA09QjbmalnjcA

Обмазывайся-не-хочу.

Медленный способ

Написать на форуме Майфонтса или залить картинку с вопросом в специальный альбом «Бесплатных шрифтов» с просьбой подсказать шрифт.

И ждать ответа как соловей лета.

Знаешь еще способы? Пиши в комментариях.

Источник: designpub.ru
Фото на обложке: ShutterStock