У меня есть этот файл .psd (Photoshop file) и я пытаюсь преобразовать его в HTML & CSS.
Единственное, что я не могу определить, какой шрифт они использовали в .psd
Как я могу узнать, какие шрифты были использованы в файле Photoshop?
Зависит от того, как вы хотите извлечь информацию.
Выберите инструмент “Текст” (значок T с засечками) и нажмите на текстовую область для ее редактирования. Он покажет, какой шрифт используется в окне Символы.
Это список всех встраиваемых шрифтов, используемых в PSD-файле, при условии, что их можно встраивать.
В инструменте Шрифты перейдите к выпадающему меню выбора шрифта. В конце списка появятся шрифты, которые используются в изображении, но отсутствуют в вашей системе. Обычно они выделяются серым цветом.
Если вы видите растровые изображения, для которых нужен шрифт, лучше всего экспортировать только этот раздел как чистое, отдельное изображение и использовать службу типа What the Font для определения шрифта.
Сохраните этот скрипт как новый файл в папке 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 для наложения информации о шрифтах непосредственно на компы, которые доставляются разработчикам. Он не закончен, но если есть еще интерес (я вижу, что это довольно старый), я могу выложить быструю и грязную версию, которая просто всплывает шрифты, используемые в окне.
UPDATE: Я собрал грубую, но работающую “lite” версию скрипта, который я разрабатываю. Не стесняйтесь внести свой вклад - https://github.com/davidklaw/completer . Для тех, кто не знаком со скриптами, просто возьмите файл скрипта и поместите его в папку PS Presets/Scripts, и он будет доступен в разделе File -> Scripts (Файл -> Скрипты).
Быстрый и простой способ найти недостающие шрифты
Windows -> Символы Небольшое окошко для символов с информацией о шрифтах.
Выберите название шрифта в раскрывающемся списке и прокрутите вниз до конца.
В конце списка шрифтов вы увидите список недостающих шрифтов светло-серым цветом.
Из : http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
Если текст уже был растеризован, легким способом будет обрезать область с тем шрифтом, который вы хотите определить, сохранить как .png и загрузить его в [ WhatTheFont ]0x3 и, где он должен быть в состоянии сказать вам, что это такое, если только он не является непонятным или на заказ. Identifont - это другой сайт, который вы можете использовать, где вы описываете характеристики шрифта.
Основываясь на оригинальном ответе Дэвида (DetectFonts.jsx), я модифицировал скрипт, чтобы исправить проблему, о которой сообщил Дрю в комментариях: Найти все шрифты, используемые в файле 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.');
}
```.
Я бы взял снимок нужного текста (желательно увеличенный) и использовал WhatTheFont , чтобы получить некоторые догадки. (Разве шрифт не должен быть показан, когда вы открываете PSD и выбираете соответствующий текст?).
И конечно, если это не безопасный для Интернета шрифт, вам нужно будет найти подходящий способ его замены или предоставления резервного стека.
Используйте Creative Cloud Extract
В нем будут перечислены все используемые шрифты (среди прочих удобных вещей).
Есть бесплатный Photoshop Extension/Panel, который может сделать эту работу за вас, Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ ), и если вы хотите собрать/копировать файлы шрифтов из системной папки, попробуйте Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ ).
Я хотел знать шрифты документов вместе с их стилями, размерами, цветами, форматированием и т.д. для веб-разработки и CSS, так что вот что я придумал:
Используйте онлайн-инструмент для получения шрифтов psd файла http://psdfonts.com/
На вкладке “Слои” есть опция, позволяющая отфильтровать все слои, чтобы показать только шрифты. Нужно выбрать каждый слой, чтобы увидеть их на самом деле, и это полезно только в том случае, если нужно быстро взглянуть на них 0x2 и 0x2 и Надеюсь, это поможет кому-нибудь через три года после того, как был задан этот вопрос.
Разработчик спросил меня почти о том же, что и тебе. Я придумал редактирование простого скрипта, для экспорта свойств слоя (текст, имя шрифта, размер шрифта, цвет шрифта), который вам нужен при разработке, в один текстовый файл (должен работать на Windows-машине).
Просто сохраните это как “ExportTexts.js” и поместите в Adobe Photoshop > Presets > Scripts.
После этого запустите (или перезапустите) Photoshop и запустите скрипт (Файл -> Скрипты -> ExportTexts). Также убедитесь, что вы разобрали все слои, прежде чем делать это. Экспортированный файл должен быть в том же dir, что и 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
Для получения информации о шрифтах из файла PSD Вы можете использовать онлайн-инструменты, если Вы не можете или не хотите использовать Photoshop (или если Вы предпочитаете использовать Gimp, который растеризует PSD-шрифты).
Например, Вы можете попробовать этот онлайн-экстрактор шрифтов html5 для PSD “Получить шрифты PSD”.
Это распаковщик информации о шрифтах PSD, основанный на Melitingice Github project psd.js и не требующий загрузки файлов, работающий локально на странице браузера.