フェンリル

Developer's Blog

PSD からテキスト情報を抽出するスクリプト

TextExportToCSV_01

こんにちは。デザイナーの高口です。

デザイナーの皆さんは、デザインを開発者に伝える時、どのようにしていますか? 口頭で伝える、印刷したデザインに書き込む、指示書を作る…様々な手法があると思いますが、どれも時間がかかりますよね。

そこで今回は、伝える手間を少しでも減らすべく、PSD からテキスト情報を抽出するスクリプトをご紹介いたします。

1.スクリプトをダウンロード

まず、下記のリンクからスクリプトをダウンロードして下さい。
(ご利用に際しては、自己責任にてお願いいたします。)

ダウンロード : TextExportToCSV

ダウンロードしたファイルを解凍すると「TextExportToCSV.jsx」というファイルがありますので、下記のフォルダにコピーして Photoshop を再起動して下さい。

Windows – C:\Program Files\Adobe\Adobe Photoshop CS6\Presets\Scripts
Mac – /Applications/Adobe Photoshop CS6/Presets/Scripts/

※環境によっては違う場所にあります。

2.PSD を開き、スクリプトを実行

次に、テキストを抽出したい PSD を開き「ファイル」→「スクリプト」→「TextExportToCSV」からスクリプトを実行します。

TextExportToCSV_02

3.CSV ファイルで出力完了

スクリプトを実行後、CSV ファイルが指定した場所に保存されますので
「Shift-JIS、カンマ区切り」で開いてください。
「テキスト、フォントの種類、フォントのサイズ・色(HEX,RGB)」が表示されます。

あとはこれを開発者の方に渡すだけで、フォントの指示とはおさらばです。

TextExportToCSV_03

※スクリプト実行時に

スクリプト実行時にレイヤー数が多すぎる場合、実行に時間がかかってしまいます。
その場合、レイヤーの検索機能で不要なレイヤーを削除してから実行するとスムーズです。
※ Photoshop CS6 からの機能です。

TextExportToCSV_04

いかがでしたでしょうか?
フォント指示の簡略化という些細なものですが、皆様の手助けになれば幸いです。

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

 

Facebook コメント

コメント

コーディング楽ちんテクニック ~Photoshop編~ | Qrious Blog2014年11月18日 12:02

[…] ①「TextExportToCSV」をここからダウンロード。 […]

TextExportToCSV(psdデータからテキストを抜出すツール。 フォントやカラーなどをエクセルに ) | jnome2016年06月12日 0:51

[…] 詳しくは http://blog.fenrir-inc.com/jp/2013/05/psd_text_export.html […]

なぜか忙しいあなたに、デザイン作業を高速化するおすすめPhotoshopプラグイン | Web制作ナビ2016年06月16日 13:33

[…] TextExportToCSV(無料) | 使い方 ※Photoshop CS6対応 […]

名前(必須)

メールアドレス(必須)

URL

スタイル用のタグが使えます

このコメント欄でのご質問、ご要望には、開発チームから回答できない場合があります。ご質問、ご要望は「User Community」内のフォーラムまでお寄せください。