« 事務員さんも募集 | トップページ | アイデムさんに求人広告を掲載 »

2008.01.26

格好いいアイコンが作りたい!!

どうやったらかっこいいアイコンが作れるのかと悩んできました。

私はソフトウェアの開発には、Borland(今はCodeGear)のC++Builderを愛用しているのですが、この付属のイメージエディタでアイコンファイルを作ろうとすると、16色のデフォルトのパレットしか扱えません。

BMPファイルならば256色まで扱えるのですが、色の選択がこんな感じ
ボーランドイメージエディタのパレット
なので、グラデーションの効いたドット絵を作るのは至難の業です。
Delphiを使っている人もきっと同じでしょう。

そういうわけでいままで綺麗なアイコンを作るという作業を避けてきたのですが、そろそろ本気で考えなければと感じてきました。

今のMITOUJTAGのアイコンはこんな感じです。
今のMITOUJTAGのアイコン
このアイコンはデフォルトの16色パレットそのままだし、そもそも何の絵だかわからないし、あまりにもダサい。
我ながらイケテナイとつくづく思っていました。

最近のソフトでは、対象物を少し斜めから見て、グラデーションのかかった立体的なアイコンが流行のようですから、こういうアイコンを簡単に作る方法を考えてみました。

使ったツールは、Microsoft Excelと、「Paint Shop Pro」と、「@icon変換 Version1.21」です。
・アイコンの元になる絵を描くのにExcelを使います。Excelのバージョンは何でもいいと思いますが、2007では難しいと思います。ExcelでなくてもPowerPointでもいいでしょう。
・Paint Shop Proはビットマップファイルの編集(主に画像の縮小)に使います。他の画像エディタでも、画像の拡大縮小機能があれば同じように使えます。ホームページ作成ツールに付属の画像エディタでもよいでしょう。
・「@icon変換 Version1.21」はフリーソフトで、BMPファイルをICOファイルに変換してくれます。

まず、以前このブログで紹介した「Microsoft Excelで波形を描く方法」に書いたとおり、Excelの枠のサイズを、横0.96、縦9.6にします。

オートシェイプの中から適当なものを選んで貼り付けましょう。
立体っぽく見せるのならば、「基本図形」の中の「円柱」と「直方体」が便利です。

大きさは縦横16マスくらいがいいです。
線の太さは3ptくらいにしておきます。
そしてグラデーションを使って色をつけます。
Excelのオートシェイプ

そしたら、この絵をコピーペーストして、Paint Shop Proに貼り付けます。Paint Shop Proに限らず、画像編集ソフトなら何でもいいでしょう。この段階でグラデーションの色数が少し減ることがあるようですが、気にしなくてもよいです。
オートシェイプを画像編集ソフト貼り付け

そして縦・横16ピクセル、あるいは32ピクセルのサイズになるように縮小します。

ここで、単純にピクセルを抽出して縮小すると、色が混ざらないので綺麗なアイコンになりません。
単純に縮小した場合

なので、縮小するとき色を上手く混ぜてくれるモードで縮小するようにします。こうすると、グラデーションが効いてよい感じの画像に仕上がります。
ぼかしながらして縮小した場合

この方法を使えば、たとえ黒の一本の線を引いたとしても、縮小するときに勝手にグラデーションがかかるので、ドット絵を描く必要はなくなります。

例えば、↓のような図形は
黒い線のサンプル
↓のようになります。
黒い線のサンプル(変換後)

こういう中間色は自動でできます。

この調子でExcelのオートシェイプを活用して、立体的な絵をいっぱい書きましょう。
Excelで描いたいろんな図形

それを切り出して、望みのサイズに縮小して、16×16のビットマップファイルをいっぱい作ります。
EXEファイルに表示するアイコンは、BMP→ICOファイル変換ツールを使ってICOファイルにし、C++Builderのリソースに登録します。
プログラム実行中に、ボタンや随所に貼り付ける画像ははBMPファイルのまま利用します。

MITOUJTAG Version2のアイコンはこんな感じになりました。
MITOUJTAG2のアイコン

速攻で作ったわりには、いままでのと比べてずいぶん良くなったと思います。

こうして作ったアイコンをいっぱい使って、ツリー表示してみます。
MITOUJTAGのプロジェクトツリー
よくある「統合環境のプロジェクトマネージャ」をイメージしてみました。

最後にまとめです。
「ドット絵職人みたいなことをせずに、手軽にアイコンを作る方法」をまとめると
①Excelのセルのサイズを0.96×9.6に変更し、グリッド固定を行う。
②大きいサイズで大胆にお絵かきする。
③斜めから見たアイコンの元の絵は、Excelのオートシェイプを使うと簡単に作れる。
④アイコンのグラデーションは、Excelの塗りつぶし機能と、画像ソフトの縮小時の「ぼかし」を利用する。通常はドット絵を編集する必要はない。
⑤Microsoft ExcelやWordのワードアート、Wingdingsなどのフォント、を活用してみてもいいかも。

この情報が皆様のお役に立てたら幸いです。

|

« 事務員さんも募集 | トップページ | アイデムさんに求人広告を掲載 »

コメント

レビューが遅くなってしまい、申し訳ございません。
ショップの方の対応もよく、梱包も丁寧にしていただきました。
型崩れしないように、バッグの中にも詰め物をしてくださっていて、とても嬉しかったです。
また機会がありましたら、是非利用させていただきたいと思います。
どうもありがとうございました。

投稿: ルイ ヴィトン パスケース mcm | 2022.06.20 05:40

コメントを書く



(ウェブ上には掲載しません)




« 事務員さんも募集 | トップページ | アイデムさんに求人広告を掲載 »