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 アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください!

 

Copyright © 2018 Fenrir Inc. All rights reserved.