この.psd
(Photoshopファイル)を持っているのですが、これをHTML & CSSに変換しようとしています
判断できないのは.psd
で使われていたフォントだけ
Photoshopファイルで使用されているフォントを調べるにはどうすればいいですか?
55 dave 2011-04-09
情報を抽出する方法にもよりますが
セクションまたはテキストエリアごと
テキストツール(セリフ付きのTアイコン)を選択し、テキストエリアをクリックして編集します。文字ウィンドウで使用されているフォントが表示されます
使用している全フォントが一目でわかる
- 画像ドキュメントをPDFとして保存または書き出します
- Adobe ReaderでPDF版を開きます
- ファイル → プロパティ → フォント を選択
これは、PSDファイル内で使用されているすべての埋め込み可能なフォントをリストアップします
Missing fonts
文字ツールで、フォントの選択ドロップダウンに移動します。リストの最後には、画像で使用されているがシステムにないフォントが表示されます。これらのフォントは通常グレーアウトされています
Rastersized images
フォントの顔が必要なラスタライズされた画像があれば、その部分だけを明確なスタンドアロン画像としてエクスポートして、What the Fontのようなサービスを使用してフォントを決定するのがベストだと思います
64 random 2011-11-13
このスクリプトを新規ファイルとして 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.',);
}
24 davidcondrey 2015-04-29
PSDファイル形式は、Adobe社のdocumentedで、フォント情報をどのように保存しているかを読むことができます
その後、ファイルの16進ダンプを調べて、ファイル形式の指定を使ってフォントを見つけることができます
あるいは、Linux/Unix システム上の strings
ユーティリティの出力でフォント名が見えるようにしてください
8 RedGrittyBrick 2011-04-09
これは、PSDのレイヤーを反復処理してテキストレイヤーのデータを引き出すことができるPSスクリプトを使用して、実際には非常に簡単に行うことができます
最近、JavaScript ベースのスクリプトを使って、開発者に送られてくるコンプに直接フォント情報をオーバーレイさせる実験をしています。まだ完成していませんが、もしまだ興味があれば (これはかなり古いものだと思いますが)、ウィンドウ内で使用されているフォントをポップアップ表示するだけの簡単なバージョンを用意しています
UPDATE: 私は私が開発しているスクリプトの “lite “バージョンの大まかな作業をまとめました。https://github.com/davidklaw/completerスクリプトに不慣れな方のために、スクリプトファイルをPS Presets/Scriptsフォルダの下に置いておいてください
6 David 2012-07-18
欠落しているフォントを見つけるための迅速かつ簡単な方法
Windows -> 文字 小さな文字ボックスにフォント情報が表示されます
フォント名のドロップダウンを選択し、最後まで下にスクロールします
フォントリストの最後には、ライトグレーで表示されているフォントのリストが表示されています
より。http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/
4 Praveen Vijayan 2014-10-14
テキストがすでにラスタライズされている場合、簡単な方法は、識別したい書体で領域をトリミングして.pngとして保存し、WhatTheFontにアップロードすることです
Identifontも書体の特徴を記述するサイトです
3 paradroid 2011-01-25
私はあなたが必要とするテキストのスナップを取るだろう(できればズームイン)といくつかの推測を得るためにWhatTheFontを使用しています。(PSDを開いてそれぞれのテキストを選択したときに書体が表示されるべきではないでしょうか?)
そしてもちろん、ウェブセーフフォントでない場合は、適切な置き換え方法を見つけるか、フォールバックスタックを提供する必要があります
1 roguesys 2011-04-09
Creative Cloud Extractを使用します
使用されているすべてのフォントをリストアップしてくれます(他の便利なものの中では)
1 skube 2015-01-08
Davidさんの元の回答(DetectFonts.jsx)に基づいて、コメントでDrewさんが報告した問題を修正するためにスクリプトを修正しました。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.');
}
1 agrath 2019-10-17
Photoshopを開きます。Windows “文字 “に移動します。小さなボックスがポップアップします。テキストレイヤーを選択するだけで、ボックスはフォントファミリ、サイズなどを教えてくれます
0 Jack 2011-05-21
psdファイルのフォントを取得するためにオンラインツールを使用してください
0 Ahsan Idrisi 2013-09-26
開発者から、ほぼ同じようなことを聞かれた。開発時に必要なレイヤーのプロパティ(テキスト、フォント名、フォントサイズ、フォントカラー)を1つのtxtファイル(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 van 2013-11-17
Free Photoshop Font Detector (http://www.layerhero.com/photoshop-font-detector/)、システムフォルダからフォントファイルを収集/コピーしたい場合は、Photoshop Art Packer(http://www.layerhero.com/photoshop-art-packer/)を試してみてください
0 user3110420 2014-05-06
レイヤー] タブには、すべてのレイヤーをフィルタリングしてフォントだけを表示するオプションがあります。実際にそれらを見るためには各レイヤーを選択する必要がありますが、それはそれらを素早く見る必要がある場合にのみ有用です
この質問から3年後に誰かの役に立てることを願っています
0 edrpls 2014-09-27
Web開発やCSS目的でドキュメントフォントをスタイル、サイズ、色、書式などとともに知りたいと思っていたので、思いついたのがこちらです
- レイヤーパネルの「T」アイコンをクリックすると、テキストレイヤーのみをフィルタリング/表示することができます
- レイヤーパレットの一番上のテキストレイヤーをShift + 左クリックします
- レイヤーパレットの一番下までスクロールして、一番下のテキストレイヤーをShift + 左クリックします
- レイヤーパレットで選択したレイヤーを右クリックし、「レイヤーの複製」を選択します
- 送信先ドキュメント] で [新規作成] を選択します
- すべてのテキストレイヤーが含まれているはずの新しいドキュメントに移動します
- テキストのすべてのレイヤーを再度選択します(ステップ2と3を参照)
- レイヤーパレットの下部にあるフォルダアイコンをクリックして、すべてのテキストレイヤーを1つのグループにします
- グループのブレンドモード(レイヤーパレットのドロップダウン)を「通常」に変更します
- 新しいグループを右クリックします
- CSSをコピー」を選択
- ドキュメントに貼り付けて、必要に応じてスタイルのリストをフォーマットしてください!
0 cfx 2019-03-11
フォント情報をPSDファイルから取得するには、Photoshopを使用することができない、または使用しない場合は、オンラインツールを使用することができます(またはPSDフォントをラスタライズするGimpを使用することを好む場合)
たとえば、このhtml5 PSDフォントオンライン抽出器 “PSDフォントを取得する “を試してみることができます
それはファイルをアップロードする必要がないMelitingice Githubプロジェクトpsd.jsをベースにしたPSDフォント情報抽出ツールで、ブラウザのページでローカルに動作します
-1 Giovazz89 2016-05-09