Web素材の作り方（丸1）
GIMP2でWeb素材を作ります
今回から、GIMP2を使って、Web素材を作っていきます。
実際に作ってみた方が、覚えも早いと思うので、良かったらトライしてみてください。そんな難しいものは作らないので、大丈夫ですよ。
次の順番でお話は進みます。
GIMPの導入手順については、記事「GIMP2の導入手順」が参考になります。
作成するWeb素材アイコンのサンプル
はじめて作る人もいらっしゃると思うので、初回は簡単に作成できるWeb素材にしてみました。完成すると、次のようになります。
色：Indigo
（サイズ：15×15）
また、「無料Web素材」にて、色違いで配布しています。良かったら「無料Web素材 丸（1）」ページもご覧ください。
Web素材の作り方（アイコン 丸1）
それでは、はじめましょう。GIMP2を起ち上げてください。
1：新規ファイルの作成
（01）
「道具箱」の上にあるメニューの「ファイル」をクリックし、「新規」を選択します。（[ファイル]-[新規]）
（02）
「新規画像を作成」が、表示されます。ご面倒でしょうけれど、幅と高さを入力します。
どちらも「15」を入力し、[OK]ボタンをクリックしましょう。
この「幅と高さ」と言うのは、画像の横の長さと、縦の長さです。一般的にピクセル単位で指定します。
2：表示サイズの変更
（03）
表示サイズが小さいので、800%にします。
Webの世界は、ピクセルという単位をよく使います。10ピクセルがどの程度の長さか覚えておくと、CSSをいじるときも便利です。感覚をつかんでおきましょう。
3：新規レイヤーの作成
（04）
新規レイヤーを作成します。まず、レイヤーパネルが表示されていることを確認してください。（取り消し履歴が表示されている場合は、レイヤータブをクリックしましょう）
左下にある[新規レイヤー作成]ボタンを、クリックします。
ポップアップウィンドウで「新規レイヤー作成」が表示されたら、特に変更する箇所はないので、[OK]ボタンをクリックしておいてください。
4：円形の作成
（05）
道具箱の「楕円選択」を、クリックします。
（06）
左上あたりから、適当に右下へドラッグして、円を描きます。
（07）
道具箱の下に、「楕円選択」として、楕円選択の設定ができる場所があります。
ここの楕円の「大きさ」が、「13」と「13」（13×13）になっていることを確認してください。
適当にやったので、大抵なっていないと思います。どちらにも「13」を入力してください。
（08）
道具箱の「塗りつぶし」を、クリックし、更に下にある黒い所（前景色と言います）をクリックします。
前景色と背景色については、別途ご説明いたします。（忘れなければ）
5：円形に色を付ける
（09）
「描画色を変更」が表示されます。
縦にこう色がずらずらっとしている所があるのは分かりますか？（赤→ピンク→青→水色→緑→黄→橙色）
この中で、あなたが好きな色を、適当にクリックしてみてください。（特になければ適当で構いません）
慣れるためにも、何回か適当にクリックしてみましょう。
（10）
左隣の四角い所の色が、クリックするごとに変わっていることに気が付いたかしら？
適当なところで、今度は四角い方で色を選びましょう。「現在」のところに選択した色が表示されます。
色が決まったら、[OK]ボタンをクリックしましょう。
右側を見ると分かりますが、HSV/RGBや、HTMLの色コードで選択することもできます。
（11）
円の中に、色を流し込みます。円の中で、クリックしましょう。
6：影を付ける
（12）
画像の上のメニューの右端に、「フィルタ」があるのは分かるかしら？
この「フィルタ」をクリックし、「光と影」をクリックし、さらに「Drop Shadow」をクリックします。（[フィルタ]-[光と影]-[Drop Shadow]）
（13）
「Script-Fu: Drop Shadow」が表示されます。
各項目を、次のように設定して、[OK]ボタンをクリックします。
- オフセット Xを、「2」
- オフセット Yを、「2」
- ぼかし半径を、「0」
- 色を、「適当な灰色」
「オフセット」は、影を、X方向（右）と、Y方向（下）に、対象物からどれだけズラすか？を指定します。
「ぼかし半径」は、着地した影からどれだけぼかしを入れるか？を指定します。
「色」は、色部分をクリックすれば選択できます。
（13）
次のような感じになります。オフセット Yは、「1」でも良かったかもしれませんね。
表示サイズを大きくしたり、小さくしたりして、本来のサイズでどのように見えるかチェックしながら作成してみてください。
7：保存
（14）
頃合（ころあい）の良いところで、保存しましょう。
画像の上部メニュー「ファイル」をクリックし、「別名で保存」を選びます。（[ファイル]-[別名で保存]）
（15）
ファイル名を入力し、保存先を選択し、[保存]ボタンをクリックします。
ファイルタイプは、とりあえずXCFにしておいてください。画像ファイル形式については、後日書きます。
次回予告
次回は、無料Web素材の利用規約について書いています。Web素材を利用する前にご覧ください。
関連記事
画像編集ソフトGIMPに関連する記事を、ご紹介します。
1：GIMP2の導入
2：GIMP2で写真を編集する
3：GIMP2の基本
4：無料Web素材の作り方
作成日：2008/02/03 更新日：2008/02/03
« 「GIMP2の取り消し履歴と復帰」｜「GIMP2の画像ファイル保存方法」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/171-6fc86ca4
