Powerful PictBear

SE New Feature No.14

最終更新:

pictbear

- view
メンバー限定 登録/ログイン
PictBearを自分流にカスタマイズする PART4

アイコンのカスタマイズ



1. カスタマイズダイアログの設定では今まで紹介した表面上の機能のほかに、もう一つカスタマイズ出来る機能が存在します。
それはアイコンのカスタマイズです。
ではアイコンのカスタマイズの方法を紹介しますので、確認して下さい。
まず、下図のようにカスタマイズダイアログを表示します。

サンプルイメージ



2. 上図のカスタマイズダイアログを出した状態で、ツールバー等のコマンド表示部で右クリックすると下図のようにメニューが表示されます。

サンプルイメージ

このメニューでアイコンのカスタマイズや表示の変更ができます。


ではさっそく動作を確認してみましょう。
ここでは例として、下図のようにスクロールアイコンを設定してみます。



3. 右クリックして出てきたメニューの上3つ「リセット、ボタンイメージのコピー、削除」は後で説明しますので、まずは「ボタンのデザイン」を説明します。下図 「ボタンのデザイン」をクリックします。

サンプルイメージ



4. すると下図のダイアログが表示されます。

サンプルイメージ

これがアイコンを設定するダイアログになります。



5. 左側の項目の「イメージのみ」を選択すると、アイコンだけでの表示になり、右側上にアイコンが表示されます。

サンプルイメージ

この状態だと、ツールバ-等に下図のようにアイコンだけでの表示になります。

サンプルイメージ



6. 次に「テキストのみ」を選択すると、テキストだけでの表示になり、右側上のアイコンが消えて、下の欄にテキストの表示がされます。 サンプルイメージ

この状態だと、ツールバ-等に下図のようにテキストだけでの表示になります。

サンプルイメージ



7. またこのテキストは変更可能なので、右図のように書き換えると  
下図のようにテキスト表示が変わります。

サンプルイメージ
  サンプルイメージ




8. 次に「イメージおよびテキスト」を選択すると、右側上のアイコンを表示して、下の欄にテキストも表示がされます。

サンプルイメージ

この状態だと、ツールバ-等に下図のようにアイコンとテキストの表示になります。

サンプルイメージ



9. では次にアイコン自体を変更する動作を確認してみましょう。
下図のように右側の項目で「ユーザーイメージを使用」を選択すると、下側にアイコンが表示されます。

サンプルイメージ

この状態で下に表示されているアイコンをクリックして指定すると、アイコンが変わります。



10. では下図のようにアイコンを選択して、「ボタンのデザイン」ダイアログを閉じます。

サンプルイメージ

すると下図のように指定したアイコンに替わっているのが確認できます。

サンプルイメージ

このように簡単にアイコンを変更する事が可能です。



11. 次に一番右側にある「新規」ボタンをクリックしてみましょう。
これは、アイコンを自分で製作する時に使用する機能です。

サンプルイメージ



12. すると下図のように「ボタンイメージエディタ」ダイアログが表示されます。

サンプルイメージ

ここで最初から自分でアイコンを作ることができる画面です。
このエディタはPictBearに内蔵されているエディタですので、使用できる色やツールは簡易的なものだけが用意されています。



13. このエディタで描画した物がどのように表示されるか確認してみましょう。
下図のように適当にアイコンを作ってみました。

サンプルイメージ

作ったアイコンは下のほうの「プレビュー」で確認できます。
完成したら、OKをクリックして閉じます。



14. すると下図のようにアイコンが表示されている所に、今作成したアイコンが追加されていることが確認出来ると思われます。

サンプルイメージ

この作成したアイコンを指定してダイアログを閉じると下図のようにアイコンが替わっている事が確認できます。

サンプルイメージ



15. 次に「編集」ボタンの動作を確認してみましょう。
下図のように編集したいアイコンを指定して「編集」ボタンをクリックします。

サンプルイメージ



16. すると下図のように指定したアイコンが表示された状態で、「ボタンイメージエディタ」が表示されます。

サンプルイメージ

この状態で編集することが可能になります。



17. 例として下図のように変更してみました。

サンプルイメージ

変更が完了したらOKボタンをクリックしてダイアログを閉じます。



18. すると下図のように指定したアイコンが変更されていることが確認出来ると思われます。

サンプルイメージ

このアイコンを指定すればアイコンが変更されます。

ここで注意しなければいけない事は、一度書き換えて編集してしまうと、上書きされますので元のアイコンが無くなってしまいます。
では、元のアイコンを残したままそのアイコンを編集したい場合はどうすれば良いか次に説明します。



19. では下図のように使用したいアイコンを指定して「編集」ボタンをクリックします。

サンプルイメージ



20. すると「ボタンイメージエディタ」が表示されますので、そのダイアログの下にあるツールで、「コピー」をクリックします。
「コピー」をクリックすると一時的にクリップボードにコピーできますので、これを使って複製した後、修正します。

サンプルイメージ



21. クリップボードにコピーできたら「キャンセル」をクリックしてダイアログを閉じます。

サンプルイメージ



22. 元の「ボタンのデザイン」ダイアログが表示されたら、今度は「新規」ボタンをクリックします。

サンプルイメージ



23. 「ボタンイメージエディタ」が表示されたら、右下ツールの「貼り付け」をクリックします。

サンプルイメージ



24. すると先程コピーしたアイコンが貼り付けられ、編集できる状態になります。
ここで編集が完了しましたらOKをクリックしてダイアログを閉じます。

サンプルイメージ



25. 「ボタンのデザイン」ダイアログが表示されたら、今編集したアイコンが新しく追加されていることが確認出来ると思われます。
このようにして元のアイコンを残したまま新たに同じようなアイコンを編集できますので便利です。

サンプルイメージ



26. 次に疑問に思うことは下図の下に表示されているアイコンにしか変更する事ができないのかなと思われますが、これはあくまでサンプルとしてのアイコンですので、自分でPictBear自体で作成した物や、フリーのアイコンデータを使用することが可能です。
どうしても付属されているエディタでは使い勝手が限定されるので、自分が普段使い慣れているPictBearや他のペイントアプリケーションで作ることによって、様々なアイコンを作成することが出来ます。

ではどのようにしてここのアイコン表示部に自分で作成したアイコンを表示させるかを次に説明します。

サンプルイメージ



27. まずは「ボタンのデザイン」ダイアログに表示されるアイコンがどこにあるかを確認します。
下図のようにエクスプローラーなどを開いて、PictBear SecondEdition がインストールされている場所を開きます。
その下のルートで「resources」フォルダを開きます。
するとその中に「UserImg.bmp」というビットマップ形式の画像ファイルが存在します。

サンプルイメージ

このファイルが、「ボタンのデザイン」ダイアログに表示されるアイコン画像になります。



28. ではこのファイルを開いてみましょう。
開くと下図の画像が表示されます。

サンプルイメージ

画像を見ると、「ボタンのデザイン」ダイアログに表示されるアイコン画像がつらなって描画されていることが確認できます。

このサンプルにしたがって自分でアイコンを用意するとオリジナルなアイコンを使用することが出来ます。
ではこのアイコンファイルを作成するにあたっての基本的な約束事を記述しておきますので、それにしたがって作成してください。

  <基本的な約束事>
・アイコンサイズは16 × 16 ドット画像にする事
・アイコン画像は横一列につめて表示すること (縦16ドット以降の画像領域は読み込みません)
・画像形式はBMP(ビットマップ画像)形式に限る (画素数には制限がありません。ただしBMP形式で取り扱える画素数に限る)
・ファイルネームを「UserImg.bmp」にする事 (これ以外の名前では読み込みません)

以上の4点だけです。
この事を守れば、自由にアイコンを作って変更できます。



29. では実際にどうなるか動作を確認してみましょう。
ここではサンプルとして下図のアイコン画像で動作を確認してみます。

サンプルイメージ

このアイコン画像をBMP形式で保存するのですが、最初に用意されているオリジナル・サンプル画像を消したくないので、そのファイルは名前を変えて保存しなおし、ここで表示した画像を「UserImg.bmp」として保存します。

サンプルイメージ

上図のような状態で「resources」フォルダに保存しました。



30. ではどうなっているか確認してみましょう。
PictBearを起動して、カスタマイズダイアログを開き、ツールバー上の適当なアイコンの上で右クリックをして、「ボタンのデザイン」ダイアログを開き、「ユーザーイメージを使用」を選択すると、下側に表示されるアイコンが下図のように変わっていることが確認出来ると思われます。

サンプルイメージ



31. では今表示したアイコンに変更した例を下図に表示します。

サンプルイメージ

どうでしょう、このように自分だけのアイコン表示によるPictBearが作ることが事が可能です。



32. また説明に戻ります。
最初の説明で飛ばした部分を説明します。
まず「リセット」動作ですが、アイコンを変更した後に最初の状態に戻したい時に使用します。
下図のように戻したいアイコンの上で右クリックして、「リセット」をクリックします。

サンプルイメージ



33. すると下図のように最初の状態に戻すことができます。

サンプルイメージ

これが「リセット」動作になります。



34. 次に「ボタンイメージのコピー」の動作を見てみます。
この機能は指定したアイコンを一時的にクリップボードへ保管して、再利用できるようにした機能です。
例えば、デフォルトで用意されているアイコンを少しだけ替えて登録したい場合などに使用します。
では、下図のように「ボタンイメージのコピー」をクリックします。

サンプルイメージ

画面上では何も変化がありませんが、クリップボードに保存されています。




35. クリップボードに保存されたデータを加工する場合は、保存した後に同じ右クリックメニューの「ボタンのデザイン」を開き、さらに「ユーザーイメージを使用」を選択して、「新規」ボタンをクリックします。

するとボタンイメージエディタが開かれるのますので、下図のように右下の「貼り付け」ボタンをクリックして保存してあるデータを反映させます。

サンプルイメージ

この状態で編集ができますので、デフォルトで用意されているアイコンも編集して変更させることが可能です。
また、データはクリップボードに保存されていますので、PictBear本体でも開く事が可能ですから、そこで編集した後再利用することもできます。

これが「ボタンイメージのコピー」の動作になります。



36. 次に「削除」の動作を見てみます。
この機能は指定したアイコンを削除して消してしまう機能です。
では、下図のように「削除」をクリックします。

サンプルイメージ



37. すると指定したアイコンが消えたこと確認出来ると思われます。

サンプルイメージ

これが「削除」の動作になります。



38. 次に「イメージのみ」の動作を見てみます。
この機能は指定したアイコンをアイコン表示だけにする設定です。

サンプルイメージ

この機能は「ボタンのデザイン」ダイアログの左側にあった機能に同じです。(下図参照)

サンプルイメージ

では、上図のように「イメージのみ」をクリックします。



39. すると指定したアイコン表示がアイコンだけでの表示になります。

サンプルイメージ

これが「イメージのみ」の動作になります。



40. 次に「テキストのみ」の動作を見てみます。
この機能は指定したアイコンをテキスト表示だけにする設定です。

この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。
では、下図のように「テキストのみ」をクリックします。

サンプルイメージ



41. すると指定したアイコン表示がテキストだけでの表示になります。

サンプルイメージ

これが「テキストのみ」の動作になります。



42. 次に「イメージおよびテキスト」の動作を見てみます。
この機能は指定したアイコンをアイコンとテキストの両方を表示する設定です。

この機能も「ボタンのデザイン」ダイアログの左側にあった機能に同じです。
では、下図のように「イメージおよびテキスト」をクリックします。

サンプルイメージ



43. すると指定したアイコンとテキストの両方を表示が表示されます。

サンプルイメージ

これが「イメージおよびテキスト」の動作になります。



44. 次に「グループの開始」の動作を見てみます。
この機能は指定したアイコンの前に区切り線を追加して、グループ分けする機能です。

ここではブラシアイコンの前に区切り線をつけてグループ分けする動作を確認してみましょう。
下図のようにブラシアイコンの上で右クリックして「グループの開始」をクリックします。

サンプルイメージ



45. すると下図のようにブラシアイコンの前に区切り線が追加された事が確認できます。

サンプルイメージ

これが「グループの開始」の動作になります。



46. 以上でアイコンのカスタマイズの説明を終わりますが、今説明した動作はメニューバーのリストダウンメニューでも動作しますし、右クリックメニューでも有効ですので、活用してください。
ただし、メニューバーのリストダウンメニューや右クリックメニューではアイコンのみの表示指定は出来ませんので、覚えておきましょう。

カスタマイズについての基本的な説明は以上になりますので、各メニューなどのフルカスタマイズで自分だけのPictBearを作り上げて存分に楽しんでください。



目安箱バナー