Web素材の作り方（数字1）
GIMP2でWeb素材を作ります
今回も、Web素材を作ります。GIMP2の機能としては、次の2つを使います。
- 文字入力
- 角丸
アイコンの中に文字を入れるのだけれども、とりあえず番号にしてみました。そして、とりあえず次の順番で、お話は進みます。
GIMPの導入手順については、記事「GIMP2の導入手順」が参考になります。
作成するWeb素材のサンプル（数字1）
完成すると、次のようになります。
色：black
（サイズ：25×25）
また、「無料Web素材」にて、色違いで配布しています。良かったら「無料Web素材 数字（1）」のページもご覧ください。
Web素材の作り方（数字1）
それでは、アイコンを作成します。
1：新規ファイルの作成
次の手順をサクサクと進めて、新規で画像ファイルを作成してください。
- （01）ファイルの新規作成をクリックする。（[ファイル]-[新規]）
- （02）サイズを25×25に設定する。
- （03）表示サイズがあわなければ、合わせる。
- （04）新規レイヤーを作成する。
2：1つ目の四角を作る
（05）
道具箱の「四角範囲選択」を、クリックします。
（06）
道具箱の下に、「四角範囲選択」についての詳細設定が表示されます。
「Rounded corners（角丸）」にチェックを入れます。チェックを入れると、半径を設定できるようになります。
「Rounded corners（角丸）」の半径を大きく設定すれば、より丸くなり、小さく設定すれば、より尖った状態になります。
（07）
描画画面の方で、左上から右下にドラッグします。
（08）
しかし、1回でうまく行くとは限りません。そういう場合、何回もやらなければいけないかと言うと、そんなことはありません。
「四角範囲選択」の詳細設定にスクロールバーが付いています。これを下にスクロールさせると、「Position」と「大きさ」という入力項目があります。
例えば、四角範囲選択を次のようにしたい場合は、以下ようになります。
Position | 右に2、下に3 |
|---|---|
大きさ | 幅3、高さ1 |
頭で考えるより、チクチク数値をいじってみる方が分かり良いと思います。こういうものか・・・と思える程度にさわってみましょう。
（09）
Position（位置）を(0, 0)、大きさを25×25にできたかしら？
できたら、好きな色で塗りつぶしてください。
3：2つ目の四角を作る
（10）
新規レイヤーを追加してください。
（11）
「四角範囲選択」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。
この「双方向の矢印」をクリックすると、前景色と背景色が逆転します。ここでは難しく考えず、ひとつの作業として流しておいてください。
（12）
描画画面の方で、左上から右下にドラッグします。
Position | 右に2、下に2（2, 2） |
|---|---|
大きさ | 幅21、高さ21（21×21） |
（13）
できたら、好きな色で塗りつぶしてください。
4：3つ目の四角を作る
（14）
新規レイヤーを追加してください。
（15）
「四角範囲選択」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。
もう一度「双方向の矢印」をクリックすると、前景色と背景色が逆転します。（戻ります）
（16）
描画画面の方で、左上から右下にドラッグします。
Position | 右に4、下に4（4, 4） |
|---|---|
大きさ | 幅17、高さ17（17×17） |
（17）
できたら、好きな色で塗りつぶしてください。
（18）
つまり、少しずつ小さい四角を上にのせてみたというわけです。
5：文字入力
（19）
「道具箱」の「文字ツール」を、クリックして、さらに前景色/背景色の右上にある「双方向の矢印」をクリックします。
つまり、色を交互に使っているわけです。
（20）
描画画面でクリックします。
（21）
文字エディタが表示されるので、好きなように文字を入力します。
（22）
「道具箱」の下の「文字ツール」詳細設定にて、「フォント」と「大きさ」を決めます。
フォントと書いてある右隣に、フォントをメニュー表示させるボタンがあります。クリックしてメニューから好きなフォントを選択しましょう。
また、フォントサイズも描画画面を見ながら、入力しましょう。
フォントやサイズが決まったら、文字エディタは[閉じる]ボタンをクリックして、閉じて構いません。
（23）
最後に、移動ツールを使って、文字をよきところに移動させましょう。
6：保存
（24）
頃合（ころあい）の良いところで、xcfで保存しておきましょう。
7：各画像ファイル形式で保存
（25）
あとは、記事「GIMP2の画像ファイル保存方法」で行ったように、gifなどで保存（エクスポート）しましょう。
次回予告
お疲れさまでした。単純なアイコンですが、けっこうステップが多かったですね。もっと簡単に作成できる方法があるのかも・・・。
次回は、ここで作成した角丸・数字入りのアイコンをご紹介（配布）しています。
関連記事
画像編集ソフトGIMPに関連する記事を、ご紹介します。
1：GIMP2の導入
2：GIMP2で写真を編集する
3：GIMP2の基本
4：無料Web素材の作り方
作成日：2008/02/13 更新日：2008/02/13
« 「Web素材の作り方（ウサギさん）」｜「透過GIFのギザギザ」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/184-ad1cbc93
