<モックアップからアイコン画像を作成する>

UIのボタンに表示するアイコンファイルを作成するために、先にIllustratorで作成したモックアップをPhotoshop形式で書き出します。

書き出す際は「レイヤーを保持」にして、Photoshopで開いたときにそれぞれのオブジェクトへアクセスしやすいようにしておきます。

 

書き出したファイルをPhotoshopで開き、それぞれのアイコンが切り出しやすいようにガイドを引きます。

 今回は先のモックアップでボタンを22 x 22で作りましたが、アイコン表示領域はそれよりも3ピクセル内側なので、16 x 16ピクセルで切り出せるようにガイドを引いてあります。

ガイドが引き終わったら不要なオブジェクトのレイヤーを削除し、それぞれのアイコンを地道に切り出して保存していきます。

CEPエクステンションで読み込める画像形式はPNGかJPEGですが、ボタンの地色が表示されるように背景は透明にしたいのでPNGのほうがそれ向きでしょう。

 

 

<プロジェクトにアイコンを読み込む>

次に、切り出したアイコンをBracketsのプロジェクトファイルに読み込みます。

左ペインにある「icons」を右クリックし、格納場所のフォルダを開きます。

※Macの場合は「Finderで表示」

開かれたフォルダにアイコン画像をコピーします。

すでに「iconDarkNormal.png」といったファイルがありますが、それはそのままにしておきます。

コピーが終わると概ねリアルタイムでプロジェクトに反映されます。更新されない場合はプロジェクトを開きなおしてください。

これでアイコンをプロジェクトで使う準備が整いました。

 

 

Joomla templates by a4joomla