Как по картинке определить шрифт – Как определить шрифт по изображению

Содержание

Как определить шрифт?

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

MyFonts — определяем шрифт по изображению.

Первый и самый примечательный из них сервис от MyFonts, который позволяет определить шрифт по изображению. Для его использования Вам понадобится файл изображения (PNG,JPG, TIFF и т.п.), c искомым Вами шрифтом. Вот некоторые советы по подготовке данного файла:

  • следует разъединить буквы, если они касаются друг друга;
  • если изображение цветное, переведите его в оттенки серого;
  • оставьте одну горизонтальную строку с 50 символами или менее;
  • постарайтесь использовать изображение с высотой букв от 100 пикселей;
Подготовка изображения

Для нашей цели мы выбрали логотип сервиса Flickr, а для его обработки будем использовать Pixlr (работа с редактором графики онлайн). Обработка легкая и Вы справитесь за несколько шагов:

1. Сохраняем логотип flickr на ПК или копируем ссылку на него.

2. Открываем его в онлайн редакторе

3. Обесцвечиваем рисунок (получаем оттенки серого) с помощью команды Desaturate, как показано на скриншоте ниже:

4.  Обрезаем лишние символы с помощью инструмента «Crop» — 

5. Если логотип маленький, можно немного увеличить его в пункте Image-Image Size. Сохраняйте пропорции и не увеличивайте слишком сильно 30-50 процентов максимум.

6. Чтобы добавить резкости используйте фильтр в пункте «Filter-Unsharp mask…» и увеличьте контраст в пункте «Adjustments — Brightness&Contrast». Обычно Яркость («Brightness») уменьшают, а контраст увеличивают.

С помощью этих несложных манипуляций получаем наш новый исходник для определения шрифта:

Конечно,  в качестве мы потеряли, но для работы подойдет лучше.

Работа с сервисом What the font

Для работы с сервисом нужно загрузить наше изображение и нажать кнопку «Continue» (далее). Можно просто указать ссылку на изображение логотипа, но результат может оказаться неточным. Смотрим пример ниже:

На следующем этапе необходимо заполнить литеры, которые не определились или определились неверно и нажать «Далее»:

После некоторого времени мы получим результаты поиска и сможем выбрать на глаз наиболее подходящий шрифт из списка. В нашем случае это — Frutiger 75 Black или Les Tres N2.

Недостатки сервиса:

  • Не все шрифты можно найти по изображению.
  • Нельзя определить кириллический шрифт.

Определить английский шрифт на Myfonts

Определение шрифта по внешним признакам

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

Определяем шрифт с Identyfont

Сервис располагает почти 8000 шрифтов и предоставляет удобный инструмент по их фильтрации. Для распознания шрифта используются основные признаки, начиная с засечек (как Times New Roman) и оканчивая особенностями написания литер. Процесс фильтрации по засечкам показан на рисунке ниже:

Выбор осуществляется по нажатию на иконку. Далее необходимо указать расположение хвостика буквы «Q»,  закрыта или открыта заглавная «P», как выглядит знака доллара и т.д. Общее количество шагов — 8.

Результаты отображаются слева, а наиболее похожий шрифт по центру:

Определить шрифт по внешним признакам на Identyfont

Далее мы рассмотрим ещё несколько сервисов и способ определения русских шрифтов.

Определяем шрифт с Linotype

Подобрать шрифт по внешним признакам также можно с помощью сервиса Linotype. Вам будет предложено 11 вопросов для идентификации. Выбор немного меньше, чем у предыдущего сервиса, но тоже внушает доверие — больше 3000 шрифтов в коллекции.

Определить шрифт с помощью Linotype

Сервис определения шрифтов от  Bowfin

Сервис компании BowfinPrintworks позволяет с достаточной точностью определить шрифт с засечками, все признаки (10 штук) они решили разместить на одной странице. Вам необходимо выбрать совпадения и нажать кнопку Search (Поиск) внизу.

Определить шрифт с засечками онлайн

Поиск шрифта на Fonts

Следующий продвинутый поиск шрифтов по внешним атрибутам — это сервис от Fonts.com. Принцип работы этого поиска такой же,  как и у трех предыдущих — пошаговый выбор признаков шрифта. В отличие от других — ресурс очень развит и содержит в базе более 160 000 шрифтов. Идентификация шрифта проходит в 12 шагов.

Распознать шрифт на Fonts

Все описанные сервисы действительны для латинских шрифтов и не работают (работают некорректно) с кириллицей.

Что делать если шрифт распознать не удалось нигде?

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

Как определить шрифт на сайте?

Во многих случаях достаточно выделить фрагмент текста и просмотреть его код — нажимаем правую клавишу мыши и ищем пункт «Просмотреть код элемента». Показываем на примере Google Chrome и сайта Google:

Нужно выделить в коде интересующий нас элемент и посмотреть его свойства справа. Нас интересует пункт font-family, его значение и является искомым семейством шрифтов. В текущем случае — это Arial, Serif. Также шрифт может быть указан для всех элементов в теге <body>  как  параметр «font».

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

Некоторые мастера прячут шрифт в специальный скрипт — Cufon, в таком случае необходимо использовать просмотр скриптов сайта. Делается это так:

  • Открываем просмотр кода элемента
  • Проверяем,  есть ли Cufon (в поиске вводим это слово и смотрим его наличие в коде)
  • Переходим в просмотр ресурсов (кнопка Resources — вкладка Frames — пункт Scripts)
  • В списке скриптов ищем тот, текст кода которого начинается со слов Cufon.registerFont

Как выглядит этот процесс, показано на скриншоте ниже:

Определение кириллических шрифтов

К сожалению ни одного подобного сервиса для определения кириллических шрифтов нет. Вам придется самим пересматривать сотни и тысячи шрифтов в русскоязычных шрифтовых базах. Следующие советы немного облегчат Вам жизнь:

Выбирайте базу шрифтов с делением на шрифты с засечками и без них;

Если это  шрифт бренда используйте поиск Яндекса или Google с запросами типа «название бренда шрифт» или «brand font» (иногда заграницей также ищут этот шрифт и бывает находят), в некоторых случаях дизайн-агенства указывают используемый шрифт в портфолио;

Пробуйте реверсивный поиск изображений  TinEye или Google, возможно найдется похожие изображения брендов или текстов с данным шрифтом;

Наконец спросите на форумах дизайнеров, но могут послать искать в Google 🙂

Ниже Вы найдете список рекомендуемых каталогов русских шрифтов, которые Вам помогут в нелёгком деле:

Удачи Вам. Дополнения, мнения и поправки приветствуются.

Сейчас другие читают

itpride.net

Как определить шрифт (распознать гарнитуру) по картинке

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

И хотя все более-менее толковые люди знают про сервис What the Font («Чё за шрифт?», название кстати классное, намекает на «What the fuck?!»), даже они часто не находят там нужную гарнитуру. Между тем, примерно в 80 % случаев это делается на ура, если пользоваться сервисом умеючи. Ща расскажу, в чем фишка)

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

Только тру, только хардкор 🙂 5—7 минут на ответ, поехали.

Готовим «образцовую» надпись


Прежде чем совать в сервис эту картинку, ее желательно обработать. Как видите, какой-то дятел выгнул текст на манер турецкого флага, покорежив буквы. Но поскольку они крупные, работать все равно можно.

Первым делом чистим фон. Нужен максимальный контраст — больше шансов найти нужную гарнитуру. Тем более, что в данном случае фотошоп делает это это в два клика. «Выделить» -> «Цветовой диапазон» (черный цвет, чувствительность 50—100). Выделили. Нажали Ctrl+J, получили чистый слой с текстом. Нижнюю часть надписи удаляем, чтобы не мешала (все ключевые символы есть и в верхней). Мусорный исходный слой убиваем, кидаем текст на белый фон.
 
Надпись явно наклонена вверх. Это плохо. Пытаемся восстановить: Ctrl+T, правый клик, «наклон», тащим мышкой правый край вниз. Получаем нечто типа:
Уже нормально. В принципе, можно было бы искать и так. Но для наглядности примера мы еще немножко пошаманим.

Выбираем самые характерные символы


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

В нашем случае я выбрал буквы «A», «B», «R», т.к. мне они показались наиболее необычными. Заодно увеличил расстояние между ними, чтобы сервису было проще читать 🙂 

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

Распознаем картинку, определяем гарнитуру


Идём на сайт сервиса и заливаем нашу картинку с текстом. Система пытается распознать символы и выдает гипотезы о том, что за буква на картинке. В моем случае «B» определилось как «D», поэтому пришлось подкорректировать. Именно для этого предусмотрены поля внизу.

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

 

Определяем шрифт


Прежде чем хлопать в ладошки, нужно убедиться, что гарнитура действительно адекватна, а не просто приблизительно похожа. В данном случае, например, второй вариант палит буква «R», а третий очевидно отличается… А первый вроде бы подходит, но мы-то пока видим только три символа и, к тому же, в жирном начертании (bold). Может найтись и что-то более подходящее — нужно уточнить… Берем название гарнитуры и ищем по сайту:

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

 
Итак, что мы имеем в итоге… Несколько шрифтов из нашей гарнитуры «Pacific» плюс случайно-залетное совпадение «Pacific Clipper». На первый взгляд, всё похоже. Но стоит только приглядеться внимательнее, как находится масса нюансов: на вкус и цвет все пацифики разные 🙂 У «Standard» толстый горизонтальный штрих. У «Classic» всё бы хорошо, но — ап! — буква «C» спалилась, не те хвосты 🙂 «Serif» тоже не годится, понятно дело: это шрифт с засечками, а у нас в исходнике — без. 

 

Остается Pacific Sans. Причем при ближайшем рассмотрении выясняется, что исходник больше похож на нормальное начертание, чем на жирное. Всё, теперь мы знаем, что это за зверь и можем его где-нибудь спиздить предложить заказчику покупку шрифта в нужно начертании 🙂

P.S. Несмотря на длину поста, процесс поиска занимает от силы 5 минут.

Постпостскриптум о кириллице


Сервис, естественно, лучше работает с латиницей. С кириллическими надписями варианты следующие:
  • выбрать «универсальные» символы и поискать по ним, т.к. львиная доля кириллических шрифтов, особенно хреновых, представляет собой копию латиницы с «дорисованными хвостиками». Это «A, M, H, T» и т.п. Только при распознании лучше указывать символы латинской раскладки.
  • если не нашлось, пойти на сайт Паратайпа и поискать там 🙂 Нормальных кириллических гарнитур, не имеющих латинских аналогов, совсем немного, так что при желании можно научиться на глаз распознавать 🙂
  • если ничего не помогло, либо забить, либо попытаться сначала классифицировать шрифт: определить тип, стиль, начертание и искать по каталогам с соответствующей рубрикацией)

norske.bloger.by

Как определить шрифт с картинки?

Многие наверно сталкивались с такой проблемой, как определение шрифта по картинке. Решить эту проблему поможет один хороший онлайн-сервис под названием «WhatTheFont», который относится к достаточно известному сервису со шрифтами «MyFonts».

Сервис для определения шрифта по картинке MyFonts

Допустим, у вас есть какое-то изображение с надписью, шрифт которого нужно узнать. Для определения шрифта переходим по ссылке «WhatTheFont» и загружаем наше изображение через форму (либо просто указав URL картинки) и нажимаем на Continue.

Загружаем изображение и нажимаем на Continue

В качестве примера я буду использовать вот эту картинку:

Определяем шрифт с картинки

Сервис накладывает ряд требований к загружаемым картинкам:

  • Максимальное количество символов на картинке не должно превышать 50
  • Буквы не должны быть связаны
  • Желательно высота изображения должна быть в пределах 100px
  • Текст должен быть расположен горизонтально

Хотя высота моего изображения гораздо больше чем 100px, я не стал его обрезать. Итак, загружаем картинку, нажимаем на Continue и сервис просит нас указать какой символ указан на картинке. Указываем символы, которые смогли определить и нажимаем на Continue.

Указываем буквы

После этого сервис выдаст список примерных шрифтов, которые имеют сходства с текстом на изображении.

Сервис определил шрифты по картинке

Из всех вариантов больше всего подошел Proxima Nova Regular.

На этом все, надеюсь, что данный инструмент поможет вам в нужной ситуации.

design-secrets.ru

Как определить шрифт на картинке

Автор КакПросто!

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

Статьи по теме:

Инструкция

Для того чтобы определить шрифт понравившейся вам на картинке надписи, вы можете воспользоваться интернет-сервисом What The Font. Чтобы зайти на него, введите в поисковую строку запрос с названием ресурса и нажмите кнопку поиска. Также зайти на страницу данного веб-ресурса можно, набрав в адресной строке вашего браузера URL: http://www.myfonts.com/WhatTheFont/, после чего нажмите клавишу Enter.

Оказавшись на главной странице «What The Font», вы должны будете загрузить понравившуюся картинку на ресурс. Сделать это можно, выбрав картинку со своего компьютера либо скопировав ее URL в соответствующую строку. В первом случае нажмите на кнопку «Обзор», которая находится рядом с полем для ввода и надписью «Загрузить файл» (Upload a file), найдите на компьютере нужную картинку и нажмите «Открыть». Во втором случае подведите курсор к понравившемуся изображению, нажмите правую кнопку мыши и выберите в раскрывшемся списке пункт «Копировать URL картинки» («Копировать адрес картинки» или «Копировать ссылку на изображение»), после чего вернитесь на страницу ресурса What The Font и вставьте скопированный адрес в поле Specify a URL.

При загрузке логотипов или картинок с текстом для более точного распознавания шрифта системой необходимо придерживаться следующих правил:- загружать необходимо файлы разрешением не более 360×275 пикселей;- форматы загружаемых изображений могут быть следующие: JPEG, TIFF, BMP, GIF;- чем крупнее шрифт на загружаемой картинке, тем быстрее и точнее система его определит;- загружать желательно черно-белые фотографии, хотя ресурс успешно работает и с цветными изображениями.

Как только картинка загрузится, вы должны будете нажать на зеленую стрелку с надписью Сontinue. После чего вы окажетесь на странице, где система попытается распознать все буквы надписи. Если по каким-то причинам система определила не все символы или какие-то распознала с ошибкой, то ничего страшного, просто введите в соответствующие ячейки эти буквы. Обратите внимание, что вписывать следует лишь только те символы, которые четко видно. Полупрозрачные лучше пропустить, иначе система не сможет правильно определить шрифт.

После того как все вышеописанные действия проделаны, опять нажмите на зеленую стрелку с надписью Сontinue. Теперь ресурс вам переместит на страничку с результатом. В правой части вы увидите название шрифта, а в левой части – список похожих шрифтов.

Совет полезен?

Статьи по теме:

www.kakprosto.ru

расширения, приложения и онлайн сервис

На работе мне понадобилось узнать стиль написания букв, поскольку я работаю гравировщиком, нашел инструмент поиск шрифта по картинке. Хорошо что сейчас есть много способов, разберу три популярных способа это:

Содержание.

  1. Онлайн сервисы.
  2. Расширения для браузеров.
  3. Приложения на мобильные устройства.
  4. Дополнение: расширенный набор поиска.

Поиск шрифта по картинке с whatfontis

Разберу самый лучший сервис по поиску шрифта по картинке whatfontis, а в последнем пункте предоставлю еще шесть. Заходим по ссылке и видим меню загрузки.

  1. Загружаем изображение со шрифтом с компьютера.
  2. Заливаем по url.
  3. Открываем дополнительные настройки.
  4. Отмечаем если по картинке есть тень.
  5. Если линия шрифта идет не четко по горизонтали, то его надо выровнять, отмечаем галочку.
  6. Если необходим редактировать файл, то на сервисе есть встроенный менеджер.
  7. Продолжить.

Чтобы сделать скриншот с экрана берем fast stone capture, отправить пример шрифта по url используем lightshot, возможно понадобиться узнать цвет онлайн.

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

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

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

Рассматривать не буду, отредактированный файл закидываем обратно на анализ и проделываем проверку. Заполнив все поля с буквами, нажимаем большую красную кнопку continue, и смотрим результат. Один раз сработал и распознал кириллического написания.

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

Совет, чтобы искать кириллические тексты, загружайте изображения с буквами совпадающие с русскими, например буквы A, H, P и т.д.

Расширение What font: кириллица не проблема

Сканер расширения смотрит на прописанные шрифты в коде сайта, поддается обработке даже кириллица. К сожалению графические элементы распознать не может, но все остальное очень быстро. Заходим по ссылке и устанавливаем расширение в браузер.

Подходит почти для всех видов браузеров google chrome, на яндексе и firefox идет отлично, проверял.

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

  1. Значок стал активным. Для включения процесса нажимаем, тоже самое делаем для отключения.
  2. Элемент со шрифтом.
  3. Расшифровка стиля, семейства и написания.

Крутой правда, не мог его не показать, хотя тема статьи по картинке, но дать дополнительную информацию надо.

Приложение на мобильные устройства

К сожалению не нашел для андроида, выручило приложение WhatTheFont, так и вводите название в itunes. Приложение бесплатно дает возможность загрузки изображений с самого устройства и с помощью видеокамеры. Удобнее чем с сервисами, можно сфотографировать понравившийся фрагмент текста и узнать шрифт по картинке. Для работы необходимо подключение к интернету и соответственно приложение WhatTheFont.

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

Альтернативные онлайн сервисы

В дополнении к первому пункту приведу еще 6 сайтов, большинство на английском, один на русском. Онлайн способы построены в порядке убывания по эффективности.

Myfonts аналог whatfontis

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

Fontmassive русский сайт

Найти можно здесь, единственный русский портал Fontmassive, действует бесплатно. Нет систем распознаваний русского языка (смешно), есть только глас народа, ответ дают люди. Нужно зарегистрироваться и подать заявку, чтобы подсказали. Удобно и практично, дабы лучше человека на вопрос никто не ответит.

Identifont.com находит шрифты по опросам

Находиться на странице, чтобы определить нужное семейство и стиль инструмент опрашивает вас об особенностях шрифта, какие буквы, как располагаются и так далее. Если сомневаетесь есть кнопка “не уверен”, способ более длительный, но сможет максимально приблизить к положительному эффекту. Анализировать можно и на кириллице, написание же одинаковое.

Typophile помогает форум

Возможность поиска на typophile определяет опять таки человек, но теперь чтобы запустить поиск, от вас требуется дать картинку, сделать отдельную тему, и ждать ответа от знатоков. Отличается от Fontmassive наличием продвинутых специалистов, но опять на английском, гугл переводчик в помощь.

Bowfinprintworks быстрый опрос

Фишка bowfinprintworks: он сразу выдает вопросы для заполнения в виде чекбоксов и примеров. Есть десять полей для заполнения, определяет шрифт по написанию лишь некоторых букв. Выдает адекватный поиск не плохой эффект, но надо анализировать, не все будут вглядываться в буквы и символы.

Жалко что программа для нахождения стилей, не существует. Было бы удобно иметь стационарный софт на компьютере.

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

Источник

wpsovet.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *