Web素材の作り方(ロゴ1)

ブログが作りたい!GIMPで画像編集 > Web素材の作り方(ロゴ1)

Web素材の作り方(ロゴ1)

GIMP2 Web素材の作り方(ロゴ1)

GIMP2でWeb素材を作ります

GIMP2を使ってWeb素材(ロゴ)を作ってみましょう。GIMP2の機能としては、新たに次の3つを使います。

  • 鏡像反転ツール
  • 遠近法ツール
  • 切り抜きツール

次の順番で、お話は進みます。

GIMPの導入(インストール)手順については、記事「GIMP2の導入手順」が参考になります。


作成するWeb素材のサンプル(ロゴ1)

完成すると、次のようになります。

無料Web素材ロゴ1(black)

色: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」を入力します。(試してみて、使いやすい大きさで構いません)

Scaleに5を入力

(21)

ぼやっと消します。(クリックまたはドラッグ)

ぼやっと消す

レイヤーごと、不透明度をちょっと下げても良いかもしれませぬ。でも、やり過ぎると、表示されなくなります。

6:画像のトリミング

(22)

画像のサイズが大きくて、余白が多いようであれば、トリミングします。

「切り抜きツール」を、クリックしてください。

切り抜きツールをクリック

(23)

画像画面で、左上から右下へドラッグして、切り抜く範囲を選択します。

画像画面でドラッグして切り抜く範囲を選択

(24)

クリックすると、決定します。

クリックすると決定

できたかしら?文字列をブログのタイトルにして、ヘッダーのタイトル画像などに使ってみてはいかがでしょうか。

7:保存

(25)

頃合(ころあい)の良いところで、xcfで保存しておきましょう。

8:各画像ファイル形式で保存

(26)

あとは、記事「GIMP2の画像ファイル保存方法」で行ったように、gifなどで保存(エクスポート)しましょう。

透過GIFにする場合は、記事「透過GIFのギザギザ」が参考になります。

前の記事へ
次の記事へ

次回予告

次回は、写真内の不要部分を消す「スタンプツール」について書きます。


関連記事

画像編集ソフトGIMPに関連する記事を、一部ご紹介します。

GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。

作成日:2008/02/17 更新日:2008/02/17

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/188-9dc5418b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて