Web素材の作り方（ウサギさん）
GIMP2でWeb素材を作ります
前回の記事「GIMP2 パスの使い方」で、だいぶ曲線を描くことにも慣れてきたと思うので、今回は、パスを使ってウサギさんを描いてみようと思います。
次の順番で、お話は進みます。
GIMPの導入（インストール）手順については、記事「GIMP2の導入手順」が参考になります。
作成するWeb素材のサンプル（ウサギさん）
完成すると、次のようになります・・・ウサギに見えないかしらん？
色：peachpuff
（サイズ：30×30）
また、「無料Web素材」にて、色違いで配布しています。良かったら「無料Web素材 ウサギさん」のページもご覧ください。
Web素材の作り方（ウサギさん）
それでは、ウサギさんを作成します。
1：新規ファイルの作成
次の手順をサクサクと進めて、新規で画像ファイルを作成してください。
- （01）ファイルの新規作成をクリックする。（[ファイル]-[新規]）
- （02）サイズを30×30に設定する。
- （03）表示サイズが小さいので、800%にする。
- （04）新規レイヤーを作成する。
（01）〜（04）までは、記事「Web素材の作り方（アイコン1）」とほぼ同じなので、この文字だけの手順で分からない場合は、お手数ですが該当ページへ飛んで作業して戻ってきてください。
2：ウサギさんの外観を描く
（05）
道具箱の「パスツール」を、クリックします。
（06）
はじめに、ウサギさんらしき形状になるように、点を9個打ちます。
- クリック
- 右（ちょっと上）にドラッグ
- クリック
- 右にドラッグ
- クリック
- 右（ちょっと下）にドラッグ
- クリック
- 左下にドラッグ
- 左上にドラッグ
（07）
次に、ウサギさんの顔が開いたままなので、閉じてあげなければいけません。
[ctrl]ボタンを押しながら、前述（06）で一番最初に打った点をクリックします。これで閉じます。覚えていたかしら？
（08）
各点、ハンドルを適当に動かして、ウサギさんらしくなるように調整しましょう。
3：パス線を範囲選択にする
（09）
上部メニューの「選択」にて、「パスから」を選択（クリック）します。
これで、パスで描いた形状が選択範囲として指定されます。
4：ウサギさんを着色する
（10）
道具箱の「塗りつぶし」をクリックし、さらに黒い箇所（前景色）をクリックします。
（11）
私は前回使用した色を使います。（お好きな色で構いませんよ）
右下部にあるパレットの適当な色をクリックし、[OK]ボタンをクリックします。
（12）
選択範囲内をクリックし、色を流し込みます。
5：目を作成する
（13）
新規レイヤーを追加してください。
（14）
道具箱の「楕円」を、クリックします。
（15）
「楕円」を描いて、適当な色で塗りつぶします。
もうそろそろ、こまごまと書かなくても出来るかと思うのだけれど・・・大丈夫かしら？
（16）
レイヤーを複製します。
レイヤー複製の方法が不明な場合は、記事「レイヤーを使いまくる」が参考になります。
（17）
「道具箱」の「移動」ツールをクリックします。
（18）
「目」を、ドラッグします。
6：口（くち）を作成する
（19）
新規レイヤーを追加してください。
（20）
「口」を、描きます。
- クリック
- クリック
- 左にドラッグ
- Ctrl + クリック
（21）
[選択]-[パスから]にして、塗りつぶしてください。
いかがでしょうか？かわいいうさぎさんが、描けたでしょうか？何度か試したり、付け加えたりすれば良くなっていくものと思います。いろいろ試してみてください。
7：保存
（22）
頃合（ころあい）の良いところで、xcfで保存しておきましょう。
8：各画像ファイル形式で保存
（23）
あとは、記事「GIMP2の画像ファイル保存方法」で行ったように、gifなどで保存（エクスポート）しましょう。
次回予告
次回は、ここで作成したウサギさんのアイコンをご紹介（配布）しています。
関連記事
画像編集ソフトGIMPに関連する記事を、一部ご紹介します。
GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集（カテゴリ記事一覧）』をご利用ください。
1：GIMP2の基本的な使い方
2：アイコンの作成方法
- Web素材の作り方（アイコン1）
- GIMP2の画像ファイル保存方法
- Web素材の作り方（矢印1）
- GIMP2 パスの使い方
- Web素材の作り方（ウサギさん）（この記事です）
- Web素材の作り方（アイコン2）
- 透過GIFのギザギザ
- Web素材の作り方（ロゴ1）
作成日：2008/02/11 更新日：2008/02/11
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
No title
GIMP！GIMP！GIMP！
コメントありがとうございます！(・∀・)/
お役に立てたようで何よりです。
こりゃ、もっけの幸いです。
また、遊びに来てねーん。ヾ(*´∀｀*)ノ
コメントの投稿
トラックバック
 | GIMPフォトレタッチ完全ガイド2010 (アスペクトムック) アスペクト 2009-10-26 売り上げランキング : 9521 Amazonで詳しく見る by G-Tools |
 | ゼロからはじめるGIMP最強テクニック (OAK MOOK 313) オークラ出版 2009-10-26 売り上げランキング : 123024 Amazonで詳しく見る by G-Tools |
解説書を見ても分からなかったのが、あっさりと理解できました。