У мене це є .psd(файл Photoshop), і я намагаюся перетворити його в HTML та CSS.
Я не можу визначити, який шрифт вони використовували в .psd
Як я можу дізнатися, які шрифти використовувались у файлі Photoshop?
Відповіді:
Залежить від того, як ви хочете отримати інформацію.
Виберіть інструмент "Текст" ( піктограма T із серіфами) та натисніть на текстову область, щоб відредагувати її. Він покаже, який шрифт використовується у вікні символів.
Тут буде перераховано всі вбудовані шрифти, що використовуються у файлі PSD, за умови, що ви можете їх вставити.
У інструменті «Символ» перейдіть до вибору шрифту, що випадає. В кінці списку будуть шрифти, які використовуються у зображенні, але відсутні у вашій системі. Вони, як правило, сіріють.
Якщо ви бачите будь-які растрові зображення, для яких вам потрібна грань шрифту, найкраще експортувати саме цей розділ у вигляді чіткого окремого зображення та скористатися послугою типу What the Font для визначення шрифту.
Збережіть цей скрипт як новий файл у вашому Photoshop> Попередні налаштування> Папка сценаріїв. Назвіть це все, що завгодно, наприклад "Виявити 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, щоб накласти інформацію про шрифт безпосередньо на компі, що доставляються розробникам. Це ще не закінчено, але якщо все ще є інтерес (я бачу, це досить старе), я можу створити швидку та брудну версію, яка просто спливає шрифти, використані у вікні.
ОНОВЛЕННЯ: Я зібрав грубу, але працюючу "Lite" версію розробленого сценарію. Не соромтеся робити внесок - https://github.com/davidklaw/completer . Для незнайомих зі сценаріями просто візьміть файл сценарію і покладіть його у папку пресетів PS / скриптів, і він буде доступний у меню Файл -> Сценарії.
Швидкий і простий спосіб знайти відсутні шрифти
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
Розробник попросив мене майже так само, як вам потрібно. Я придумав редагування простого сценарію, щоб експортувати властивості шару (текст, ім'я шрифту, розмір шрифту, колір шрифту), які вам потрібні при розробці, до одного файлу txt (повинен працювати на машині Windows).
Просто збережіть таке, як "ExportTexts.js" і покладіть в Adobe Photoshop> Попередні налаштування> Сценарії.
Після цього запустіть (або перезавантажте) Photoshop і запустіть скрипт (Файл -> Сценарії -> ЕкспортТексти). Також переконайтесь, що ви розгрупували всі шари, перш ніж це робити. Експортований файл повинен знаходитись у тому ж режимі, що й файл 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, яке може зробити цю роботу за вас, безкоштовний детектор шрифтів Photoshop ( http://www.layerhero.com/photoshop-font-detector/ ), і якщо ви хочете збирати / копіювати файли шрифтів із системи папку, спробуйте Photoshop Art Packer ( http://www.layerhero.com/photoshop-art-packer/ )
На вкладці "Шари" є опція, яка дозволяє фільтрувати всі шари, щоб показувати лише шрифти. Ви повинні вибрати кожен шар, щоб насправді їх побачити, і це корисно лише в тому випадку, якщо вам потрібно швидко поглянути на них
Сподіваюся, це допоможе комусь через три роки після того, як про це попросили.
Мені хотілося знати шрифти документів, а також їхні стилі, розміри, кольори, форматування тощо для веб-розробки та цілей CSS, тому ось що я придумав:
Щоб отримати інформацію про шрифти з файлу PSD, ви можете використовувати онлайн-інструменти, якщо ви не можете або не будете використовувати Photoshop (або якщо ви віддаєте перевагу використовувати Gimp, що розширює шрифти PSD).
Наприклад, ви можете спробувати цей веб-екстрактор шрифту html5 PSD "Отримати шрифти PSD".
Це екстрактор інформації про шрифти PSD, заснований на проекті Melitingice Github psd.js , який не потребує завантаження файлів, які працюють локально на сторінці веб-переглядача.