【Photoshop】拡張機能のカスタムパネルのデザインのGUIの調整方法について

photoshop-custom-panel-design

【Photoshop】拡張機能でカスタムパネルを作成する方法 – CGメソッド

前回、カスタムパネルを作成してみた訳ですが、見た目を少し調整してみました。

f:id:min0124:20170808211149p:plain

適当にスクリプトを追加して、タブをつけて、中はアコーディオン式に展開できるように変更。

いじり始めると止まらないので、一旦ここまで。

JSX(hostscript.jsx)

hostscript.jsxから使う機能のスクリプトを読み込んでいるのですが、さらに外部参照にしました。

  • 1.同階層にscriptsフォルダを作成して、使う機能(AAA.jsx)のスクリプトを置く
  • 2 hostscript.jsxには#include "/c/Users/ユーザー名/AppData/Roaming/Adobe/CEP/extensions/custompanel/jsx/scripts/AAA.jsx"とだけ記述

※ 相対パスだと上手く行かなかったので、絶対パスにしています。

JavaScript(main.js)

ボタンを押した時に機能が動くような記述を追加するだけ

  $("#AAA").click(function () {
csInterface.evalScript('AAA()');
});

HTML(index.html)

アコーディオンを追加

<code>


便利ツール
</code>

最初から展開する場合は

<code>


便利ツール
</code>

タブを追加

ヘッド<head></head>間に下記のコードを追加

<code>%MINIFYHTMLb3e41c10095b2035861d8625a0b26fc114%%MINIFYHTMLb3e41c10095b2035861d8625a0b26fc115%</code>

ボディ<body></body>の中の先頭に下記のコードを追加



  • メニューA
  • メニューB
  • メニューC

タブの中身

先頭は
div class="tabContent active"></div>

残りは
<div class="tabContent"></div>
で区切る

※CSSも設定しないと上手くタブが作動しません。

CSS(styles.css)

変更したところ

ボタンのラベルを中央合わせに

div { text-align : center ; }

ボタンのサイズをまとめて記述

.topcoat-button--large--cta{
width: 100%;
}
.topcoat-button--large{
width: 100%;
}

タブ関係

ul.tab {
width: 100%;
list-style: none;
padding-left: 0;
}
ul.tab li {
float: left;
height: 30px;
font-family:inherit;
vertical-align: middle;
color:inherit;
font-size:inherit;
text-align: center;
width: 33.3%;
padding: 0 10px;
background-color: #595b5b;
color: #fff;
cursor: default;
}
ul.tab li:hover {
background-color: #539fe1;
color: #fff;
}
ul.tab li.active {
background-color: #368bdc;
color: #fff;
}
div.tabContent {
clear: both;
width: 100%;
display: none;
}
div.active {
display: block;
}

参照しているスタイルシート

topcoat-desktop-dark.min.cssを使用。今のところ特に変更してません。

Topcoat

XML(manifest.xml)

パネル名、拡張機能名がhelloworldのままだったので、Custom Panelに変更しました。

※ Photoshopを再起動しないと変更されません。

参考

シンプルで使いやすいタブメニューを超簡単に作成する方法 | ふかふか交易所