とある知り合いの個人作家のwebページ制作のご相談を受けているのですが
デザインをご自身でやりたいということでPSDでデータを頂きました。
これが言葉を選びますが、、、ページ数が多く結構粗いのです。
文字として表現されているレイヤー一つとっても、
テキストとなぜかラスタライズ(ビットマップ画像化)されたレイヤーが混在していたりします。
全体量とステータスをある程度データとして先方に明示しつつ作業を進める必要がありそうだということで
取得できる文言とそれ以外の画像テキストを明確化するための補助ツールを書くことにしました。
After Effects Scriptを選択
Photoshopでもスクリプトは書けるわけですが使い慣れたAEのScriptとして書いてみました。
何かしら加工するならPsを選択する必要があるかもですが、テキストのソースを取得するだけなのでAEで問題ありません。
ただ、このスクリプトを書くまで、恥ずかしながら知らなかったAEの機能もありました。
それが”編集可能テキストに変換”です。そもそもテキスト活かしでPSDファイルを扱うということがなかったのもあり
全く知りませんでした。
これができるならIllustratorのテキストも同様に処理ができるようになったのでは!?
と思い勇んで開きましたがやはりだめでした。
ちなみに、AEで処理できる場合の個人的なメリットとしては
一括でファイルを読み込んで処理できるという点でわかりやすいですね。
プロジェクトパネルをブラウザ代わりに確認するのも楽です。
もちろんPsで慣れてる方ならば関係ないでしょうけれども。
処理プロセス
- psdを読み込む。通常はカスタマイズ済みのSmartImportという標準スクリプトで
フォルダ内のpsdをコンポジションとして読み込む。 - 全てのcomp内のレイヤーに隈なく”編集可能テキストに変換”のコマンドを実行
- 変換できたレイヤーのソーステキストを取得
- コンポジション毎にリストとしてcsvファイルとして出力
といった流れでデザインしてスクリプトを書きましたがバッチリ機能します。
これは、htmlのタグなども付与するなどの応用も効きそうな気もします。
、、、が、この先のデザイン整理をこちらでするならばPsを使うことはないのでその必要もありませんが
PSDに限らずテキストレイヤーのソーステキストを網羅的に拾い上げることができるので
改修含め使い途はあると思っています。