【新着】55種類全てのバンドル買い切り『AEJuice ALL BUNDLE Lifetime』がセール価格14,600円(゚∀゚)!!

【After Effects】『KBar2』拡張スクリプト『KBartender 2』の購入方法、ダウンロード・インストール方法、機能や使い方を徹底解説!!

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説

After Effects

目次

『KBar2』拡張スクリプト『KBartender 2』の購入方法、ダウンロード・インストール方法、機能や使い方を徹底解説!!

ふにゃ太郎
ふにゃ太郎

『KBar2』をカスタマイズできる『KBartender 2』という拡張スクリプトがあると聞いたのですが

ご存知でしょうか(゚∀゚)!?

NEXTist
NEXTist

『KBartender 2』は中々クセの強い拡張スクリプトだね( ̄∇ ̄;)

使いこなすと超便利だから、一度触ってみる価値はあると思うよ♪( ´θ`)ノ

ふにゃ太郎
ふにゃ太郎

なるほどっ(°▽°)!!ただ機能を解説した記事や動画がほとんどなくって…|ω・`)チラッ

NEXTist
NEXTist

出たっ|ω・`)チラッ

解説するのちょっと大変だけど…(ー ー;)『KBar2』ユーザーにはおすすめできるスクリプトだから

できる限りわかりやすいように頑張って解説してみるね(´∀`*)


今回は『KBar2』の拡張スクリプト『KBartender 2』の購入方法と設定方法、機能と使い方を徹底解説していきたいと思います^^



少々クセのあるスクリプトですが

「『KBar2』をとことんカスタマイズしたい!!」

「『KBar2』の設定やデータ管理をもっと楽にしたい!!」

という方は、ぜひ最後まで見ていただければ幸いです(´∀`=)


*『KBar2』の機能や使い方、購入方法、ダウンロード・インストール方法について徹底解説した記事はこちら⬇︎⬇︎

Adobe CC AfteAdobe CC After Effects Script KBar2 機能 使い方 解説 【After Effects】導入必須のランチャースクリプト『KBar2』を徹底解説!!


この記事は以下のような悩みや疑問をお持ちの方に役に立つ記事の内容となってます⬇︎⬇︎


『KBar2』の拡張スクリプト『KBartender2』とは!?

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定

『KBartender2』は『KBar2』の機能を拡張することができるスクリプトで

『KBar2』のデータを管理するためのディレクトリを作成して、その都度プリセットファイル(.jnon)に変換することで

『KBar2』で各ボタンを1つ1つ設定しなくても、『KBartender2』を使えば数回クリックするだけでツールバーやボタンの作成、アイコンデザインなどをまとめて設定できるようになりますd( ̄  ̄)

文字だけだとわかりにくいですよね…(ー ー;)

要は『KBar2』のデータを別の場所(ディレクトリ)で管理して

そこで一括設定した内容をプリセットファイル(.json)を使って『KBar2』に反映することができるスクリプトです^^

ディレクトリの中にはツールバーフォルダを作って

その中にツールバーに設定したい各種ボタンに必要なデータを入れていけば最終的にプリセットファイル(.json)で一気に設定を反映させることができます。

ボタンの中には『KBar2』では設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をツールバーのフォルダに入れておけば、『KBar2』を使ってワンボタンで開くように設定することができますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Select Directory 階層


『Illustrator』と連動してアイコンも一気に設定することができるのでかなり便利ですd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン


私が『KBartender2』を購入した理由は

『KBar2』では自身でカスタマイズした設定に別のプリセットファイル(.json)をインポートすると

カスタマイズした設定は全て上書きされてしまいます。


「自分のカスタマイズした『KBar2』に、あの無料配布されている便利でアイコンがかっこいいボタンを一気に追加することができたらいいのに…」

この悩みを解決してくれたのが拡張スクリプト『KBartender2』でした^ ^

価格は2,300円ほど、30%OFFクーポンを使えば1,600円くらいで手に入るので

『KBar2』カスタマイズライフをエンジョイしたい方は購入を検討してもいいかもしれません( ´∀`)


『KBartender2』の購入方法とダウンロード方法

『KBartender2』は海外サイトに『songZ』という方が販売していますd( ̄  ̄)

まずは『KBartender2』販売ページへ入ります⬇︎⬇︎


『KBartender2』の販売ページに入ったら『individual license』を選択して『これが欲しいです!』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定 サイト



メールアドレス入力と支払い情報(クレジットカード or PayPal)を入力して『支払う』を選択します。

『オファーコード』に割引コードredditfriendを使用すると30%OFFになるみたいです^ ^

*私は購入した後に知りましたので…実際に割引されるかはわかりません…(゚∀゚;)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  支払い 情報入力



支払いが済んで購入が完了したら内容を確認してから『Download』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  支払い完了 ダウンロード



ダウンロードページに入るので『ダウンロードする』をクリックします。

下にある『あなたのライセンスキー』は後でアクティベートする際に使用します。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  支払い完了 ダウンロード ライセンス



登録したメールアドレスにも『KBartender2』のダウンロードリンクとラインセンスキーが送られてきてるので、こちらを使用してもかまいませんd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 解説 設定 支払い完了 ダウンロード ライセンス



『KBartender2.3-Gumroad.zip』がダウンロードされます。

これで『KBartender2』のインストールに必要なファイルのダウンロードは完了です^^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  支払い完了 ダウンロード KBartender2.3-Gumroad.zip



『KBartender2』をインストール方法とアクティベートする方法

『KBartender2』をインストール方法とアクティベートする方法を順を追って解説をしていきますd( ̄  ̄)

『KBartender2』のインストール方法

『KBartender2.3-Gumroad.zip』を展開してフォルダを表示させます。

フォルダの中にはサンプルデータ『KBartender2_sample_directory』と

スクリプトファイル『KBartender2.jsxbin』

『KBartender2』のマニュアル『README』が入っています。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  jsxbin インストール



スクリプトファイル(.jsxbin)のインストール方法は2種類ありますd( ̄  ̄)

スクリプトをその都度開く場合にはアプリケーション ➡︎ 使用している『After Effects』ファイル ➡︎『Scripts』フォルダへドラッグ&ドロップで保存してください。

*『Windows』の方は『Support Files』 ➡︎『Scripts』へ保存してください。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  KBartender2.jsxbin Scriptsフォルダ 保存



『KBartender2』をワークスペースにドッキングして配置したい場合には

アプリケーション ➡︎ 使用している『After Effects』ファイル ➡︎『Scripts』➡︎ 『』へドラッグ&ドロップで保存してください。

『Windows』の方は『Support Files』 ➡︎『Scripts』➡︎『ScriptUI Panels』へ保存してください。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  KBartender2.jsxbin ScriptUI Panels 保存
NEXTist
NEXTist

ワークスペースにドッキングしてまで頻回に使用するスクリプトではないので

その都度開く方法でもいいかと思います^^



『KBartender2』をアクティベートする方法

『After Effects』を開いてから

その都度開く『Scripts』フォルダにスクリプトファイル(.jsxbin)を保存した方は

上部メニューの『ファイル』から『スクリプト』➡︎『スクリプトを実行…』を選択して

Adobe CC After Effects Script KBar2 無料 拡張スクリプト Primitives jsx インストール



『Scripts』フォルダに保存したスクリプトファイル『KBartender2.jsxbin』を選択して開くをクリックすると

『KBartender2』が開きます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  KBartender2.jsxbin スクリプトを実行



ちなみに2回目以降は『最近使用したスクリプトファイル』にスクリプトファイル『KBartender2.jsxbin』が表示されるので、毎回ファイルを探して選択する必要はありません^^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  KBartender2.jsxbin 最近使用したスクリプトファイル



ワークスペースのドッキングが可能な『ScriptUI Panels』フォルダの中にスクリプトファイル『KBartender2.jsxbin』を保存した方は

上部メニューの『ウィンドウ』➡︎ 『KBartender2.jsxbin』で『KBartender2』が開きます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  KBartender2.jsxbin 実行



『KBartender2』のパネルが開いたら『trial』と表示されている欄に『KBartender2』購入時に表示されていたライセンスコードをコピペして『Activate』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 解説 設定 アクティベート ライセンス コード



アクティベートが完了して『KBartender2』を使うことができるようになります(゚∀゚)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2  KBartender 2 解説 設定  アクティベート ライセンス 認証 完了



KBartender2』の機能や使い方

KBartender2』の機能や使い方を順を追って解説をしていきますd( ̄  ̄)


サンプルファイルを使って『KBartender2』の使い方の流れを一通り解説

KBartender2』にはサンプルファイルが用意されているので

最初はそのサンプルファイルをディレクトリと指定して設定しながら『KBartender2』の使い方を解説していきます^^


『1.Select Directory』➡︎ ディレクトリ(サンプルファイル)を指定する

まずパネルの『1.Select Directory』をクリックして

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Select Directory



購入したスクリプトファイル(KBartender2.jsxbin)が入っていたフォルダ内に

『KBartender2_sample_directory』フォルダがあるので選択して『開く』をクリックします。

これで選択したサンプルファイルをディレクトリ(データの保管場所)として読み込みました。

NEXTist
NEXTist

このディレクトリの中に名前をつけてフォルダやデータを整理していくことで『KBar2』の設定をすることができますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 サンプル Select Directory



サンプルファイルをディレクトリとして読み込むとパネルの下にディレクトリに含まれるツールバーの数とボタンの数が表示されます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Select Directory KBartender2_sample_directory



ディレクトリとして読み込んだサンプルファイル『KBartender2_sample_directory』の階層を見ると

サンプルファイルの下の階層にツールバーが3つ(toolbar_A,B,C)

さらに下の階層にそれぞれボタンとして機能するファイルが16個入っています。

ボタンの中には『KBar2』では設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をツールバーのフォルダに入れておけばワンボタンで開くように設定することができますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Select Directory 階層
NEXTist
NEXTist

要はツールバーの階層にツールバーフォルダを作成して、その各ツールバーフォルダの中にボタンに設定したいファイルをぶち込めばボタンとして設定することができます٩( ‘ω’ )و



『2.Generate JSON』➡︎ ディレクトリ内で調整したファイルを『KBar2』プリセットファイル(.json)としてエクスポートする

実際にディレクトリとして設定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar2』へ反映させていきますd( ̄  ̄)

『2.Generate JSON』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Generate JSON



ファイル名の入力と保存場所を指定して『保存』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Generate JSON エクスポート



これでディレクトリとして指定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar2』プリセットファイル(.json)としてエクスポートすることができました。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 Generate JSON プリセットファイル エクスポート



上部メニューのウィンドウ ➡︎ エクステンション ➡︎『KBar2』 を開いて

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 KBar2 開く



左上にあるメニューから『KBar Settings』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 KBar2 セッティングメニュー



『SETTINGS』➡︎ 『Restore』をクリックして

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 KBar2 SETTINGS Restore



先ほどエクスポートしたプリセットファイル(.json)を選択して『開く』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 KBar2 SETTINGS .json file Restore



ディレクトリとして設定したサンプルファイル『KBartender2_sample_directory』の内容(ツールバーやボタン)を『KBar2』へ反映させてることができました。

アイコンデザインはテキストになっていますが

『Kbartender2』の機能を使って一括でアイコンを変更する方法も後ほど解説しますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2  機能 使い方 解説 KBar2 ディレクトリ 反映



オリジナルのディレクトリフォルダを作って『KBartender2』とリンクする方法を解説

それでは実際に1からオリジナルのディレクトリフォルダを作って『KBartender2』とリンクする方法を解説していきますd( ̄  ̄)

サンプルファイルと同じようにオリジナルのディレクトリフォルダを作ります。

ディレクトリとして設定するフォルダを作成して適当に名前をつけてください。

今回は『KBartender2-directory』とつけました。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 KBar2 ディレクトリ フォルダ 作成



次はそのディレクトリフォルダ『KBartender2-directory』内に4つフォルダを作ります。

この4つのフォルダがツールバーになりますので、フォルダ名がツールバーの名前となりますd( ̄  ̄)

NEXTist
NEXTist

日本語名は文字化けします(ー ー;)ツールバーフォルダはいくつでも作成できます。

この階層に他のデータをおいても基本的に無視されますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 KBar2 ツールバー フォルダ 作成



これでディレクトリの準備が整ったので『After Effects』➡︎ 『KBartender2』と『Kbar2』を開きます。

『KBartender2』の『1.Select Directory』をクリックして

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 Select Directory



作成していたフォルダ『KBartender2-directory』をディレクトリとして選択、『開く』をクリックします。

これで『KBartender2-directory』がディレクトリとして『KBartender2』とリンクしました^ ^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 Select Directory フォルダ


『KBartender2』を使って『KBar2』のボタン作成やアイコンを設定する方法を解説

次は『KBartender2』を使いながら『KBar2』のボタン作成やアイコンを設定する方法を解説していきますd( ̄  ̄)

『KBartender2』のツールパネルには5つの機能が用意されているので、1つ1つボタンを作りながら解説していきます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル

『 C(Cancel selected folder cache)』

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Cancel selected folder cache

『Cancel selected folder cache』機能は『1.Select Directory』で設定したディレクトリとのリンクを解除(リセット)することができますd( ̄  ̄)

ディレクトリを変更したい場合などに使用しますが、ほとんど出番はありません…(゚∀゚;)

『 E(create extension/menu call script)』

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script

『create extension/menu call script』はエクステンションやメニューアイテムからスクリプトを作成することができますd( ̄  ̄)

『KBartender2』の『E(create extension/menu call script)』ボタンを押すと以下のパネルが表示されます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script



例えば

『extension or menu name』の欄にはエクステンションやメニューアイテムを入力しますが

入力する際には『After Effects』上に表記されている文字と一字一句、スペースまで間違いのないように入力しなければいけません。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test 入力



『Motion Bro v3.2.1』と入力して『Test』をクリックすると、『Motion Bro』が開きます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test



入力が間違っていると『Test』でエラーとなるので、間違っていないか確認しましょうd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test 入力 エラー



ちなみに日本語対応しているメニューもありますが、ほとんどが英語版でのメニューでないと正しく動作しませんでした…(ー ー;)

NEXTist
NEXTist

『新規コンポジション…』や『平面…』はいけましたが

『レンダーキューに追加』はいけませんでした(゚∀゚;)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test 入力 エラー



『Get name…』をクリックすると『paste to get whole menu list(貼り付けてメニューリスト全体を取得)』と表示されるので『OK』をクリックすると

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test Get name



『キーボードショートカット』の画面が表示されるので『クリップボードにコピー』を選択して

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test キーボードショートカット



テキストエッディットなどにコピーしたショートカット一覧をペーストして

そこからコピペしながらメニューを入力するとスムーズかと思いますd( ̄  ̄)

ただし、日本語メニューの場合は機能しないことが多いです…(ー ー;)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test キーボードショートカット一覧 コピペ



『Test』して問題なければ『Save』をクリックしてスクリプトファイル(.jsx)を書き出します。

名前とスクリプトのボタンを作りたいツールバーフォルダへ保存します。

今回は『Toolbar-1』フォルダへ保存します。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test スクリプト エクスポート



これでディレクトリ内のツールバーフォルダ『Toolbar-1』へ『Motion Bro』を開くスクリプトファイル(jsx)が保存されました。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test スクリプト エクスポート



実際にディレクトリがどうのように『KBar2』に反映されるか確認します。

『KBartender2』の『2.Generate JSON』をクリックして、プリセットファイル(.json)を書き出します。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test json エクスポート



『KBar2』の『SETTINGS』➡︎ 『Restore』をクリックして

先ほど書き出したプリセットファイル(.json)を選択して『開く』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test json Restore



これでディレクトリに設定したデータが『KBar2』へ反映されます。

NEXTist
NEXTist

ディレクトリの各階層と設定を反映した『KBar2』を比較すると、どの階層にどのフォルダやファイルを置けばいいのかわかるかと思いますd( ̄  ̄)アイコンの設定は後述します^^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル create extension/menu call script Test json 反映


『 M(Get the matchName of selected effect)』

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Get the matchName of selected effect

『Get the matchName of selected effect』では選択したエフェクトをボタンとして作成することができますd( ̄  ̄)

例えば

ディレクトリ設定はそのままで、エフェクト(グロー)を選択した状態で『KBartender2』の『M(Get the matchName of selected effect)』ボタンを押します。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Get the matchName of selected effect



保存場所を指定します。今回はグローエフェクトボタンを『Toolbar-2』に設定したいので

『Toolbar-2』を選択して『開く』クリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Get the matchName of selected effect ツールバー 保存



すると『Toolbar-2』に『ADBE Glo2』というフォルダが作成されます。

これでエフェクト(グロー)を適用できるボタンが『Toolbar-2』にできました。

NEXTist
NEXTist

『Kbartender2』のディレクトリ内でエフェクトボタンは『フォルダ』になります。

中には空で問題ありませんd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Get the matchName of selected effect  エフェクト フォルダ 保存



今回はこのグローエフェクトボタンにアイコンを設定してみます。

設定は簡単です。アイコンに設定したいPNG/SVGにボタンデータと同じ名前をつけて、同じツールバーフォルダ『Toolbar-2』に入れるだけですd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  アイコン デザイン 設定 PNG SVG



『KBartender2』の『2.Generate JSON』でプリセットファイル(.json)を書き出して

『KBar2』の『SETTINGS』➡︎『Restore』から書き出したプリセットファイル(.json)をインポートすると

『KBar2』の『Toolbar-2』にエフェクト(グロー)ボタンがアイコン付きで反映されます^^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  アイコン デザイン 設定 PNG SVG json Restore



『 Ai(Ai script: for easy creating button icons)』

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル Ai script: for easy creating button icons

『Ai script: for easy creating button icons』はIllustratorと連動して作成しているボタンに一括してアイコン(PNG/SVG)を設定することができますd( ̄  ̄)

今回は『KBartender2』のサンプルファイルを使って解説していきます。

サンプルファイルには各ツールバー(toolbar_A〜C)にそれぞれ4つずつ計16個のボタンデータが入っています。

サンプルアイコンは全てテキスト表示になっているので、各ツールバーごとに一括してアイコンを設定していきますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons サンプル



ディレクトリはサンプルファイル『KBartender2_sample_directory』を設定しています。

まず『KBartender2』の『Ai(Ai script: for easy creating button icons)』ボタンをクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons



『Ai(Ai script: for easy creating button icons)』ボタンをクリックすると

・『Illustrator』を開いている or 開いていない

・新しくドキュメント(.ai)を作成するのか、古いドキュメント(.ai)を利用するのか?

・新しくドキュメント(.ai)を作成するのか、現在開いているドキュメントを使用するのか?

など、状況によってその都度質問が表示され選択した条件で『Illustrator』を開くようになります。


全て説明するのは難しいのでフローチャートを作ってみました⬇︎⬇︎

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート



フローチャートを見ながら以下の3パターンに分けてると分かりやすいかと思います⬇︎⬇︎




【『Ai(Ai script: for easy creating button icons)』機能を使って初めてアイコンを一括設定する方】

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 初回



『Illustrator』を開いていない状態から手順を解説しますd( ̄  ̄)

まず『KBartender2』の『Ai(Ai script: for easy creating button icons)』ボタンをクリックして

『launch』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons 初回 launch



『Illustrator』が開いて『Open old file or Create new file?(古いファイルを開くか、新しいファイルを作成しますか?)』と聞かれるので『Create』を選択します。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Open old file or Create new file?



『Select α folder(based on KBar toolbar group)』と表示されたウィンドウが開くので、ディレクトリに設定しているツールバーフォルダの中からアイコンを一括設定したいフォルダを選択して『開く』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Select α folder(based on KBar toolbar group)



選択したツールフォルダ『toolbar_A』内に含まれるボタンデータの数だけ名前がついた状態でアートボートが作成されたドキュメントが開きます。

NEXTist
NEXTist

アートボードに直接表示されているアートボード名は『プロパティ』➡︎『アートボード編集』で

分かりやすいように一時的に表示していますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アートボート



それぞれのボタンに合わせてアイコンを各アートボートに作成、もしくはコピペしてサイズを合わせます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン



 上部メニューのウィンドウから『アセットの書き出し』パネルを表示させて

パネルの下にある四角のアイコンをクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン アセットの書き出し メニュー



『スクリーン用に書き出し』パネルが表示されるので上部タブを『アートボード』に切り替えて

・選択を『範囲』➡︎『すべて』に変更

・書き出し先をアイコンを設定したいツールバーフォルダ『Toolbar_A』に設定

・『書き出し後に場所を開く』『サブフォルダーを作成』のチェックを外す

・フォーマットはできればPNGよりSVG設定へ

設定が終わったら『アートボードを書き出し』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン デザイン アセットの書き出し 設定



これで保存先に指定したツールバーフォルダ『toolbar_A』内へ5つのアイコンデータ(.svg)が書き出されました。

NEXTist
NEXTist

ファイル名を少しでも変えてしまうとリンクしなくなるので注意ですd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン svg 書き出し



『KBartender2』の『2.Generate JSON』でプリセットファイル(.json)を書き出して

『KBar2』の『SETTINGS』➡︎『Restore』から書き出したプリセットファイル(.json)をインポートすると

『Toolbar-1』のボタンがアイコン付きで反映されます^^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons Ai Illustrator アイコン svg .json 反映
NEXTist
NEXTist

スムーズに反映されないこともあるので、その時は一度『KBartender2』を閉じて

再度開いてトライしてみてくださいd( ̄  ̄)




【『Ai(Ai script: for easy creating button icons)』機能で以前作成したドキュメント(.ai)を使って

アイコンを再度一括設定する方】

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 2回目以降



【『Illustrator』でアイコンをデザインして、そのドキュメントをそのまま『KBartender2』の Ai(Ai script: for easy creating button icons)』機能で利用したい方】

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 アイコン デザイン 設定 Ai script: for easy creating button icons フローチャート 2回目以降



『 ? 』アップデート情報やその他スクリプトの紹介など

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説 ツールパネル アップデート情報

『?』ボタンは『KBartender2』のアップデートや各種サポート・ライセンス情報などを見ることができたり、開発者である『songZ』さんが作ったスクリプトを見ることができますd( ̄  ̄)

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  アップデート情報 サポート ライセンス情報



『KBartender2』で『KBar2』にエクスプレッションボタンを追加する方法を解説

『KBartender2』では『KBar2』で設定できない各種ファイル(aep,ai,psd,c4d,csv,pdf…etc)をそのままツールバーフォルダに入れておけばワンボタンで開くように設定することができますd( ̄  ̄)

ただし、エクスプレッションをボタンに設定する場合には『JavaScriptファイル(.js)』を書き出して、ツールバーフォルダへ入れる必要があります。

『KBartendar2』のサンプルファイル内にある『Wiggle.js(JavaScriptファイル)』を見ると分かりやすいです^ ^

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript



サンプルファイル『Wiggle.js』をダブルクリックで開くと『Adobe Dreamweaber』が起動します。

*『Adobe Creative Cloud アプリ』より『Adobe Dreamweaver』をインストールしてください。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript Dreamweaver



修正したい場合には数値を書き換えて保存すれば変更されます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript Dreamweaver



新しいエクスプレッションのボタンを作りたい場合には新規作成 ➡︎『JavaScript』➡︎ 作成を選択して

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript Dreamweaver 新規作成



『KBar2』のボタンに設定したいエクスプレッションのコードを書く、もしくはコピペして

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript Dreamweaver 新規作成



上部メニューのファイル ➡︎ 保存を選択して、名前と保存場所をしてから『保存』をクリックします。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript Dreamweaver 保存



あとは書き出した『JavaScriptファイル(.js)』を設定したいツールバーフォルダに入れて『KBar2』に反映させれば、ワンボタンで使うことができます。

Adobe CC After Effects Script KBar2 無料 拡張スクリプト KBartender2 KBartender 2 機能 使い方 解説  エクスプレッション 設定 JavaScript ディレクトリー ツールバー フォルダ 保存
NEXTist
NEXTist

サンプルフォルダの『JavaScriptファイル(.js)』のコードを書き直して

『別名で保存…』した方が早いかもしれませんね^ ^



最後に

『KBar2』のカスタマイズをもっと手軽に楽しみたい方に最適な『KBartender2』について徹底解説しました^^

中々クセのあるスクリプトですが、使いこなせばカスタマイズにかかる時間を大幅に減らすことができるので

『KBar2』の利便性をとことん追求したい人にはオススメです(゚∀゚)

他にも『KBar2』に関する記事をいくつか書いていますd( ̄  ̄)

興味のある方はぜひ読んでみてください^^⬇︎⬇︎

*『KBar2』の機能や使い方、購入方法、ダウンロード・インストール方法について徹底解説した記事はこちら⬇︎⬇︎

Adobe CC AfteAdobe CC After Effects Script KBar2 機能 使い方 解説 【After Effects】導入必須のランチャースクリプト『KBar2』を徹底解説!!


『KBar2』を購入後、カスタマイズ前に必ず読んでくださいd( ̄  ̄;)
*ランチャーツール『KBar2』を楽しくカスタマイズするために見るべきサイトを紹介!!⬇︎⬇︎

Adobe CC After Effects Script KBar2 プリセット json アイコン 無料 配布 free script スクリプト コピペ 【After Effects】ランチャーツール『KBar2』を楽しくカスタマイズするために見るべきサイトを紹介!!


*ランチャーツール『KBar2』+スクリプトで超作業効率化!!作業を効率化する便利なスクリプトを厳選して紹介した記事です⬇︎⬇︎

Adobe CC After Effects Script KBar2 ワンボタン 簡単 キーフレーム ベイク スクリプト ソースコード 便利 【After Effects】コピペするだけ!!ランチャーツール『KBar2』+スクリプトで超作業効率化!!


*『KBar2』の無料拡張スクリプト『Primitives』を徹底解説した記事です⬇︎⬇︎

Adobe CC After Effects Script KBar2 無料 拡張スクリプト Primitives 解説 設定 【After Effects】『KBar2』の無料拡張スクリプト『Primitives』を徹底解説!!



*『KBar2』の『Invoke Menu Item』➡︎『Menu command name or command id』に『Command ID』を入力すれば、ワンボタンでメニューを実行することができるようになりますd( ̄  ̄)

【After Effects】の日本語版と英語版のメニューアイテム対応表 + Command ID【ver.2021】の記事はこちら⬇︎⬇︎

Adobe CC After Effects 日本語 英語 対応表 メニューアイテム 一覧 コマンド Command ID list リスト Kbar2 スクリプト 便利 【After Effects】日本語版と英語版のメニューアイテム対応表 + Command ID【ver.2021】


今回紹介したランチャースクリプト『KBar2』以外にも

『After Effects』で使えるおすすめの無料・有料プラグインやスクリプトはたくさんありますd(^^)

【After Effects】おすすめの無料プラグイン+スクリプト

AE Juice (無料版)

*約700種類のプリセットや複数のプラグインを無料で使用できる『AE Juice』のダウンロード・インストール方法を解説した記事はこちら⬇︎⬇︎

Adobe After Effects AE Juice Free Plugin 無料 ダウンロード インストール 【After Effects】『AE Juice』の無料プラグインをダウンロード・インストールする方法


Animation Composer 3 (無料版)

*約100種類以上のアニメーションプリセットや複数のプラグインを無料で使用できる『Animation Composer 3』の機能や使い方を徹底解説した記事はこちら⬇︎⬇︎

Adobe CC After Effects Animation Composer Starter 無料 プラグイン 機能 解説 【After Effects】無料プラグイン『Animation Composer 3 Starter Pack(無料)』の機能と使い方を徹底解説!!


Motion Bro (無料版)

*1200種類のプリセットが無料で使える『Motion Bro』のダウンロード・インストール方法を解説した記事はこちら⬇︎⬇︎

Adobe After Effects Motion Bro Free Plugin Download Preset Install 無料 フリー プラグイン プリセット インストール ダウンロード 【After Effects】1200種類のプリセットが無料で使える!!『Motion Bro』のダウンロード・インストール方法


Utility BOX (無料)

*無料で手に入る超便利な万能スクリプト『Utility BOX』を徹底解説した記事はこちら⬇︎⬇︎

Adobe After Effects Utility BOX 使い方 機能 解説 【After Effects】無料で手に入る超便利な万能スクリプト『Utility BOX』徹底解説!!


【After Effects】無料プラグインまとめ記事

*『After Effects』初心者が絶対に導入すべきおすすめの無料プラグインを紹介した記事はこちら⬇︎⬇︎

Adobe After Effects Free Plugin Script 無料 フリー プラグイン スクリプト 【After Effects】初心者が絶対に導入すべきおすすめの無料プラグイン+スクリプト


【After Effects】おすすめの無料プラグイン+スクリプト

Toko Graphics 4.0(有料)

*2250種類の高品質なグラフィックプリセットが使える『Toko Graphics 4.0』の購入からインストールまでの手順を徹底解説した記事はこちら⬇︎⬇︎

Adobe CC After Effects Toko Graphics 使い方 解説 プリセット 【After Effects】2250種類のプリセットが使える『Toko Graphics 4.0』の購入からインストールまでの手順を徹底解説!!


Motion Tools 2(有料)

*超便利な万能プラグイン『Motion Tools』の機能と使い方を解説した記事はこちら⬇︎⬇︎

Adobe After Effects Motion Tools Free Plugin 使い方 【After Effects】超便利な無料プラグイン『Motion Tools 2』 の機能と使い方を徹底解説!!


Flow(有料)

*『After Effects』必須のイージングプラグイン『Flow』の機能と使い方を解説した記事はこちら⬇︎⬇︎

Adobe CC After Effects Plugin Flow Script プラグイン スクリプト 使い方 機能 解説 【After Effects】イージングプラグイン『Flow』の機能と使い方を徹底解説!!


Auto Crop 3(有料)

*『Auto Crop 3』の機能や使い方、購入方法からインストール方法まで徹底解説した記事はこちら⬇︎⬇︎

Adobe CC After Effects Auto Crop 機能 使い方 解説 ダウンロード インストール 方法 【After Effects】コンポジションを自動クロップできるスクリプト『Auto Crop 3』を徹底解説!!



『Adobe CC』の契約期限切れ間近ではありませんか!?

『Adobe CC コンプリートプラン』が Adobe正規価格の半額【 39,980 円 / 年(税込)】で購入できる方法や

価格、各種サービス内容など徹底的に比較解説した記事を書いてます^^

*『Adobe CC』の契約更新が近い方はぜひ参考にして下さい⬇︎⬇︎

Adobe CC コンプリートプラン 安く買う 方法 【Adobe CC コンプリートプランを安く買う!!】最も安く買う方法と各種サービス内容、買う前の注意点を徹底解説!!





以上、最後まで読んでいただきありがとうございました٩( ‘ω’ )و





コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です