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

Как определить шрифт, размер и цвет текста в фотошопе

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

И так, первым делом, в фотошопе, необходимо открыть макет которого хотите сверстать. Потом необходимо выбрать инструмент текст и кликнуть по тексту, которого хотите определить. Для примера, я взял макет с названием 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. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.

Автор статьи: Мунтян Сергей

Источник

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

Работая с текстом, часто задаем себе вопрос «как найти или определить шрифт по заданной картинке?». Например, вы нашли какой-либо PSD файл, а в нем был встроен некий красивый шрифт с тестовой записью. Понятное дело, нам нужно эту запись отредактировать, но только фотошоп пишет уведомление, что такой шрифт не установлен в общей библиотеке и в случае изменения текста он будет потерян. Но нам нужен именно этот шрифт, так как он идеально вписывается в общую концепцию этого PSD файла. Тут-то и задаемся вопросом: где найти шрифт? Кстати, рекомендую ознакомиться с основными принципами и возможностями работы со шрифтами и инструментом Текст в фотошопе. Уверен, вы найдете много полезного и нового для себя.

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

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

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

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

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

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

Сначала определите каким способом вы хотите воспользоваться.

1. Нажав на кнопку Browse, выберите нужную картинку. Мой пример:

2. Укажите url-адрес к этой картинке, в случае, если она находится у вас не на компьютере, а где-то висит на просторах интернета.

Затем кликаем на Continue.

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

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

Как видите, программа сама распознала где буквы и разделила их по отдельности. Затем она просит вписать в соответствующие поля каким буквам на клавиатуре соответствуют данные картинки.

Еще ниже имеется три регулятора, влияющие на поисковую выдачу.

1. Display only free fonts or free alternative fonts. Галочка здесь означает, что поисковая выдача будет содержать только бесплатные аналоги.

2. Display only commercial fonts or commercial alternative fonts — здесь наоборот — только платные аналоги.

3. Display all fonts — отобразятся сразу все возможные шрифты.

Выбрав нужную галочку, жмите на Continue.

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

Как видите, подходящий для меня вариант отображен самым первым под названием «SummerCrushes». Я кстати поставил галочку, чтобы мне предлагали только бесплатные аналоги. Поэтому я могу с легкостью нажать на «Click here to download the font», чтобы скачать шрифт который я определял по картинке.

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

Источник

5 способов распознать шрифт с картинки

Екатерина Малахова, редактор-фрилансер, написала статью для блога Нетологии об инструментах для распознавания шрифтов.

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

WhatTheFont

Самый известный способ определить шрифт с фотографии или скриншота — приложение WhatTheFont. Для распознавания нужно загрузить картинку или указать её адрес, программа выдаст наиболее похожие варианты из тех, которые можно купить на MyFonts. Создатели WhatTheFont пишут, что подходящее изображение выглядит так:

Больше советов по подбору картинки можно прочитать в соответствующем разделе на сайте.

Попробуем найти шрифт Circe с этого снимка:

Как и другие онлайн-инструменты, WhatTheFont не распознает кириллицу. Поэтому выберем те буквы, которые в латинице и кириллице выглядят одинаково — в нашем случае это «М», «а», «р» и «е». Если приложение распознало букву неправильно, исправляем её в поле снизу.

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

What Font is

Приложение What Font is использует тот же принцип, что и WhatTheFont. Загружаем картинку или адрес, отмечаем нужные буквы, и близкий вариант найден, хотя и не сразу:

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

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

FontDetect

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

Источник

Как определить шрифт на картинке, изображении (в т.ч. распознавание русского шрифта)

Здравствуйте.

В офисной работе иногда нужно написать какой-нибудь текст таким же шрифтом, который был использован в документе. Хорошо, если он есть в электронном варианте, а если только в бумажном? Вот иногда и приходится определять шрифт по скану (картинке).

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

В общем, как бы там ни было, в этой статье предложу несколько вариантов как это можно сделать. Сразу отмечу, что если на изображении запечатлен какой-то уникальный шрифт (который нигде ранее не использовался, т.е. дизайнер его создал самостоятельно) — то найти его не удастся (хотя, скорее всего, вы сможете подобрать что-то похожее).

Ладно, ближе к теме.

Если у вас есть только картинка на бумаге (распечатанный документ), то для начала работы вам необходимо перевести ее в электронную версию (отсканировать). Сделать сейчас это можно с помощью обычного смартфона на Андроид.

Распознавание шрифта на картинке

Вариант 1: с помощью ABBY Fine Reader

Если кто-то не слышал о такой программе как ABBY Fine Reader — то кратко скажу, что она предназначена для распознавания текста с картинок, PDF-файлов, сканов и пр. (т.е. на входе — у вас обычный графический файл; на выходе — программа выдает вам текст, который можно перенести в Word).

Так вот, Fine Reader по умолчанию при распознавании текста не меняет шрифт! То есть, при процессе распознавании шрифт текста будет выбран тот, который запечатлен у вас на графическом файле (фото, картинке и пр.).

Покажу на примере, как это работает.

1) Установку и запуск программы я опускаю (они стандартны и никаких сложностей возникнуть не должно). Далее нужно нажать по меню «Файл/Открыть PDF или изображение» и указать картинку/фото, на котором находится нужный текст.

Открыть PDF или изображение

В общем, когда программа закончит свою работу — останется только кликнуть в нужный участок полученного текста, и вы увидите его шрифт. В качестве примера ниже я загрузил скриншот странички своего сайта, Fine Reader выдал шрифт Georgia (правильно!).

Шрифт Georgia (Скриншот ABBY Fine Reader)

Проверка, что Georgia

В качестве еще одного примера взял фото разворота книги «Война и Мир». Используемый шрифт — Times New Roman.

Times New Roman — скриншот из ABBY Fine Reader

Удобно? Вполне! Я думаю, что этот способ — один из наиболее эффективных (особенно, если речь касается русскоязычного текста).

Примечание: если на распознаваемом фото/картинке будет использоваться редкий шрифт (которого нет в вашей системе) — Fine Reader подберет автоматически наиболее похожий из тех, что есть.

Вариант 2: с помощью онлайн сервисов

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

Впрочем, есть и преимущество: они могут определить шрифт даже в том случае, если у вас его нет на ПК. Ниже привожу несколько ссылок:

Работа с вышеприведенными сервисами строится либо в ручном варианте (когда вы сами подбираете шрифт, сравнивая его с оригиналом), либо в авто-варианте (когда сервис по схожести подберет вам коллекцию шрифтов).

Рассмотрю работу в одном из сервисов — myfonts.com (он первый в моем мини- списке). После перехода на сайт — вам нужно загрузить изображение и выбрать область текста на нем (см. шаг 1 и 2 на скриншоте ниже).

Загрузка картинки и выбор текстовой области

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

Ну и чем Impact MT отличается от Impact. (результаты работы)

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

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

Источник

Как определить шрифт на картинке (фото), в тексте и PDF документах

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

Определить шрифт, зачем это нужно

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

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

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

Если вы новичок, то благодаря, этой статьи – «как загрузить шрифты в Фотошоп», добавите их в программу. Далее покажем на сервисах, как определяется шрифт на изображении.

Как определить шрифт по картинке онлайн, 5 лучших сервисов

Как определить шрифт? Рассмотрим сначала 5 сервисов, которые решают данный вопрос. После чего перейдем к практике:

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

Как определить шрифт по картинке онлайн в сервисе Fontmassive.com/fd.php

Данный сервис выдаст вам точные названия шрифтов по картинкам, поскольку здесь работают пользователи, которые разбираются в шрифтах. Переходите на ресурс по ссылке – «http://fontmassive.com/discuss/». Далее нажмите кнопку «Написать новое сообщение» (скрин 1).

Загружаете изображение с надписью через кнопку «+», затем жмите «Отправить» (скрин 2).

Через некоторое время получите название шрифтов (скрин 3).

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

Как определить шрифт в PDF документе

Если вы работаете с ПДФ документами, то наверняка загружаете на него шрифты. Давайте разберем, как их определить по инструкции:

Другие программы для ПДФ вы так же можете использовать, чтобы в режиме «Форматирования», посмотреть название шрифтов.

Определяем шрифт любого текста с сайта

Здесь покажем эффективный способ определения шрифта любого текста на сайте с помощью плагина. Он называется «WhatFont». Также он вычисляет информацию о шрифте на картинках.

Сначала установите данный плагин в браузер Google с Интернет магазина Гугл Хром. На блоге есть статья о том, как пользоваться «магазином расширений Google Chrome». С помощью статьи вы узнаете, как работать в данном магазине. Затем, открываете любой сайт в обозревателе и нажимаете на плагин левой кнопкой мыши (скрин 4).

После чего вы получите такой результат (скрин 5).

В данном случае, плагин определил название шрифта на сайте – «Open Sans». Чтобы использовать расширение для изображений, достаточно открыть картинку в браузере и навести на нее плагин.

Заключение

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

Источник