как узнать каким шрифтом написан текст на картинке в фотошопе
5 способов распознать шрифт с картинки
Екатерина Малахова, редактор-фрилансер, написала статью для блога Нетологии об инструментах для распознавания шрифтов.
Каждый дизайнер хоть раз сталкивался с необходимостью распознать незнакомый шрифт. Идеального способа для этого всё ещё не придумали, но кое-какие хитрости есть. Рассмотрим пять инструментов, которые могут помочь 🧐
WhatTheFont
Самый известный способ определить шрифт с фотографии или скриншота — приложение WhatTheFont. Для распознавания нужно загрузить картинку или указать её адрес, программа выдаст наиболее похожие варианты из тех, которые можно купить на MyFonts. Создатели WhatTheFont пишут, что подходящее изображение выглядит так:
Больше советов по подбору картинки можно прочитать в соответствующем разделе на сайте.
Попробуем найти шрифт Circe с этого снимка:
Как и другие онлайн-инструменты, WhatTheFont не распознает кириллицу. Поэтому выберем те буквы, которые в латинице и кириллице выглядят одинаково — в нашем случае это «М», «а», «р» и «е». Если приложение распознало букву неправильно, исправляем её в поле снизу.
В итоге программа сразу определила шрифт правильно. Если результаты далеки от нужного, стоит обратить внимание на теги справа — они помогут найти похожий вариант.
What Font is
Приложение What Font is использует тот же принцип, что и WhatTheFont. Загружаем картинку или адрес, отмечаем нужные буквы, и близкий вариант найден, хотя и не сразу:
При загрузке есть возможность уточнить, темнее ли фон изображения, чем сами буквы. Ещё можно задать фильтры для поиска: например, искать похожие варианты только среди бесплатных шрифтов.
Требования к картинке во многом совпадают с WhatTheFont, главное различие в максимальном количестве букв на картинке — здесь их может быть не больше 10. Если изображение не подходит, сайт предлагает отредактировать его онлайн.
FontDetect
Программа для Windows, которая ищет подходящие варианты среди имеющихся на компьютере шрифтов, из-за этого выбор может быть сильно ограничен. Умеет распознавать кириллицу. Чтобы начать поиск, загружаем картинку, выделяем область для распознавания и делаем ее более контрастной.
Как определить шрифт, размер и цвет текста в фотошопе
Во время верстки сайта, необходимость определения стиля шрифта, размера, цвета и других характеристик текста появляется довольно часто. Поэтому, каждый верстальщик должен уметь делать это. И в этой статье я подробно Вам расскажу, как решить этот вопрос, а именно как определить стиль текста с помощью знаменитой программы, фотошоп.
И так, первым делом, в фотошопе, необходимо открыть макет которого хотите сверстать. Потом необходимо выбрать инструмент текст и кликнуть по тексту, которого хотите определить. Для примера, я взял макет с названием Modus Versus.
Если шрифт, которого хотите определить отсутствует в фотошопе, то при клике по тексту, выскочит окошко с предложением заменить отсутствующий шрифт на одного из стандартных. В это же окошко отображается название шрифта и его начертание. То, что и нужно было нам.
Нажимаем на кнопку cancel, так как если нажмем на OK, то шрифт текста изменится на одного из стандартных, в частности на Times New Roman. Если уже случайно нажали на кнопку OK, то, для того чтобы вернуть исходный шрифт, нажмите кнопку отмена 
, которая появилась на верхней панели инструментов, рядом с кнопкой галочки.
После того как кликнули по тексту, обратите внимание, что в верхней панели инструментов, появилось больше информации об определенном шрифте, нежели в окошке предупреждения. Кроме названия шрифта и его начертания здесь отображается еще размер и цвет текста.
Для того чтобы узнать код цвета, на панели инструментов, кликните по прямоугольнику с соответствующим цветом.
После клика по прямоугольнику опять выскочит окошко с предупреждением о том, что определенный шрифт отсутствует в фотошопе и он будет заменен на стандартном. На этот раз нажимаем на кнопку OK. После нажатия, сразу же выскочит окошко с палитрой цветов, где отображаются коды цвета. Самые распространённые коды цветов, которые используется в web, это шестнадцатеричный код (например, #ffffff) и RGB код (255, 255, 255).
Теперь можно скопировать этот код цвета в нужном Вам формате, и использовать его в файл стилей. Если все символы у шестнадцатеричного кода одинаковые, то его можно сократить, написав только 3 символа, вместо 6. Например, код #ffffff можно сократить до такого формата: #fff. Код черного цвета #000000 также можно сократить до формата #000, и так далее. Для примера, зададим цвет текста у элемента h1.
Для того чтобы окончательно не заменить стиль текста, в палитре цветов нажимаем на кнопку cancel.
На этом, пожалуй, все, что я хотел Вам рассказать в этой статье. Теперь Вы знаете, как определить шрифт и его начертание, цвет и размер текста с помощью программы фотошоп.
Похожие статьи:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту sergiu1607@gmail.com. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Автор статьи: Мунтян Сергей
Как определить шрифт по картинке
определить шрифт по картинке
Очень частый вопрос, который задают дизайнеры и фотошоп мастера: «Как определить шрифт по картинке?».
Вы имеете фото, на котором есть текст и Вам хочется использовать такой же шрифт и на своей работе.
И тут возникает этот вопрос.
Как на него ответить?
Оказывается есть несколько способов.
Смотрите видео урок и Вы их узнаете.
Приятного и полезного просмотра!
Посмотреть серию уроков по работе с текстом можно здесь:
Если у Вас не очень быстрый Интернет, нажмите на » Play «, а потом на паузу и немного подождите пока видео подгрузится для его комфортного просмотра.
«КАК ОПРЕДЕЛИТЬ ШРИФТ ПО КАРТИНКЕ » :
Если Вы хотите получить серию уроков по работе с текстом в Photoshop, подпишитесь на специальную рассылку сайта.
Форма для подписки находится ниже.
Комментарии
Понравилось? Поделитесь:
Добавить комментарий
Популярные уроки сайта:
Как быстро вернуть фо…
Как быстро вернуть фото в исходное состояние В ходе обработки иногда возникают моменты, когда надо вернуться к исходному состоянию фотографии.Можно, конечно, закрыть фото, а потом его открыть по новой.Или пытаться найти.
Как быстро увеличить …
Как быстро увеличить разрешение фото в 2 раза В уроке показаны возможности нового модуля Adobe Camera Raw, который позволяет увеличить разрешение Вашего снимка в два раза. [youtube url=»https://youtu.be/nc0hQ6QUVrM»] [button url=»https://drive.google.com/file/d/12Sx5SgRp-3HR6WaIEkv2_JPsaO7SMjVd/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″].
Как получить романтич…
Как получить романтическое фото В этом уроке мы создадим простой и быстрый эффект романтической фотографии. [youtube url=»https://youtu.be/I4AsJJRQ0Gc»] [button url=»https://drive.google.com/file/d/1fwY7DwxK2HznjSImFUtx0s826k6Quj8O/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как исправить туманну…
Как исправить туманную фотографию В уроке показан очень простой способ исправления туманной фотографии при помощи фильтра «Контурная резкость». [youtube url=»https://youtu.be/dPXXHd5qJm0″] [button url=»https://www.photoshopsunduchok.ru/uroki/fotograf/5911-obrabotka-tumannogo-foto» target=»blank» background_hover=»#0650a3″ size=»8″] Все способы удаления дымки здесь [/button] [button url=»https://drive.google.com/file/d/1a4dNjP2pBqBLJOFBnKO8bjPEZXfE8LQf/view?usp=sharing» target=»blank.
Тонирование фото
Тонирование фото В уроке показан очень простой способ тонирования фотографии. [youtube url=»https://youtu.be/kYkGe0N_80E»] [button url=»https://drive.google.com/file/d/1p9PQrFTNv6xXRHDJ299BrWrnRHE29ccO/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как убрать дымку в фот…
Как убрать дымку в фотошопе (два способа) В этом уроке я покажу два способа удаления дымки с фотографии. Сразу отмечу, что полностью удалять дымку со снимка нельзя, иначе Вы потеряете тональную перспективу и.
Как быстро добавить в…
Как удалить покраснен…
Как удалить покраснения на коже В уроке показан прием ослабления красных пятен на лице человека. [youtube url=»https://youtu.be/WfJcDTtWUng»] [button url=»https://drive.google.com/file/d/1qJKyPheE5FgyXmLZKKHYqfeuiXJjE7Vv/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как быстро размыть за…
Как быстро размыть задний фон на фотографии В уроке показан прием использования нейронного фильтра для размытия фона изображения. [youtube url=»https://youtu.be/CHlj-TBRwGY»] [button url=»https://drive.google.com/file/d/1x_m5QrHLg13LzAI9wfBb03iIhZq711H8/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Мини-курс: «Способы об…
Мини-курс: «Способы обработки туманных фотографий» Довольно часто при съемке на фото может появиться дымка. Особенно это характерно для пейзажей. Что из себя представляет дымка? Это обычно синеватая пелена, которая накладывается на все объекты вдали и.
Как добавить эффект п…
Как добавить эффект пара на фото В уроке показан прием совмещения 2-х картинок с помощью режима наложения и маски слоя. [youtube url=»https://youtu.be/ga934PVbexQ»] [button url=»https://54ps.ru/2450″ target=»blank» background_hover=»#0650a3″ size=»8″] Скачать фото пара [/button] [button url=»https://drive.google.com/file/d/1IEY1eRAkzEvgfk9_9pIp9sx6Az0QNd-I/view?usp=sharing» target=»blank.
Как добавить отражени…
Как добавить отражение на стекле в фотошопе Всем привет! Сегодня в уроке «Как добавить отражение на стекле в фотошопе» мы будем создавать эффект отражения на стекле. Эффект отражения на стекле очень простой и выполняется.
Как быстро затемнить …
Как быстро затемнить небо В уроке показан прием использования другого цветового пространства для придания небу большей глубины. [youtube url=»https://youtu.be/WFEHI26MV4M»] [button url=»https://drive.google.com/file/d/1AGETU_u3PfaoKpdgmDTEx97T9v4sHrWo/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как сделать осеннюю ф…
Как сделать осеннюю фотографию В уроке показан простой прием создания маски для зеленого цвета и изменения этого оттенка на осенние цвета. [youtube url=»https://youtu.be/jHm3S7sZn7g»] [button url=»https://drive.google.com/file/d/1sczKNXnGFtDeWZg2R4AmSOmhLB6spFoS/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как аккуратно усилить…
Как аккуратно усилить четкость нужных областей В уроке рассказано об операции, которая создает 5 слоев, позволяющих настроить их так, чтобы Ваш снимок выглядел очень четким. [youtube url=»https://www.youtube.com/watch?v=sUpL6bALITo»] [button url=»https://www.photoshopsunduchok.ru/kursy/dnyu-znanij/» target=»blank» size=»12″ center=»yes»]Страница с.
Как добавить легкий HDR…
Как добавить легкий HDR эффект В уроке показан простой прием, позволяющий придать снимку впечатление, напоминающее HDR эффект. [youtube url=»https://youtu.be/K9r18zhcx5E»] [button url=»https://drive.google.com/file/d/1JDB-Umw9hFphra6-DpVnkvPWfSH2poLT/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как сделать деревянны…
Как сделать деревянный текст в фотошопе Всем привет! Сегодня в уроке «Как сделать деревянный текст в фотошопе» мы будем создавать эффект текста «под дерево». Такой текст выглядит, как будто создан с красного дерева. Текстовый.
Универсальная коррек…
Универсальная коррекция В этом уроке рассмотрим, как работает экшен универсальной коррекции. [youtube url=»https://www.youtube.com/watch?v=T-7alOYGIjE»] [button url=»https://www.photoshopsunduchok.ru/kursy/dnyu-znanij/» target=»blank» size=»12″ center=»yes»]Страница с курсами на День Знаний (30 августа – 01 сентября)[/button]
Как добавить солнечны…
Как добавить солнечный эффект на фото В уроке показан прием получения солнечного эффекта с помощью специального градиента. [youtube url=»https://youtu.be/uKXY2l0voGU»] [button url=»https://54ps.ru/2436 » target=»blank» background_hover=»#0650a3″ size=»8″] Скачать градиент [/button] [button url=»https://drive.google.com/file/d/1_9oq5_wW2CWY0Bsee_20i4M3SBPXZOS1/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать.
Как быстро сделать цв…
Как быстро сделать цвета живыми и яркими В уроке рассказывается о специальной операции, которая позволяет быстро и удобно усилить насыщенность цветов. [youtube url=»https://www.youtube.com/watch?v=C0x4vAXnAQQ»] [button url=»https://www.photoshopsunduchok.ru/kursy/dnyu-znanij/» target=»blank» size=»12″ center=»yes»]Страница с курсами на День Знаний.
Как быстро отделить о…
Как быстро отделить объект от фона В последних версиях фотошопа появилась удобная кнопка, которая позволяет одним нажатием удалять фон с объекта. [youtube url=»https://youtu.be/f1JuPIx4IZY»] [button url=»https://drive.google.com/file/d/1Cc_xVZ_2SGMYqHZQ03go8sVOpVJhRmPR/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как быстро загореть в …
Как быстро загореть в фотошопе В этом уроке мы с Вами рассмотрим способ, как можно быстро загореть в фотошопе. [youtube url=»https://youtu.be/Tbij9tZbn2Q»] [button url=»https://drive.google.com/file/d/1mi7hS4YpuV54tcyqcMoBRUI41Yne19oX/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Как сделать круговоро…
Как сделать круговорот звёзд в фотошопе Всем привет! Сегодня мы будем создавать эффект «круговорот звезд». Таким необычным эффектом вы сможете украсить любую свою фотографию, сделанную в ночное время. Сначала мы создадим новый документ, поместим в документ.
Добавление глубины не…
Добавление глубины небу В этом уроке рассмотрим способ усиления неба, используя инструмент «Внешний канал». [youtube url=»https://youtu.be/pSsCAagsTW0″] [button url=»https://drive.google.com/file/d/1Ou3_x_b3-EQ1feWbx0cu7Vz_biQZ9N0e/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Быстрый способ улучше…
Быстрый способ улучшения портретной фотографии В этом уроке рассмотрим простой и быстрый способ улучшения портретной фотографии. Данный способ называется «Перераспределение яркости отдельных цветов». [youtube url=»https://youtu.be/Xtg0b-t-0ik»] [button url=»https://drive.google.com/file/d/1AoAHHbvBFFYnXpNsiKsGRLlVKnFHMFOZ/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Быстрый способ улучше…
Быстрый способ улучшения неба Если на Вашем снимке небо получилось не очень хорошим, то мы с Вами его можем быстро и легко усилить. Для этого мы воспользуемся каналами. [youtube url=»https://youtu.be/UeNJ8KmAlWU»] [button url=»https://drive.google.com/file/d/1o4_IUAxHu3KPJ8YVbSckTTEoxSNuM95a/view?usp=sharing» target=»blank.
Быстрый просмотр PSD фа…
Быстрый просмотр PSD файла на Windows В уроке показано несколько способов быстрого просмотра PSD файла на операционной системе Windows. [youtube url=»https://youtu.be/JicHQO2bYwY»] [button url=»https://drive.google.com/file/d/1nQZbjsCTr99YTLZTcj_uyWhOQQT3Yf39/view?usp=sharing» target=»blank» background_hover=»#0650a3″ size=»8″] Скачать урок [/button]
Соглашение / Оферта
Автор сайта: Накрошаев Олег, Все права защищены Copyright, © 2009-2020
Как определить шрифт по картинке?
Задавайте, а мы ответим на него в блоге.
Если вам понравился шрифт на сайте или баннере, его можно найти и использовать. Популярные Arial или Times New Roman угадать можно, например, по отсутствию или присутствию засечек. Более редкие и незнакомые надписи можно распознать онлайн: по картинке или скриншоту. Рассказываю, как это сделать.
Идеального инструмента, чтобы определить шрифт по картинке онлайн, не существует. Но кое-какие хитрости все же есть. Я протестировала онлайн-сервисы для распознавания и свела результаты их работы в таблицу. В любом из них схожи требования к загружаемым изображениям:
Если все условия соблюдены, сервис выдаст похожий шрифт и даже предложит варианты для бесплатного использования.
Чтобы определить шрифт, подготовьте исходное изображение: сохраните картинку или скриншот на компьютер. Дальше алгоритм работы всех сервисов похожий:
Теперь разберу 5 онлайн-сервисов, которые распознают шрифт онлайн.
WhatTheFont
Онлайн-платформа по распознаванию латинских букв по картинке. Также есть база для подбора, которая регулярно обновляется.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт.
Не требуется регистрация
Быстрый поиск по базе более 130 тыс., в том числе платным
Есть приложение для распознавания шрифта на смартфонах (можно просканировать с фотографии) и расширение для Chrome
Не распознает кириллицу
Найденные по скриншоту шрифты предлагает купить, даже если есть бесплатный аналог
Font Identifier
Англоязычный сервис работает с кириллицей и латиницей. Распознает шрифт по каждой букве, поэтому результаты сканирования глубокие. На сайте представлены также семейства, отсортированные по языку, тегам, категориям.
Язык сервиса. Английский.
Возможности. Скачать или купить шрифт здесь же или на сайте партнеров, отредактировать изображение.
Не требуется регистрация
Можно поделится результатами сканирования в соцсетях
Распознает шрифты на десяти языках, в том числе на русском, украинском, белорусском
В базе присутствуют платные и бесплатные варианты шрифтов
Много рекламы внутри платформы
Fontspring
Сервис включает множество шрифтов для коммерческого использования, но обычно внутри семейства можно найти 1-2 начертания, чтобы скачать бесплатно. Есть своя библиотека для поиска.
Язык сервиса. Английский.
Возможности. Купить шрифт, отредактировать изображение.
Не требуется регистрация
Есть редактор для обрезки и поворота загруженных изображений
Можно сканировать изображение по ссылке
Плохо работает с кириллицей
В основном представлен платными вариантами
IdentiFont
В отличие от других сервисов программа предлагает найти шрифт по наводящим вопросам, символу, имени дизайнера, части названия или по внешним признакам.
Язык сервиса. Английский.
Возможности. Поиск по символу, имени дизайнера, наводящим вопросам, по части названия и по внешним признакам.
Не требуется регистрация
Постоянно пополняется база
Можно найти шрифт по названию, дизайнеру или наводящим вопросам
Нельзя определить по картинке
Whatfontis
Сервис подойдет, чтобы найти максимально похожий к оригиналу шрифт, да ещё и бесплатный. Для этого присутствует фильтры поиска по цене.
Язык сервиса. Английский.
Возможности. Скачать или купить, отредактировать загруженное изображение.
Можно сохранить результат сканирования (понадобится регистрация)
Если изображение не подходит, платформа поможет отредактировать его онлайн
Можно искать похожие варианты по фильтру «только бесплатные»
Работает только с латиницей
Не более 10 символов на исходной картинке
Преимущества сервиса доступны только по подписке, например, поиск только бесплатных семейств по картинке
Как сервисы справились с тестовыми картинками
Латиница. Чтобы проверить возможности сервисов я взяла латинские шрифты Lobster и Permanent Marker на разных фонах.
| WhatTheFont | Font Identifier | Fontspring | Whatfontis |
| Lobster на белом фоне (латиница) | ⛔️ |
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Верно распознал
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно
Кирилица. Для проверки кириллицы взяла SportsWorld и Lobster на разных фонах.
| WhatTheFont | Font Identifier | Fontspring | Whatfontis |
| Lobster на белом фоне (кириллица) | ⛔️ |
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Верно распознал
Определен неверно, предложил платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Определен неверно, предложил бесплатные и платные аналоги
Онлайн-сервисы Font Identifier и Whatfontis подходят для частых поисков шрифтов по картинке, в том числе бесплатно. WhatTheFont идеален для определения платных шрифтов и их аналогов, а также неплохо работает с плохо считываемым текстом. Fontspring не определил верно ни один шрифт, зато предложил несколько похожих вариантов для скачивания и покупки. Кириллицу распознали Font Identifier и Whatfontis.
Почему шрифт может не распознаваться
Иногда сервис отказывается распознавать шрифт по картинке. Что в этом случае можно сделать:
Также можно поискать шрифт вручную на форумах или задать вопрос там же: форум MyFonts, группа Type&Typography в Facebook, форум Fontmassive, форум Ruldtp.