У меня есть этот .psd (файл Photoshop), и я пытаюсь преобразовать его в HTML и CSS.
Единственное, что я не могу определить, это какой шрифт они использовали в .psd
Как я могу узнать, какие шрифты были использованы в файле Photoshop?
52
14 ответов
62
Зависит от того, как вы хотите извлечь информацию.
По разделу или текстовой области
Выберите инструмент «Текст» (значок T с засечками) и щелкните текстовую область, чтобы редактировать ее. Он покажет, какой шрифт используется в окне символов.
Все шрифты используются с первого взгляда
- Сохранить или экспортировать документ с изображением в формате PDF
- Откройте PDF-версию в Adobe Reader
- Выберите Файл → Свойства → Шрифты.
В этом списке будут перечислены все встраиваемые шрифты, используемые в файле PSD, при условии, что вы можете встраивать их.
Недостающие шрифты
В инструменте «Символ» перейдите в раскрывающийся список выбора шрифта. В конце списка будут шрифты, которые используются в изображении, но отсутствуют в вашей системе. Они обычно будут серыми.
Растеризованные изображения
Если вы видите растеризованные изображения, для которых нужен шрифт, лучше всего экспортировать только этот раздел как чистое, автономное изображение и использовать службу типа « Что за шрифт» для определения шрифта.
21
Сохраните этот скрипт как новый файл в папке «Фотошоп»> «Наборы настроек»> «Сценарии». Назовите его как хотите, например «Detect Fonts.jsx»
var p = new ActionReference();
function arrayUnique(a){
var t = []
i = a.length;
while(i--) {
var f = false,
n = t.length;
while (n--) {
if(a[i] === t[n]) {
f = true;
}
}
if(!f) {
t.push(a[i]);
}
}
return t;
}
function findFonts() {
p.putEnumerated( charIDToTypeID('Dcmn'), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );
var c = executeActionGet(p).getInteger(charIDToTypeID('NmbL'))+1,
fonts = [];
while(c--) {
var r = new ActionReference(),
descLayer,
layerStyles,
countStyles;
r.putIndex( charIDToTypeID( 'Lyr ' ), c );
try {
descLayer = executeActionGet(r);
} catch (e) {
continue;
}
if(!descLayer.hasKey(stringIDToTypeID( 'textKey' ))) continue;
layerStyles = descLayer.getObjectValue(stringIDToTypeID('textKey')).getList(stringIDToTypeID('textStyleRange'));
countStyles = layerStyles.count;
while(countStyles--) {
var n = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle')).getString(stringIDToTypeID('fontPostScriptName'));
fonts.push(n);
}
}
return arrayUnique(fonts).sort();
}
if (documents.length) {
var d = findFonts();
alert(d.length +' fonts found\n'+d.join('\n'));
} else {
alert('No fonts used in the active document.',);
}
8
Формат файла PSD задокументирован Adobe - вы можете прочитать, как он хранит информацию о шрифтах.
Затем вы можете проверить шестнадцатеричный дамп файла и использовать спецификацию формата файла, чтобы найти шрифты.
Кроме того, имена шрифтов должны быть видны в выходных данных утилиты strings найденной в системах Linux/Unix.
5
Это на самом деле очень легко сделать с помощью сценариев PS, которые могут перебирать слои вашего PSD и извлекать данные текстового слоя.
В последнее время я экспериментировал со скриптом на основе JavaScript, чтобы накладывать информацию о шрифтах непосредственно на композиции, которые доставляются разработчикам. Это не закончено, но если все еще есть интерес (я вижу, что это довольно старый), я могу выложить быструю и грязную версию, которая просто выскакивает шрифты, используемые в окне.
ОБНОВЛЕНИЕ: я собрал грубую, но работающую "облегченную" версию сценария, который я разрабатываю. Не стесняйтесь вносить свой вклад - https://github.com/davidklaw/completer. Для тех, кто не знаком со сценариями, просто возьмите файл сценария и поместите его в папку PS Presets/Scripts, и он будет доступен в меню Файл -> Сценарии.
4
Быстрый и простой способ найти недостающие шрифты
Windows -> Символ. В окне маленького символа отобразится информация о шрифтах.
Выберите название шрифта выпадающего и прокрутите вниз до конца.
Вы увидите список отсутствующих шрифтов светло-серого цвета в конце списка шрифтов.
От: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
3
Если текст уже был растеризован, простым способом было бы обрезать область шрифтом, который вы хотите идентифицировать, сохранить как .png и загрузить его в WhatTheFont, где он должен быть в состоянии сказать вам, что это, если только он неясный или сделанный на заказ.
Identifont - это еще один сайт, который вы можете использовать, где вы описываете характеристики гарнитуры.
1
Я бы сделал снимок нужного вам текста (желательно увеличенного масштаба) и использовал WhatTheFont, чтобы получить некоторые догадки. (Не следует ли показывать гарнитуру при открытии PSD и выборе соответствующего текста?)
И, конечно, если это не веб-безопасный шрифт, вам нужно найти подходящий способ его замены или предоставления резервного стека.
1
Используйте Creative Cloud Extract
В нем будут перечислены все используемые шрифты (среди прочих удобных вещей).
0
На вкладке «Слои» есть опция, позволяющая фильтровать все слои, чтобы отображались только шрифты. Вы должны выбрать каждый слой, чтобы увидеть их, и это полезно, только если вам нужно быстро взглянуть на них
Надеюсь, это поможет кому-то через три года после того, как это спросили.
0
Откройте Фотошоп. Перейти в Windows »Персонаж. Появится небольшая коробка. Просто выберите текстовый слой, и поле покажет вам семейство шрифтов, размер и так далее.
0
Существует бесплатное расширение для Photoshop /Panel, которое может сделать эту работу за вас, Free Photoshop Font Detector (http://www.layerhero.com/photoshop-font-detector/), и если вы хотите собирать / копировать файлы шрифтов из системы папку, попробуйте Photoshop Art Packer (http://www.layerhero.com/photoshop-art-packer/)
0
Разработчик попросил меня почти так же подумать, как и тебе нужно. Я придумал редактировать простой скрипт, чтобы экспортировать свойства слоя (текст, имя шрифта, размер шрифта, цвет шрифта), которые вам нужны при разработке, в один текстовый файл (должен работать на машине с Windows).
Просто сохраните это как «ExportTexts.js» и поместите в Adobe Photoshop> Presets> Scripts.
После этого запустите (или перезапустите) Photoshop и запустите скрипт (File -> Scripts -> ExportTexts). Также убедитесь, что вы разгруппировали все слои, прежде чем делать это. Экспортируемый файл должен находиться в том же каталоге, что и файл psd.
if (documents.length > 0)
{
var docRef = activeDocument;
CurrentFolder = activeDocument.path;
var outputFile = new File(CurrentFolder + "/" + activeDocument.name + "fonts.txt" );
outputFile.open("w");
for (var i = docRef.layers.length-1 ; i >=0 ; i--)
{
docRef.activeLa`enter preformatted text here`yer = docRef.layers[i]
if (docRef.activeLayer.kind == LayerKind.TEXT)
{
outputFile.write(
docRef.activeLayer.textItem.contents + "\n" +
docRef.activeLayer.textItem.font +"," +
docRef.activeLayer.textItem.size +"," +
docRef.activeLayer.textItem.color.rgb.hexValue + "\n\n\n");
}
}
outputFile.close();
alert("Finished");
}
else
{
alert("You must have at least one open document to run this script!");
}
docRef = null
0
Используйте онлайн-инструмент, чтобы получить шрифты PSD-файла
-1
Чтобы получить информацию о шрифтах из PSD-файла, вы можете использовать онлайн-инструменты, если вы не можете или не будете использовать Photoshop (или если вы предпочитаете использовать Gimp, который растрирует PSD-шрифты).
Например, вы можете попробовать этот онлайн-экстрактор PSD шрифтов html5 "Get PSD Fonts".
Это PSD-экстрактор информации о шрифтах на основе проекта Melitingice Github psd.js , который не требует загрузки файлов и работает локально на странице вашего браузера.