Photoshop用 『[Resonance] ゲーム制作支援ライブラリ

色管理.jsx

last update : 2007/02/17 | version : 1.00

スクリプト情報

機能:
色設定ファイルに従って以下の事ができます。
『色準備済み新規レイヤーの生成』
『既存レイヤーの塗り直し』
『色見本一覧画像の作成』
対象:
現在アクティブなPSDドキュメント
(ルート直下のレイヤー群・レイヤーセット内のレイヤー群)
(サブレイヤーセット内も可)
対象レイヤー名:
名前に"="が含まれるレイヤーが対象となります。
"="から空白までの文字列が色設定表の対応名になります。
出力先:
同ドキュメント内

使い方

※このスクリプトの実行には専用のアクションが必要です。
"[Resonance]-スクリプトイベント.atn"を予めPhotoshopに読み込んでおいて下さい。
※このスクリプトで使用する「色設定ファイル」はCSV(カンマ区切り)ファイルです。
表計算ソフト等でも編集可能ですが、値内の「,」(半角カンマ)と「"」(半角ダブルクォーテーション)はエスケープされません(「"」は破棄されます)のでご注意下さい。

使用例:レイヤー生成

色設定ファイルに基づいて新規レイヤーを生成してみましょう。

生成前の空のPSDファイル:
レイヤー生成例

ここでは予め用意しておいた「[色設定]-例子.csv」という色設定ファイルを使ってみます。

スクリプトの【レイヤー生成】ボタンで新規レイヤーを生成:
レイヤー生成例
▼スクリプト実行
生成された色設定適用済み新規レイヤー:
レイヤー生成例

色設定ファイルに基づいて新規レイヤーが生成されました。

標準のアクションでは、親レイヤーは「べた塗りレイヤー」+「ベクトルマスク」になり、子レイヤー群は「べた塗りレイヤー」+「レイヤーマスク」になります。

親レイヤーのベクトルマスクを編集:
レイヤー生成例

パスで親レイヤーのベクトルマスクを描くと、その範囲にベース色が表示されます。※1

そして子レイヤーのレイヤーマスクに描画すると、それぞれの種類に応じた色が表示されます。※1

子レイヤーのレイヤーマスクを編集:
レイヤー生成例
レイヤー生成例
レイヤー生成例

このように、「ベクトルマスクへのパス描画」・「レイヤーマスクへの白黒描画」をするだけで規定の色を反映した塗りになるので、色の変更に煩わされることなく作業に専念できます。



また、レイヤー名に"=(名前)"が含まれていれば対象レイヤーになるので、そこさえ変えなければ、彩色の進行に合わせてレイヤー名を変更できます。※2

具体的な使用例:
レイヤー生成例

上の例では"=髪"の後に空白をあけてから補助の名前を入力しています。

また、"="記号の前に文字を入れているレイヤーもあります。

これらの部分はこのスクリプトからは無視されるため、自由に変更できます。

※1
自動生成されるレイヤーの設定については、対応するアクションを調節する事で変更可能です。
※2
"=(名前)"の後に文字を入れる場合は空白を空けてから入力してください。空白は、半角・全角どちらでも構いません。

使用例:色設定適用

次に、色の変更を既存レイヤーに反映してみましょう。

変更前:
色設定適用例

まずは直接色をいじってみます。

一部変更:
色設定適用例

前髪の色を変えてみました。

後はこの変更を他の部分にも適用したいところです。

そこでこのスクリプトを起動し、設定項目を「色編集」に変更して、新しい色を色設定ファイルに反映します。

ここでは「[色設定]-例子.csv」のデータを複製した「[色設定]-例子・赤髪.csv」という色設定ファイルを使って進める事にします。※3

色編集モードで髪の色を変更:
色設定適用例

【描】ボタンを押すと描画色、【背】ボタンを押すと背景色のカラーコードが挿入されます。直接カラーコードを入力しても大丈夫です。

編集したカラーコードは編集エリア内の【適用】ボタンを押さないと反映されませんのでご注意下さい。

それが済んだら設定項目を「色設定表」に戻し、【色設定適用】ボタンを押します。

色設定表モードから塗り直し実行:
色設定適用例
▼スクリプト実行
塗り直された対応レイヤー:
色設定適用例

各対応レイヤーが、新しい色設定表に基づいて塗り直されました。

※3
「ファイル:」欄のファイル名を変更するだけで、現在の設定をコピーした新たな色設定ファイルが生成(または上書き保存)されます。

使用例:色見本作成

さて、いくらこのスクリプトは便利だといっても、スクリプトを使わないと規定の色を参照できないようでは、逆に不便な事もあります。

そこで、色設定ファイルに従って色見本画像を作成してみましょう。



色見本作成のためには、"<template>"という名前のレイヤーセットを用意します。

その中に、各対応レイヤーを配置し、ベース用のレイヤーには"<base>"という名前を、パーツ名を反映するテキストレイヤーには"<name>"という名前を付けておきます。



そして"<template>"レイヤー名に複製毎の移動量を追記します。

"<template> x-20 y-10"と書けば、パーツを生成する毎に表示位置が左上(横-20px・縦-10px)にずれていきます。

"<template> x+0 y+20"と書けば、パーツを生成する毎に表示位置が下(縦+20px)にずれていきます。ここでは縦に並べてみる事にします。

色見本用レイヤーセット"<template> x+0 y+20":
色見本作成例

この"<template>"レイヤーセット上でスクリプトを起動すると、【レイヤー生成】ボタンが【色見本作成】ボタンに変わるので、これを押して色見本を作ります。

色見本画像作成:
色見本作成例
▼スクリプト実行
作成された色見本画像:
色見本作成例

このように各色を反映した色見本画像ができあがりますので一目瞭然ですし、後はここからスポイトツールで色を拾うという使い方もできるようになりました。

設定

設定ダイアログ(色設定表):
色管理
設定ダイアログ(色設定表)・1
ファイル名フィルタファイル一覧に表示される色設定ファイルを、ここに入力された文字を含む名前の色設定ファイルのみに絞り込みます。
正規表現で指定可能です。
「色設定ファイル検索サブフォルダ最大深度」が1以上の場合、参照先のフォルダ直下のファイルは常に表示されるようになり、サブフォルダ内のファイルにのみ絞り込みが行われるようになります(共通の設定ファイルを使う場合に利用します)。
ファイル特定のフォルダ内にある色設定ファイルの一覧です。
ここから使用する色設定ファイルを選択します。
この一覧に表示されるのはファイル名に"色""カラー""color"のいずれかを含む、拡張子"txt""text""csv"のファイルだけです。
【参照】色設定ファイル検索フォルダを変更します。
設定ダイアログ(色設定表)・2
(種類名)カラーコード一覧の上に、色の種類名が表示されます。
"=(名前)"という名前のレイヤーに対して"ベース"の色を適用し、それ以降は"=(種類名)"のレイヤーに対して各色を適用します。
(カラーコード一覧)色設定ファイルに保存されているカラーコードの一覧です。
ここに表示されている名前の対応レイヤーが処理の対象となります。
【↑】【↓】カラーコード一覧の順番を一時的に入れ替えます。
レイヤー生成時の上下構造に影響します。
【選択反転】一覧の選択状況を反転し、選択アイテムを未選択状態に、未選択アイテムを選択状態にします。
【選択項目を抽出】マウスクリックによって選択したアイテム([Ctrl][Shift]キーとの併用で複数選択可能)以外を一時的に一覧から除外します。
【抽出前にもどす】【選択項目を抽出】ボタンを押す前の状態を復元します。
設定ダイアログ(色設定表)・3
【レイヤー生成】カラーコード一覧に表示されている色設定に基づいて、それらの色が予め適用された新規レイヤーを生成します。
使用例:レイヤー生成
【色見本作成】色設定にって"<template>"レイヤーセットを基に色見本画像を作成します。
使用例:色見本作成
【色設定適用】色設定に基づいて、既に存在する対応レイヤーの色を更新します。
使用例:色設定適用
【キャンセル】スクリプトを中止します。変更した設定は保存されずに破棄されます。
【適用】変更した設定を保存します。
設定ダイアログ(色設定表)・4
(設定項目一覧)設定メニューのページを切り換えます。
【前の項目へ】設定メニュー一覧のひとつ上のページに切り換えます。
【次の項目へ】設定メニュー一覧のひとつ下のページに切り換えます。
設定ダイアログ(色編集):
色管理
設定ダイアログ(色編集)・5
ファイル現在編集中の色設定ファイルです。
このファイル名を変更すると、新たな色設定ファイルとして保存されるか、又は同名の既存ファイルを上書き保存します。
種類名現在編集中の色設定ファイルの色の種類名を編集します。
左から順に半角カンマ(",")区切りで複数登録可能です。
左から1番目はレイヤー名を表すエリアです。
左から2番目は対応する色名に対応するレイヤーの基本色です。
一つの種類名の中に半角パイプ("|")区切りで複数登録可能です。
設定ダイアログ(色編集)・6
(カラーコード一覧)現在編集中の色設定ファイルのカラーコード一覧です。
ここを選択すると右側の編集エリアにその行のデータが詳しく表示されます。
(名前)現在編集中のカラーコード名です。
同じ色設定ファイルの中で名前の重複はできません。
半角パイプ("|")区切りで複数の名前を登録できます。
(各種類対応色)各種類の入力ボックスに16進数のRGBカラーコードを入力する事で、その色を設定できます。
【描】現在の描画色のカラーコードを同じ行の入力ボックスに入力します。
【背】現在の背景色のカラーコードを同じ行の入力ボックスに入力します。
【適用】現在編集中の値を、カラーコード一覧の選択行に適用します。
このボタンを押さないと編集した値は反映されません。
【追加】カラーコード一覧をどれも選択しない状態で編集エリアに値を入力してこのボタンを押すと、カラーコード一覧に設定を反映した新たな行を追加します。
【削除】カラーコード一覧から選択した行を削除します。
設定ダイアログ(詳細設定):
色管理
設定ダイアログ(詳細設定)・7
色設定ファイル検索
サブフォルダ最大深度
色設定ファイルを探す際に、基準フォルダから何レベルまでサブフォルダを検索するか変更できます。
あまり深くまで検索する設定にすると、起動が遅くなる事があります。
起動時に前回の
色抽出状況を再現
色設定ファイルの一覧から、選択&抽出したリストを次回起動時に自動的に再現します。
グループ毎にレイヤーセットを生成レイヤー生成時、各パーツ毎に新規レイヤーセットを用意してその中に規定色レイヤーを生成します。
カラーコードを大文字で表記16進数で表されるカラーコードの"a"~"f"を大文字にします。
確認ダイアログを表示実行前後に確認ダイアログを表示して処理をキャンセル可能にします。
現在設定のメタデータを取得ファイル名フィルタの値をメタデータとして取得します。
取得したメタデータは「ファイル情報」内にコピー&ペーストする事で、その設定が自動的に適用されるようになります。
すべての設定を標準の値に戻す変更した設定をすべて初期化します。

アクション解説

アクション実行タイミング([Resonance]-スクリプトイベント.atn)
アクション名実行タイミング
親レイヤー作成新規にベースカラーのレイヤーを作成する時
子レイヤー作成ベースカラーの後でそれ以降の各種類の色のレイヤーを作成する時
レイヤー塗り潰し各対応レイヤーを塗り直す時
"(レイヤー名)"
が作成された時
「(レイヤー名)」に一致する名前のレイヤーが作成された後
"(レイヤー名)"
が塗り潰された時
「(レイヤー名)」に一致する名前のレイヤーが塗り直された後
アクション機能([Resonance]-スクリプトイベント.atn)
アクション名対応レイヤー名効果
親レイヤー作成「名前」の値「ベース」の色を描画色に持って実行されます
子レイヤー作成各種類名対応する種類の色を描画色に持って実行されます
レイヤー塗り潰し「名前」の値
各種類名
対応する色を描画色に持って実行されます
"(レイヤー名)"
が作成された時
(レイヤー名)特定のレイヤー名の時に特別な処理をしたい場合のためのアクションです。
「(レイヤー名)」部分を変更して、アクションを編集して下さい
"(レイヤー名)"
が塗り潰された時
(レイヤー名)※(同上)

メタデータ使用例

ファイル名フィルタの値はメタデータとして取得可能です。

例えば以下のフィルタ設定の場合を例に見てみましょう。

ファイル名フィルタ設定:
使用例

この設定の場合、ファイル一覧には「例子」を含むファイル名の色設定ファイルしか表示されなくなります。



この状態で「詳細設定」ページの【現在設定のメタデータを取得】ボタンを押すと上のフィルタ設定がメタデータ文字列に変換されます。

変換されたメタデータ:
使用例

これを「ファイル情報」内のどこかにコピー&ペースすればメタデータの埋め込み完了です。

埋め込まれたメタデータ:
使用例

こうしておくと、メタデータが埋め込まれたPSDファイルからスクリプトを起動した際に、例え設定を初期化しても、ファイル名フィルタの値が自動的に適用されるようになります。

メタデータから自動適用されるファイル名フィルタ設定:
使用例

使用する色設定ファイルの絞り込み条件をPSDファイル毎に自動的に切り換えられるので、うまく使うと便利です。



ただし、後でファイル名フィルタ設定を変更しても次回スクリプト起動時には必ずメタデータの設定の方が優先されますのでご注意下さい。

http://www.re-sonance.com/ | webmasteratmarkre-sonance.com | Copyright 2007-2008 Saitoh Kagura.