Photoshopファイルで使用されているすべてのフォントを検索
私はこの.psd
(Photoshopファイル)を持っていて、それをHTML&CSSに変換しようとしています。
.psd
0x6&(Photoshopファイル)で使われていたフォントがわからないのですが、どうやって調べればいいのでしょうか?
私はこの.psd
(Photoshopファイル)を持っていて、それをHTML&CSSに変換しようとしています。
.psd
0x6&(Photoshopファイル)で使われていたフォントがわからないのですが、どうやって調べればいいのでしょうか?
情報をどのように抽出したいかによります。
テキストツール(Tアイコンのセリフ付き)を選択し、テキストエリアをクリックして編集します。文字ウィンドウで使用しているフォントが表示されます。
1.画像ドキュメントをPDFとして保存またはエクスポートする 2. Adobe Reader で PDF 版を開く 3. ファイル」→「プロパティ」→「フォント」を選択
これで、PSDファイル内で使用されているすべての埋め込み可能なフォントが一覧表示されます。
文字ツールで、フォント選択のドロップダウンに移動します。リストの最後には、画像で使用されているがシステムに存在しないフォントが表示されます。通常、これらのフォントはグレーアウトされています。
フォント面が必要なラスタライズされた画像がある場合は、その部分だけを明確な独立した画像としてエクスポートし、What the Font のようなサービスを使用してフォントを決定することをお勧めします。
このスクリプトを新しいファイルとしてPhotoshopの「Presets」フォルダに保存してください。例えば、"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社のドキュメント - フォント情報をどのように保存しているかを読むことができます。
ファイルの16進ダンプを調べて、ファイルフォーマットの仕様を使ってフォントを見つけることができます。
あるいは、Linux/Unixシステムにあるstrings
ユーティリティの出力にフォント名が表示されているはずです。
これはPSDのレイヤーを反復処理してテキストレイヤーのデータを引っ張ってくるPSスクリプトを使えば、実際には非常に簡単にできます。
私は最近、JavaScriptベースのスクリプトを使って、開発者に配信されるコンプに直接フォント情報をオーバーレイする実験をしています。まだ完成していませんが、もしまだ興味があれば(これはかなり古いものだと思いますが)、ウィンドウ内で使用されているフォントを単純にポップアップ表示するだけの簡単なバージョンを作ることができます。
UPDATE:私が開発中のスクリプトの大まかなバージョンをまとめました。遠慮なく貢献してください - https://github.com/davidklaw/completer . スクリプトに慣れていない人のために、スクリプトファイルをPS Presets/Scriptsフォルダの下に置いておいてください。
Quick and Easy Way To Find Missing Fonts
1.Windows -> Character 小さな文字ボックスにフォント情報が表示されます。
フォント名のドロップダウンを選択し、最後までスクロールします。
フォントリストの最後に薄いグレーで表示されているフォントのリストが表示されます。
From . http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/ ](http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/)
テキストが既にラスタライズされている場合、簡単な方法は、識別したい書体の領域を切り抜いて.pngとして保存し、それを WhatTheFont にアップロードすることです。 Identifont は、書体の特徴を記述するサイトです。
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.');
}
``` にプルリクエストを提出します。
私は必要なテキストのスナップ写真を撮って(できれば拡大して)、WhatTheFont を使っていくつかの推測を得ると思います。(PSDを開いてそれぞれのテキストを選択したときに書体が表示されるべきではないでしょうか?)
そしてもちろん、もしそれがウェブセーフフォントでないならば、それを置き換える適切な方法を見つけるか、フォールバックスタックを提供する必要があるでしょう。
Creative Cloud Extract ](http://www.adobe.com/ca/creativecloud/extract.html)
使用されているすべてのフォントをリストアップしてくれます(他にも便利なものがあります)。
Free Photoshop Font Detector http://www.layerhero.com/photoshop-font-detector/ )という無料のPhotoshop拡張機能/パネルがあり、システムフォルダからフォントファイルを収集/コピーしたい場合は、Photoshop Art Packer http://www.layerhero.com/photoshop-art-packer/ )を試してみてください。
Web開発やCSS目的でドキュメントフォントをスタイル、サイズ、色、書式などとともに知りたいと思っていたので、思いついたのはこんな感じです。
1.レイヤーパネルの「T」アイコンをクリックしてテキストレイヤーのみをフィルタリング/表示 2. レイヤーパレットの一番上のテキストレイヤーをシフト+左クリック 3. レイヤーパレットの一番下までスクロールして、一番下のテキストレイヤーを Shift + 左クリック 4. レイヤーパレットで選択したレイヤーを右クリックし、「レイヤーの複製」を選択する。コピー先のドキュメントで「新規作成」を選択 6. 6. 新しいドキュメントに移動して、すべてのテキストレイヤーが含まれているはずです 7. 7. もう一度、すべてのテキストレイヤーを選択します(ステップ2と3を参照) 8. レイヤーパレットの下にあるフォルダアイコンをクリックして、すべてのテキストレイヤーを 1 つのグループにします。グループのブレンドモード(レイヤーパレットのドロップダウン)を「通常」に変更します。新しいグループを右クリックする。CSSのコピー」を選択します。ドキュメントに貼り付けて、必要に応じてスタイルのリストをフォーマットします。
psdファイル http://psdfonts.com/ のフォントを取得するためにオンラインツールを使用します。
開発者から、ほぼ同じようなことを聞かれた。開発時に必要なレイヤーのプロパティ(テキスト、フォント名、フォントサイズ、フォントカラー)を1つのtxtファイルに書き出すための簡単な編集スクリプトを思いついた(Windowsマシンでは動作するはず)。
これを「ExportTexts.js」のように保存して、「Adobe Photoshop」の「Presets」の「Scripts」に入れればOK。
その後、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
PSDファイルからフォント情報を取得するには、Photoshopを使用できない場合や使用しない場合は、オンラインツールを使用することができます(または、PSDフォントをラスタライズするGimpを使用することを好む場合)。
例えば、このhtml5 PSDフォントオンライン抽出ツール “Get PSD Fonts "を試すことができます。
これは Melitingice Github project psd.js をベースにしたPSDフォント情報抽出ツールで、ファイルをアップロードする必要がなく、ブラウザのページでローカルに動作します。