◆　アイコン作成講座その１　◆
　〜右も左も分からん編


■　目標　■
アイコンを作る際の標準的な作業を覚えて、自分でも簡単にアイコンを作れるんだ♪　という喜びと達成感を味わぉ〜（＾＾）/


■　用意するもの　■

▼お絵かきソフト（ひこぼしは、ウィンドウズのアクセサリに入っている「ペイント」を使用。以下はペイントを念頭にした説明です）

▼FrontPageExpress
（GIF形式のWeb用アイコンを作る場合。IEの付属ソフト。）

▼Animation GIF Ｍaker
（GIF形式のWeb用アイコンを作る場合。フリーソフト）

▼ICONめーかー＜えすぷれっそ＞
（ICO形式のデスクトップ用アイコンを作る場合。フリーソフト）

▼何かに描かずにはいられない題材と、婚期、ではなく根気。


　　　準備ができたら、れっつお絵かき！


■　手順その１　原画を描く　■

キャンバスのサイズは３２×３２ピクセルにして、虫眼鏡（拡大と縮小ツール）で拡大して描く。

▼慣れないうちは、グリッドを表示すると線が描きやすくなる。

▼ペイント（ソフト）に関しては、スポイト、範囲選択、コピー、貼り付け、元に戻す、の機能を覚えると作業が楽になります。

▼原画はお手本（写真や絵または実物）を見ながら描くと、描き易い。


■　手順その２　原画をGIF形式またはICO形式に変換して保存　■

▼Web用アイコンの場合

ペイントは通常BMP方式で編集しますが、ホームページに貼り付けてWebで閲覧できるようにするためには、以下の手順でGIF形式に変換しておく必要があります。

(１)　「ファイル」→「新規作成」で新しいページを作り、画像の挿入で原画をページ上に置きます（場所はどこでもよい）。

(２)　原画を右クリックして、「画像のプロパティ」で「全般」→「種類」でGIFにチェックを入れて「OK」。

(３)　「ファイル」→「名前をつけて保存」で「ファイルとして保存」を選び、任意の場所に保存。ファイル名はデフォルトの「untitled」でもかまわない。「画像をファイルに保存」のダイアログが出てくるので、「はい」をクリック。

ファイルを保存した場所を見ると、GIF形式に変換された画像が完成しています。（＾＾

▼デスクトップ用アイコンの場合

(１)　ICONめーかー＜えすぷれっそ＞を起動して、出来上がりの色数を４種類のうちから一つ選びます（クリック）。

(２)　原画を「標準アイコン 32×32」にドラッグ&ドロップします。背景色を透過する場合には透明化したい背景色をクリックします。（透過については↓の手順その３を参考にしてください）

(３)　あとは、保存で任意の場所に保存すれば完成です。


■　手順その３　背景色を透過処理して出来上がり　■

デスクトップ用アイコンの場合にはICONめーかーが手順その３まで一度にやってくれるので、Web用アイコンについて必要になる作業です。

▼透過処理は必須の手順ではありませんが、アイコンの背景色とアイコンを置く場所の色が、別々の色になって不恰好な場合には、アイコンの背景色を透過します。
　透過処理しないと見栄えが悪い例→　　
　このアイコンの背景色（ブルー）を透過処理すると→　　


▼Web用アイコンを透過処理する手順：

（１）　Animation GIF Makerを起動して、「ファイル」から手順その２で保存したGIF画像をクリックして、「追加」ボタンをクリック（右側のウィンドウに追加される）。

（２）　「パラメータ」をクリックして、
→「消去法」で「２、背景色」を選択
→「透過」を「オン」にする。
→「透過色指定」ボタンをクリックして、透明化する色をクリックし、決定ボタン。

（３）　「パラメータ」の「更新」ボタンを押して、右側のウィンドウでも消去法が背景色になったことを確認し、「作成」ボタンを押して保存。
→完成！

▼背景色を特定の色に固定したいときには透過処理する必要ありません。　（例）「くちびるシリーズ」アイコンは、背景色とのコントラストがないと、くちびる本体の色をうまく表現できません。

▼透過する背景色は、原画で使われていない色にしておくこと。
そうしないと、原画の中で背景色と同じ部分まで、透過されてしまいます。


■　これでアイコンの世界に飛び込めます　■
さて、アイコンの作成手順はこれだけで全部です。
次は、よくあるトラブルの対策について知っておきましょう。

うまくいかないときはどうする？
（講座その２、トラブル対処編に進みます）




アイコン置き場入り口に戻る

サイトの入り口まで戻る