Web素材の作り方（ロゴ1）
GIMP2でWeb素材を作ります
GIMP2を使ってWeb素材（ロゴ）を作ってみましょう。GIMP2の機能としては、新たに次の3つを使います。
- 鏡像反転ツール
- 遠近法ツール
- 切り抜きツール
次の順番で、お話は進みます。
GIMPの導入手順については、記事「GIMP2の導入手順」が参考になります。
作成するWeb素材のサンプル（ロゴ1）
完成すると、次のようになります。
色：black
（サイズ：300×79）
今回は、それぞれ好きな言葉を入れる方がおもしろいと思うので、配布はしません。難しいものではないと思うので、言葉や色を変えて作成してみてください。
Web素材の作り方（ロゴ1）
それでは、コタツでゴロゴロしながら、ロゴを作成します。
1：新規ファイルの作成
次の手順をサクサクと進めて、新規で画像ファイルを作成してください。
- （01）ファイルの新規作成をクリックする。（[ファイル]-[新規]）
- （02）サイズを300×100に設定する。
- （03）表示サイズがあわなければ、合わせる。
2：文字を、モジモジしながら入力する
（04）
「道具箱」の「文字ツール」を、クリックします。
（05）
描画画面で、文字列を入力します。
画像ファイルをクリックすると、GIMP文字エディタが表示されます。そこで文字を入力します。
（06）
「道具箱」の下に、「文字ツール」詳細設定が表示されているので、「フォント」と「大きさ」を決めます。
フォントと書いてある右隣に、フォントをメニュー表示させるボタンがあります。クリックしてメニューから好きなフォントを選択しましょう。
また、フォントサイズも描画画面を見ながら、適度な大きさでおさまるように数値を入力しましょう。
私は、次のようにしてみました。
- フォント：Bookman Old Style Semi-Bold
- 大きさ：50px
また、文字の色を黒以外にしたい場合は、お好きな色に変更してください。
フォントやサイズが決まったら、文字エディタは[閉じる]ボタンをクリックして、閉じて構いません。
3：文字を移動する
（07）
移動ツールを使って、文字をよきところに移動させましょう。
4：レイヤー複製
（08）
レイヤーを、右クリックして、メニューを表示させます。
（09）
メニューから、「レイヤーを複製」を選びます。
5：複製した文字の編集
（10）
複製した文字を、いじっていきます。
「鏡像反転ツール」をクリックし、「垂直」を選択します。
（11）
文字をクリックします。（適当な箇所で構いません）
分かり難いかもしれませんが、文字が垂直方向に、鏡面変更されます。
（12）
「移動ツール」をクリックして、複製した方の文字を適当な位置に移動させます。
うまくつかめずに、移動できない場合は、移動ツールの詳細設定で「Move the active layer」にして、実行レイヤーで移動させる方が楽かもしれません。
（13）
「遠近法ツール」を、クリックします。
（14）
文字をクリックします。（適当な箇所で構いません）
そうすると、4つ角に正方形が表示されます。
また、次のようなウィンドウが、別途表示されます。（あとで使います）
（15）
4つ角の正方形をつかんで、台形になるように動かします。（ドラッグします）
表示サイズを調節して、確認しながら、文字列同士の底がそろうようにしましょう。
（16）
形が決まったら、[変換]ボタンを、クリックします。
（17）
道具箱の「消しゴムツール」を、クリックします。
（18）
「消しゴムツール」の詳細設定で、ブラシを変更します。
ブラシのボタンを、クリックしましょう。
（19）
ぼやけたブラシの中で一番大きいものを、選びます。
（20）
次にScaleに、「5」を入力します。（試してみて、使いやすい大きさで構いません）
（21）
ぼやっと消します。（クリックまたはドラッグ）
レイヤーごと、不透明度をちょっと下げても良いかもしれませぬ。でも、やり過ぎると、表示されなくなります。
6：画像のトリミング
（22）
「切り抜きツール」を、クリックします。
（23）
画像のサイズが大きくて、余白が多いようであれば、トリミングします。
画像画面で、左上から右下へドラッグして、切り抜く範囲を選択します。
（24）
クリックすると、決定します。
7：保存
（25）
頃合（ころあい）の良いところで、xcfで保存しておきましょう。
8：各画像ファイル形式で保存
（26）
あとは、記事「GIMP2の画像ファイル保存方法」で行ったように、gifなどで保存（エクスポート）しましょう。
透過GIFにする場合は、記事「透過GIFのギザギザ」が参考になります。
次回予告
次回は、写真内の不要部分を消す「スタンプツール」について書きます。
関連記事
画像編集ソフトGIMPに関連する記事を、ご紹介します。
1：GIMP2の導入
2：GIMP2で写真を編集する
3：GIMP2の基本
4：無料Web素材の作り方
作成日：2008/02/17 更新日：2008/02/17
« 「透過GIFのギザギザ」｜「GIMP2のスタンプの使い方」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/188-9dc5418b
