web-dev-qa-db-ja.com

Photoshopファイルで使用されているすべてのフォトを見つめる

私はこれ.psd(Photoshopファイル)を持っていて、それをHTMLとCSSに変換しようとしています。

私が判断できない唯一のことは彼らが.psdでどんなフォントを使ったかということです

Photoshopファイルで使用されているフォントを確認するにはどうすればよいですか。

52
dave

情報の抽出方法によって異なります。

セクションまたはテキスト領域ごと

テキストツール(Tアイコンとセリフ)を選択し、テキスト領域をクリックして編集します。文字ウィンドウで使用されているフォントが表示されます。

一目でわかるすべてのフォント

  1. 画像ドキュメントをPDFとして保存またはエクスポートする
  2. Adobe ReaderでPDFバージョンを開きます
  3. ファイル→プロパティ→フォントを選択します。

埋め込み可能であれば、PSDファイルに 使用されているすべての埋め込みフォントの一覧 が表示されます。

見つからないフォント

文字ツールで、フォント選択ドロップダウンに移動します。リストの最後には、画像で使用されているがシステムにないフォントが表示されます。これらは通常グレーアウトされます。

ラスタライズ画像

あなたがフォントフェイスを必要とするラスタライズされたイメージを見るならば、あなたはそのセクションだけをはっきりした、スタンドアローンのイメージとしてエクスポートし、そしてフォントを決定するために What the Font のようなサービスを使うのが一番です。

62
random

このスクリプトを新しいファイルとしてPhotoshop>プリセット>スクリプトフォルダに保存します。 「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.',);
}

enter image description here

21
davidcondrey

PSDファイルフォーマットはアドビによって 文書化された です - あなたはそれがどのようにフォント情報を格納するか読むことができます。

その後、ファイルの16進ダンプを調べ、ファイル形式の指定を使用してフォントを見つけることができます。

あるいは、フォント名はLinux/Unixシステムにあるstringsutilityの出力に見えるはずです。

8
RedGrittyBrick

これは実際にはPSスクリプトを使用して行うのが非常に簡単で、PSDのレイヤーを繰り返し処理してテキストレイヤーデータを取得することができます。

私は最近、JavaScriptベースのスクリプトを試して、開発者に配布されるコンプにフォント情報を直接オーバーレイすることを試みています。まだ完成していませんが、それでもまだ興味がある場合(これはかなり古いと思います)、ウィンドウで使用されているフォントをポップアップ表示する簡単なバージョンを作成できます。

UPDATE:私が開発しているスクリプトの大まかな、しかし実用的な "lite"バージョンをまとめました。貢献すること自由に感じなさい - https://github.com/davidklaw/completer 。スクリプトに不慣れな人は、スクリプトファイルをPS Presets/Scriptsフォルダに置くだけで、File - > Scriptsの下に表示されます。

5
David

不足しているフォントを見つけるための迅速かつ簡単な方法

  1. Windows - > Characterフォント情報とともに小さな文字ボックスが表示されます。

  2. フォント名ドロップダウンを選択して最後までスクロールします。

  3. フォントリストの最後に、見つからないフォントのリストが薄い灰色で表示されます。

enter image description here

投稿者: http://www.bala-krishna.com/how-to-find-fonts-used-in-psd-file/

4
Praveen Vijayan

テキストがすでにラスタライズされている場合は、識別したい書体で領域を切り取り、.pngとして保存して にアップロードするのが簡単な方法です。 WhatTheFont 、それがあいまいなものでない限り、それが何であるかを伝えることができるはずです。

Identifont は、書体の特性を説明する別のサイトです。

3
paradroid

私はあなたが必要とするテキストのスナップショットを撮り(できればズームイン)そして推測を得るために WhatTheFont を使うでしょう。 (ただし、PSDを開いてそれぞれのテキストを選択したときに書体が表示されないようにする必要がありますか?)

そしてもちろん、それがWebセーフフォントではない場合は、それを置き換えるか、代替スタックを提供する適切な方法を見つける必要があります。

1
roguesys

Creative Cloud Extractを使用

それは(他の便利なものの中でも)使用されているすべてのフォントをリストします。

1
skube

[レイヤー]タブには、フォントのみを表示するようにすべてのレイヤーをフィルタ処理するためのオプションがあります。実際にそれらを見るためには各層を選択しなければなりません、そしてそれはあなたがそれらを一瞥する必要がある場合にだけ有用です

これが求められてから3年後に誰かに役立つことを願っています。

0
edrpls

Web開発やCSSの目的のために、ドキュメントのフォントをスタイル、サイズ、色、フォーマットなどと一緒に知りたいのです。

  1. テキストパネルのみをフィルタ/表示するには、レイヤーパネルの「T」アイコンをクリックします。
  2. レイヤーパレットの一番上のテキストレイヤーをShift +左クリック
  3. レイヤーパレットの一番下までスクロールし、一番下のテキストレイヤーをShift +左クリック
  4. レイヤーパレットで選択したレイヤーを右クリックして「レイヤーを複製」を選択します
  5. [送信先文書]で、[新規]を選択します。
  6. すべてのテキストレイヤを含むはずの新しいドキュメントに移動します。
  7. テキストのすべてのレイヤーをもう一度選択します(手順2と3を参照)。
  8. レイヤーパレットの下部にあるフォルダーアイコンをクリックして、すべてのテキストレイヤーを1つのグループにします。
  9. グループのブレンディングモード(レイヤーパレットのドロップダウン)を「標準」に変更します
  10. 新しいグループを右クリック
  11. 「コピーCSS」を選択してください
  12. 文書に貼り付けて、必要に応じてスタイルのリストをフォーマットしてください。
0
cfx

Photoshopを開きます。 ウィンドウズ"キャラクターへ行きます。小さな箱がポップアップします。テキストレイヤを選択すると、ボックスにフォントファミリ、サイズなどが表示されます。

0
Jack

あなたのためにこの仕事をすることができる無料のPhotoshop Extension/Panelがあります、Free Photoshop Font Detector( http://www.layerhero.com/photoshop-font-detector/ )、およびシステムフォルダからフォントファイルを収集/コピーする場合は、Photoshop Art Packerを試してください( http://www.layerhero.com/photoshop-art-packer/

0
user3110420

開発者は私にあなたが必要としているのと同じように考えるようにほとんど尋ねました。簡単なスクリプトを編集して、開発時に必要なレイヤープロパティ(テキスト、フォント名、フォントサイズ、フォントカラー)を単一のtxtファイルにエクスポートすることを考えました(Windowsマシンで動作するはずです)。

これを "ExportTexts.js"のように保存して、Adobe Photoshop>プリセット>スクリプトに追加するだけです。

その後、Photoshopを実行(または再起動)してスクリプトを実行します([ファイル] - > [スクリプト] - > [ExportText])。また、これを行う前に、すべてのレイヤーをグループ解除したことを確認してください。エクスポートされたファイルは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

オンラインツールを使ってpsdファイルのフォントを取得する

http://psdfonts.com/

0
Ahsan Idrisi