CSSの記述に使用する特定のPSDファイルのフォント情報をエクスポートする方法


7

私はフロントエンドの開発を行っているので、この質問はその観点から来ています。受け取ったら.psd、デザイン内の各フォントを手動で確認してクリックし、文字パネルを使用してフォント、色、サイズ、カーニングなどを取得します。ときどき、いくつかの異なるフォントを使用するデザインが表示されます(4+ )同じフォントの多くのバリエーション(サイズ、色、太さなど)があります。これはかなり退屈な作業です... Photoshopが使用されているすべてのフォントとそのバリエーションのリストをエクスポートできるとにかくありますか?たとえば、次のようなリストです。

Arial太字16px黒
Arial通常14px黒
Arial通常14px青
Oswald 32px rgb(13,74,56)
...

これについて何か提案はありますか?さらに、この情報を要素の上に置くだけのプラグインがある場合、それは素晴らしいでしょう!

ありがとう。

回答:


7

もちろん、ExtendScript Toolkitを使用して、Photoshopドキュメントを調査および操作できます。詳細については、ドキュメントを確認するか、さまざまなPSスクリプトフォーラムを検索してください

この記事のスクリプトに基づいて、次のスクリプトを作成しました。PSDファイル内のすべてのテキストレイヤーについて、フォント、フォントサイズ、および塗りつぶし色をJavaScriptコンソールに出力します。

function run(){
    var layerSets = app.activeDocument.layerSets;
    dumpLayerSets(layerSets);

    $.writeln("Top-level layers:");
    dumpLayers(app.activeDocument.layers);

}

function dumpLayerSets(layerSets){
    $.writeln("--- Processing...");
    var len = layerSets.length;
    for(var i=0;i<len;i++){
         var layerSet = layerSets[i];
         //$.writeln(layerSet.name);
         dumpLayers(layerSet.artLayers);
    }
}

function dumpLayers(layers){
    var len = layers.length;
    for(var i=0;i<len;i++){
         var layer = layers[i];
         if(layer.kind==undefined){
                continue;
         }
        if(layer.kind == LayerKind.TEXT){
         $.writeln('font: '+ layer.textItem.font +' font-size: ' + layer.textItem.size + ' color: #' + layer.textItem.color.rgb.hexValue);
        }
    }
}
run();

テストするには、Photoshopでテキストレイヤーを含むドキュメントを開きます。ExtendScript Toolkitを開き、Photoshopインスタンスにリンクします。上記のコードをワークスペースに貼り付け、実行ボタンをクリックします。

ExtendScript Toolkitスクリーンショット

このファイルに基づく: テキストレイヤー化PSDファイル

次の出力を受け取りました:

--- Processing...
Top-level layers:
font: MyriadPro-It font-size: 144 pt color: #0000FF
font: MyriadPro-Bold font-size: 144 pt color: #00FF00
font: MyriadPro-Regular font-size: 144 pt color: #FF0000
Result: undefined

私は持っていない何もあなたがJavaScriptでのPhotoshopにアクセスすることができアイデアを!これをありがとう、私はそれを実行し、それは17の異なるフォントバリエーションを出力しました-本当にとても便利です!
クリスロックウェル

2

フォトショッププラグインSpecKingには、フォトショップファイル内のすべての活版印刷仕様を表示/生成するオプションがあります。私自身は試していませんが、便利なようです。


1

CSSフォントマッチングは、フルネーム(「Myriad Pro Bold」など)またはPostScript名(「MyriadPro-Bold」など)ではなく、フォントファミリー名に基づいていることに注意してください。OSX上のChrome / SafariはPostScript名と一致しますが、これは非標準の動作であり、Firefoxでは機能せず、Windowsベースのブラウザーでは機能しません。CSSで使用するには、PostScript名をfamily / weight / styleの組み合わせにマップする必要があるため、MyriadPro-BoldItの代わりに:

font-family: Myriad Pro;
font-weight: bold;
font-style:  italic;



0

私はこれが少し前に尋ねられたことを知っていますが、この情報を提供することができるウェブサイトPSDFonts.comもあります(ただし、オーバーレイは提供されません)。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.