ツールパレットに表示されるアイコンは、マニフェスト(manifest.xml)の<Icons>タグで指定された画像が使用されます。

今のところExtension Builderのテンプレートを変更していませんので、以下のようになっているはずです。

<Icon Type="Normal">./icons/iconNormal.png</Icon>
<Icon Type="RollOver">./icons/iconRollover.png</Icon>
<Icon Type="DarkNormal">./icons/iconDarkNormal.png</Icon>
<Icon Type="DarkRollOver">./icons/iconDarkRollover.png</Icon>

タグにある要素Typeとの対応は以下のようになっています。

  • Normal ブライト系テーマ/デフォルトの状態
  • RollOver ブライト系テーマ/カーソルが重なっているとき
  • DarkNormal ダーク系テーマ/デフォルトの状態
  • DarkRollOver ダーク系テーマ/カーソルが重なっているとき

 

CEP SDKのドキュメントには以上のような4項目が書いてあるのですが、実際のUIでは純正パネルもRollOverが機能していません(Photoshop CC 2014)。なので、NormalとRollOverは同じものを指定しておけばよいでしょう。

また、Extension Builderのテンプレートでは「Disabled」というTypeも記述されていますが、アプリケーション側がそういう状況を作り出すことはないので不要です(SDKのドキュメントにもこのTypeの記述はありません)。

よって、ブライト系テーマとダーク系テーマに対応する、2種類のアイコンを用意すればよいでしょう。

 

<アイコン画像の作成>

ツールバーのアイコン表示領域は23px×23pxです。ただし、ツールバーはハイライトされたときにボタン化されるので、そのときのエンボス部分を考慮し、実際に絵柄を収める領域は縦横19~21px程度に収めるのが無難です。

一見すると左側に余裕があるので「横長のスペースなのでは?」と思ってしまいますが、表示領域はあくまで正方形です。

 

この表示領域に合わせ、「ボタン用アイコンの作成」と同じ要領でダーク系用とブライト系用のアイコンを作成します。ブライト系用のものは単純に階調を反転して作成しました。

 

これらを「ボタン用アイコンの作成」と同じ要領でプロジェクトに追加します。

 

そして、このファイル名に合わせてマニフェストファイルも変更します。

<Icon Type="Normal">./icons/toolicon_x.png</Icon>
<Icon Type="RollOver">./icons/toolicon_x.png</Icon>
<Icon Type="DarkNormal">./icons/toolicon.png</Icon>
<Icon Type="DarkRollOver">./icons/toolicon.png</Icon>

 

これでPhotoshopのツールパレットでの表示が、以下のように変更されるはずです。

  変更前

  変更後

  テーマ変更にも対応

 

以上で<初級編>は終了です。

サンプルソースコード(画像付き)のダウンロードは「こちら」から。

 

自家用であればこのままデバック状態でも使い続けられますが(むしろ素早く改良できる)、他人に配布する場合、利用者にBracketsをインストールし、Photoshopをデバックモードにしてもらうわけにはいきません。

プラグインとして配布する場合は、一連のファイル群を「パッケージ化」する必要があります。

参照:Extensionのパッケージ化とインストール 

 

 

Joomla templates by a4joomla