У меня есть это .psd(файл Photoshop), и я пытаюсь преобразовать его в HTML & CSS.
Единственное, что я не могу определить, это какой шрифт они использовали в .psd
Как я могу узнать, какие шрифты были использованы в файле Photoshop?
Ответы:
Зависит от того, как вы хотите извлечь информацию.
Выберите инструмент «Текст» ( значок T с засечками) и щелкните текстовую область, чтобы отредактировать ее. Он покажет, какой шрифт используется в окне символов.
В этом списке будут перечислены все встраиваемые шрифты, используемые в файле PSD, при условии, что вы можете встраивать их.
В инструменте «Символ» перейдите в раскрывающийся список выбора шрифта. В конце списка будут шрифты, которые используются в изображении, но отсутствуют в вашей системе. Они обычно будут серыми.
Если вы видите растеризованные изображения, для которых нужен шрифт, лучше всего экспортировать только этот раздел в виде четкого автономного изображения и использовать сервис, например « Что за шрифт», для определения шрифта.
Сохраните этот скрипт как новый файл в папке Photoshop> Presets> Scripts. Назовите его как хотите, например «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.',);
}
Формат файла PSD задокументирован Adobe - вы можете прочитать, как он хранит информацию о шрифтах.
Затем вы можете проверить шестнадцатеричный дамп файла и использовать спецификацию формата файла, чтобы найти шрифты.
Кроме того, имена шрифтов должны быть видны в выходных данных stringsутилиты, найденной в системах Linux / Unix.
Это на самом деле очень легко сделать с помощью сценариев PS, которые могут перебирать слои вашего PSD и извлекать данные текстового слоя.
В последнее время я экспериментировал со скриптом на основе JavaScript, чтобы накладывать информацию о шрифтах непосредственно на композиции, которые доставляются разработчикам. Это не закончено, но если все еще есть интерес (я вижу, что это довольно старый), я могу поставить быструю и грязную версию, которая просто выскакивает шрифты, используемые в окне.
ОБНОВЛЕНИЕ: я собрал грубую, но работающую "облегченную" версию сценария, который я разрабатываю. Не стесняйтесь вносить свой вклад - https://github.com/davidklaw/completer . Для тех, кто не знаком со сценариями, просто возьмите файл сценария и поместите его в папку PS Presets / Scripts, и он будет доступен в меню Файл -> Сценарии.
Быстрый и простой способ найти недостающие шрифты
Windows -> Символ. В окне маленького символа отобразится информация о шрифтах.
Выберите название шрифта выпадающего и прокрутите вниз до конца.
Вы увидите список отсутствующих шрифтов светло-серого цвета в конце списка шрифтов.
От: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
Если текст уже был растеризован, простым способом было бы обрезать область шрифтом, который вы хотите идентифицировать, сохранить как .png и загрузить его в WhatTheFont , где он должен быть в состоянии сказать вам, что это такое, если только неясный или сделанный на заказ.
Identifont - это еще один сайт, который вы можете использовать, где вы описываете характеристики гарнитуры.
Я бы сделал снимок нужного вам текста (желательно увеличенного масштаба) и использовал WhatTheFont, чтобы получить некоторые догадки. (Не следует ли показывать гарнитуру при открытии PSD и выборе соответствующего текста?)
И, конечно же, если это не веб-безопасный шрифт, вам нужно найти подходящий способ его замены или предоставления резервного стека.
Используйте Creative Cloud Extract
В нем будут перечислены все используемые шрифты (среди прочих удобных вещей).
Основываясь на первоначальном ответе Дэвида (DetectFonts.jsx), я изменил сценарий, чтобы исправить проблему, о которой сообщил Дрю в комментариях: найдите все шрифты, используемые в файле Photoshop .
Следуйте исходным инструкциям, но вместо этого используйте это тело скрипта - единственное отличие - это несколько нулевых проверок (предположительно, разница в версии Photoshop или что-то связанное с отсутствующими данными по конкретным типам объектов, вероятно, по дизайну или по конкретной операционной системе)
Я также отправлю запрос на удаление по адресу https://github.com/dcondrey/DetectFontsinPSD
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'));
if(!layerStyles) continue;
countStyles = layerStyles.count;
while (countStyles--) {
var textStyle = layerStyles.getObjectValue(countStyles).getObjectValue(stringIDToTypeID('textStyle'));
if(!textStyle || !textStyle.hasKey(stringIDToTypeID('fontPostScriptName'))) continue;
var n = 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.');
}
Используйте онлайн-инструмент, чтобы получить шрифты PSD-файла
Разработчик попросил меня почти так же подумать, как и тебе нужно. Я придумал редактировать простой скрипт, чтобы экспортировать свойства слоя (текст, имя шрифта, размер шрифта, цвет шрифта), которые вам нужны при разработке, в один текстовый файл (должен работать на компьютере с 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
Существует бесплатное расширение / панель Photoshop, которая может выполнить эту работу за вас, Free Photoshop Font Detector ( http://www.layerhero.com/photoshop-font-detector/ ), и если вы хотите собирать / копировать файлы шрифтов из системы папку, попробуйте Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )
Я хотел знать шрифты документов вместе с их стилями, размерами, цветами, форматированием и т. Д. Для веб-разработки и в целях CSS, поэтому я пришел к следующему:
Чтобы получить информацию о шрифтах из PSD-файла, вы можете использовать онлайн-инструменты, если вы не можете или не будете использовать Photoshop (или если вы предпочитаете использовать Gimp, который растеризует PSD-шрифты).
Например, вы можете попробовать этот онлайн-экстрактор шрифтов PSD html5 «Get PSD Fonts».
Это экстрактор информации о шрифтах PSD, основанный на проекте Melitingice Github psd.js , который не требует загрузки файлов и работает локально на странице вашего браузера.