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に関連する記事を、一部ご紹介します。
GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。
1:GIMP2の基本的な使い方
2:アイコンの作成方法
作成日:2008/02/17 更新日:2008/02/17
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。