タグ別アーカイブ: Photoshop

Adobe Photoshopについて

PhotoshopのJSXでレイヤーの絶対座標への移動

Photoshopnのtranstaleメソッドだと、レイヤーが現在いる場所からの相対座標の移動の指定しかできないためキャンバスを基準とした絶対位置への移動をしていできる関数を作成しました。

使用方法

第一引数には移動させたいレイヤーのレイヤー名を、第二引数・第三引数にはXとYそれぞれの座標を渡してあげると動作します。
おなじレイヤー名がある場合のエラーハンドリングとかはしていないのでよきようにしてもらえると。

ソース

Photoshopで外部画像をリンク配置するJSX

使用できるのはリンク配置機能が追加されたCC意向だと思う。
検証はしていない。
引数で渡すリンク配置画像のパスは絶対パスで渡し、バックスラッシュの表記は不可。
必ずスラッシュに置き換えてから使用する。

非表示レイヤーを削除

PhotoshopのJSXでヒストリーの一番初期に戻す関数

ヒストリーの最初の段階に戻すメソッドがドキュメントを見ても見つからなかったので、
Scripting Listenerで吐き出されたソースを少し改変して作成。

使用方法

基本的には以下の関数を実行すればヒストリーの一番上に戻ります。
(※ヒストリーパネルのファイル名をクリックした時と同じ挙動)

ソース

PhotoshopのJSXで指定したレイヤーの複製を作成する関数

任意のレイヤーを指定した名前で複製する関数を作成してみました。

使用方法

第一引数には複製したいレイヤーの名前を文字列で渡し、第二引数には複製したレイヤーの名前を文字列で渡します。

ソース

PhotoshopのJSXで指定したCSVファイルをparseする関数

Photoshopで大量の自動処理を行う場合、どこからかデータを取得する必要が多く発生します。
PhotoshopではCSVファイルを読み込むことが可能なので、CSVを読み込みparseする関数をつくってみました。

使用方法

引数にはCSVファイルを配置しているディレクトリのパスを文字列で渡します。
CSVは一行目はそのカラムのタイトルを記載しておき、それ以下はそのカラムのタイトルに応じた値を追記していきます。
parseされたCSVは二次元配列で返され、data[カラム名][行番号]で呼び出すことができます。

ソース

PhotoshopのScripting Listenerで取得したJavaScriptのメソッドまとめ2

前回メモしたScripting Listenerで吐出されるJSのメモ二回目。

非表示レイヤーを削除

表示レイヤーのみ結合

PhotoshopのScripting Listenerで取得したJavaScriptのメソッドまとめ

Photoshopの自動処理をJavaScriptで書いていると、なかなか任意のメソッドを見つけられない時があります。
PhotoshopのScripting Listenerを使用すれば自分で行ったアクションをすべてJS形式で吐き出してくれるので、必要なコード部分だけを取り出し関数化しておけば希望の処理を行うことができます。
自分でよく使っていた関数をメモしておきます。

レイヤーを最前面に

レイヤーマスクをかける

レイヤーのピクセル描画範囲から選択範囲を取得

レイヤーを一階層下へ

レイヤーをスマートオブジェクト化

Photoshop データセットで大量の差分イメージを作る方法

1

一応タイトルは「Photoshop データセットで大量の差分イメージを作る方法」とつけましたが、具体的には、たとえばバナーを作成したとして、一部文言を変更し大量に書き出したいときなどにこの方法を使うと効率的にデータを作成することができます。

で、上記の用なことはだいたい”Photoshop データセット”でググれば詳細の記事が出てくるのかと思うのですが、自分自身がこの機能を初めて利用したのはソーシャルゲームのカード画像を大量に作成しなければならないときでした。なのでちょっとそこら辺を題材にして解説してみようかと思います。

思い返せば2年以上前の話ですが、ソーシャルゲームのデザイン(UI、各種ページ部材等)を担当したときの話です。ソーシャルゲームはwebサービスでもあるので、各機能のUIを考えるのもなかなかに大変なことだと思うのですが、さらに切っても切れないのが大量のカードを作成しなければいけないということです。例えば作成するカードの構成要素が以下だったとして、

2

これらを手作業でフォーマットにそって画像を作成していこうとすると・・・

1.作成するキャラクターのレア度を確認しそれに応じたpsdを開く

4

2.キャラクターのイラストを配置

5

3.キャラクター名のテキストレイヤーに、配置したキャラクターの名前をコピペ

6

という作業が必要になってきます。
10枚かそこらの数だったら上記の方法でもまったく構わないと思うのですが、1000枚以上のカードが必要になることなどザラなので、手作業なんかでやってられません。ミスも恐いですしね。1000枚もあれば確実にコピペミスなどやらかしちゃいます。

当時、どうしようかと絶望にひしがれながら何か良い方がないかとグーグル先生にいろいろ聞いたところ、データセットで書き出しなるものを発見。
これは使える!!と思い実際につかってみることにしました。経緯などつらつら書きましたが以下から手順になります。

1.フォーマットになるpsdのレイヤーを整理する

フォーマットのpsdをもとに大量のデータが作成されるため、レイヤーの統合などをしっかりと行い不必要なレイヤーは残らないようにします。
最下層レイヤーにはファイル名を保持しておくテキストレイヤーを用意しましょう(詳細は後述)。このテキストはデザインには一切関係ないため、フォントサイズは最小にし不透明度も0%にしておきます。

9

2.各レイヤーに変数名をつける

テキストを差し替えたいレイヤーや、イメージを差し替えたいレイヤーに、変数名をつけてあげます。
変数名付け方は、つけたいレイヤーを選択し
イメージ > 変数 > 定義
現れたダイアログの以下の部分を任意の名前に変更。
(例:キャラクターレイヤーの名前だったらchrとか)
イメージレイヤーのみにある置き換え方法はものによっては変更なしの方が良いかも知れません。

[イメージレイヤーのダイアログ]
7

[テキストレイヤーのダイアログ]
8

差し替えたいと思うレイヤーにすべてこの作業をしていきます。

3.変数に代入する値の情報が記載しているCSVを用意する

一応CSVの解説は以下になります。
http://ja.wikipedia.org/wiki/Comma-Separated_Values

自分自身上記の説明をみても、よくわからない感じなのですが、
個人的にはカンマ区切りで表を表現してるみたいな感じで勝手にイメージしています。
実際CSVファイルを作成するときもExcelで作成していました。
※もちろんテキストエディタとかでも作成できます。
以下ではExcelを使用して作成方法を解説します。

まず、一番上の行にはpsdで設定した変数名をそれぞれ記述しておきます。
ここに記載した変数名の数と、psdで設定した変数名の数に差異があるとエラーがでてしまうので要注意です。

10

そして各列に必要な情報を記載していきます。テキストレイヤーの列には代入したいテキストを、イメージレイヤーには差し替えたいイメージのファイル名(ファイルパス)を記載していきます。

11

これでデータの記述は完了です。
最後にファイルを保存する際に.csv形式を選択し保存します。

4.psdにCSVファイルを読み込ませる

各レイヤーに変数名を設定したフォーマットのpsdを開きます。
そしてイメージ > 変数 > データセット
を選択すると以下のようなダイアログが出てきます。

12

そして、読み込みを選択すると次のようなダイアログがでてきます。

13

ここでは「最初の列をデータセット名として使用」にチェックを入れるようにしましょう。
先ほど作成したCSVの最初の列、つまりfile_nameの列がデータセット名となり、ファイルを書き出す際のファイル名にすることができます。
レイヤーにファイル名というレイヤーを用意した理由は、psdで設定した変数の数と、CSVの変数の数に差異があるとエラーがでてしまうため、無理やり代入するレイヤーを作って対応している感じです。
無事にCSVの読み込みが完了すると以下のように読み込まれた情報が表示されます。

14

このときエラーが出た場合ポップアップで通知されます。
エラがー出た場合まず疑わしいのはpsdで設定した変数の数とCSVで記載してある変数の数の差異です。
そこも間違っていないようなときは、CSV作成時に余計な要素が入ってしまった可能性もあるので、既存のCSVの必要な範囲をコピーし、新たなファイルに貼り付け保存し再読込するとエラーがでなくなるケースがよくあったので、理由がわからないような時はためしてみるといいかもしれません。

ここまできたら後は書き出すのみです。
ファイル > 書き出し > データセットからファイルを書き出し
を選択し、ファイル名の付け方を以下のようにデータセットのみにします。

15

あとは書き出し先のディレクトリを選択して書き出すのみです。あっという間に複製されたpsdが指定のディレクトリに追加されていきます。
結果は以下のようになります。

16

長々となりましたが、今回はソーシャルゲームのカードを題材にPhotoshopのデータセットについて解説してみました。
それ以外にも使いどころはあったりすると思うので、覚えておけばどこかで作業の効率をぐんとあげられるかもしれません。

またもっと複雑な処理を行いたい場合はJavascriptなどを用いて処理をさせる必要がでてきます。
こちらのやり方もどこかで解説できればと思います。