GIMP2 バナー作成図解講座netbuisiness.biz/gimp2.pdfGIMP は、操作方法だけで書籍が出るほど、多くの機能を持っています。そのため、レポートではその中でも特に頻繁に使う「背景色の作成」

GIMP2バナー作成図解講座覧覧覧覧

発行者

http://upload.wikimedia.org/wikipedia/commons/4/45/The_GIMP_icon_-_gnome.svg

GIMP2 バナー作成図解講座

Copyright (C). All Rights Reserved.

- 2 -

■推奨環境■

このレポート上に書かれている URL はクリックできます。できない場合は最新の

Adobe Reader を無料でダウンロードしてください。

http://www.adobe.co.jp/products/acrobat/readstep2.html

■著作権について■

このレポートは著作権法で保護されている著作物です。下記の点にご注意戴きご

利用下さい。

このレポートの著作権はに属します。

著作権者の許可なく、このレポートの全部又は一部をいかなる手段においても複

製、転載、流用、転売等することを禁じます。このレポートの開封をもって下記の事

項に同意したものとみなします。

このレポートは秘匿性が高いものであるため、著作権者の許可なく、この商材の

全部又は一部をいかなる手段においても複製、転載、流用、転売等することを禁じま

す。

著作権等違反の行為を行った時、その他不法行為に該当する行為を行った時は、

関係法規に基づき損害賠償請求を行う等、民事・刑事を問わず法的手段による解決

を行う場合があります。

このレポートに書かれた情報は、作成時点での著者の見解等です。著者は事前

許可を得ずに誤りの訂正、情報の最新化、見解の変更等を行う権利を有します。

このレポートの作成には万全を期しておりますが、万一誤り、不正確な情報等が

ありましても、著者・パートナー等の業務提携者は、一切の責任負わないことをご了

承願います。

このレポートのご利用は自己責任でお願いします。このレポートの利用することに

http://www.adobe.co.jp/products/acrobat/readstep2.html



- 3 -

より生じたいかなる結果につきましても、著者・パートナー等の業務提携者は、一

切の責任を負わないことをご了承願います。



- 4 -

もくじ

■ GIMP2 のインストール・・・５

■ テキストの編集・・・１０

文字を入力する・・・１０

色・フォントを変更する・・・１１

画像を回転させる・・・１１

遠近感を出す・・・１３

鏡面反射・・・１５

文字に影をつける（普通の影）・・・１９

文字に影をつける（遠近法）・・・２１

■ 文字を加工しよう！・・・２２

プロのような文字を簡単に作る～ロゴ効果～・・・２２

■ 背景のグラデーション・・・３２

背景色の作成方法・・・３２

背景をグラディエーションにする場合・・・３４

■ バナーの保存方法・・・３６

■ 最後に・・・４０



- 5 -

■ GIMP2 のインストール

画像加工ソフトは多くありますが、その中でも「高機能」「無料」のソフトといえば

GIMP2 です。

説明などがあまりないため、敬遠されていますが、このレポートでは GIMP を使って

バナー作成していきますので、ぜひマスターしていただければと思います。

それではさっそく始めましょう！

まず GIMP2 ダウンロード画面へアクセスします。

以下の画面で GIMPforWindouws をクリックします。

http://www.geocities.jp/gimproject2/download/gimp-download.html

http://www.geocities.jp/gimproject2/download/gimp-download.html



- 6 -

するとダウンロード画面が表示されますのでファイルを実行します。

画面の表示に従って Next → Install now と進んでください。



- 7 -

インストールとともに自動で GIMP が立ち上がります。



- 8 -

（始めの起動は読み込みに時間がかかりますのでご注意ください。）



- 9 -

正常に起動しますと、以下のような画面が立ち上がります。

以上でインストールは完了です。

GIMP の操作方法

GIMP は、操作方法だけで書籍が出るほど、多くの機能を持っています。

そのため、レポートではその中でも特に頻繁に使う「背景色の作成」

「文字入れ」に関する項目にフォーカスしていきたいと思います。



- 10 -

■ テキストの編集

● 文字を入力する

テキスト

画像に、文字を入力したいときに使います。

テキストをクリックして、エディタの中に文字を入力します。



- 11 -

● 色・フォントを変更する

色・フォントを変更したいときは、ツールボックスのメニューから変更できます。

● 画像を回転させる

若干テクニカルな操作方法です。今度は、画像を回転させます。

やっぱりそれなりの画像作成するなら、ななめ文字が欲しいところですよね。

そんな時にこの回転を使います。

回転

やり方は簡単。

ボタンを押して、回転させたい文字を選んで、マウスで操作するだけです。



- 12 -

まずはを選んでみましょう。

そして、文字を回転させます。

任意の方向に回転させたら、ボックスの中の回転をクリックしてください。

すると、こんな感じに斜めにすることができました。

● 遠近感を出す



- 13 -

まるで奥行きがあるような画像を作成した時って多分あると思います。

または、奥から手前に向かって迫ってくるような感じ。

もちろん GIMP ではそれらを表現することができます。

遠近法というテクニックを使います。

遠近法

をクリックして、遠近感を出したい画像または文字を選択してください。

選択した文字の四隅に四角い枠が現れましたね？

これをマウスで操作して遠近感を出していきます。

例えば、右上の四角い枠を、上方向に引っ張ってみてください。

http://ozawa8.jp/gimp/wp-content/uploads/2011/05/image35.png




- 14 -

最後に、ボックス内の変換をクリックすると完了です。

すると、こんな感じの遠近感のある文字が完成します。

これは結構テクニカルで使いどころが難しいですが、うまく使えばかなりプロっぽい

画像を作ることができます。

また、使い慣れないとなかなか使いにくい面もありますので、とにかくいじってみてう



- 15 -

まく使えるようになるまで練習してみてくださいね＾＾

● 鏡面反射

それでは次に、鏡面反射というテクニックを使います。

多少難しいかもしれませんが、慣れれば簡単です。

鏡面反射

多分これは、普通に使っても意味が分からない人続出だと思います。

試しに、文字を書いて、を選択し、文字をクリックしてみましょう。

ただ単に文字がさかさまになっただけで、意味が分からないと思います。

実は使い方があるんです。

まずは、鏡面反射したい文字か画像を用意してください。

そして、右側のレイヤーボックスから、右クリック⇒[レイヤーを複製]を選択してくださ

い。





- 16 -

すると、同じ文字がもう一つできましたね。



- 17 -

ここで、複製した文字（本当はどちらでもよいが一応）を選択し、で反転させてく

ださい。

なお、縦方向に反射させたい場合は、を選択した後下のメニューから[垂直]を

選んでください。

すると、以下のようになります。





- 18 -

一応反転文字にはなりましたね。

しかしこれでは鏡面反射っぽくはありません。

そこで、下の文字の透明度をあげて鏡面っぽく表現します。

もう一度レイヤーボックスより、反転したほうの文字を選択してください。

そして、以下の画像に従って[不透明度]のバーを左に動かしてください。

すると、だんだんと反転したほうの文字が薄くなっていくのが分かりますね。

薄くなると、だんだん鏡面反射っぽくなってきたでしょう？？？

以上で完成です。

もちろん画像にも応用できるので、画像であればより美しくできるはずですよ。



- 19 -

鏡面反射反転の向き

● 文字に影をつける（普通の影）

すると、以下のオプションが出てきます。



- 20 -

この数値に関しては、詳しくは説明しませんが、影の色とか、影の方向を指定するこ

とができます。この辺は使いながら感覚で覚えてください。言葉で説明するのがかな

り難しいです(笑)

設定したら[OK]をクリックしてください。

すると・・・・

こんなに簡単にできました。



- 21 -

● 文字に影をつける（遠近法）

設定画面より、数値を設定してから[OK]をクリックしてください。



- 22 -

基本的に使うのは、角度と色くらいでしょう。

影の角度、そして色を指定できます。

角度９０度、色を赤にすればこんな感じの影もできます＾＾

■ 文字を加工しよう！

画像加工には、文字を加工することも必須です。

何気に、毎回力を入れているのは画像よりも文字だったりします(笑)

文字を加工するだけでも、かなり画像全体が変わりますよ。

というくらい重要な部分なので、ここもしっかりと押さえておいてくださいね！

● プロのような文字を簡単に作る～ロゴ効果～

GIMP には、フィルタのロゴ効果というものがあるのですが、これがまたすさまじいの

です。

本当にボタンひとつでできてしまうので、かなーり簡単です。



- 23 -

そしてかなり数があるので、どんなものがあるのかなーって気になる人もいるかと思

います。なので、全部紹介します。

やり方は基本的にすべて同じです。

レイヤーから加工したい画像または文字を選択して、[フィルタ]-[ロゴ効果]を選択し

てください。

すると、一覧が出てきます。

この一覧から、変換したい形のロゴ効果を選択していきます。

では紹介しますね。

◆３D アウトライン



- 24 -

パターンを変更して色々な文字を作ることができます＾＾

◆エイリアンネオン

設定から、文字色と背景色を変更することも可能です。

◆エイリアン発行



- 25 -

こちらも同様に、文字色と背景色を変更可能です。

◆かじり取り

これなんですが、初期設定では、上の画像のように文字が潰れてしまうので何書い

ているか分からないです(笑)

なのでいつも私は以下の設定にして使っています。

◆グラデーションべベル



- 26 -

立体できれいな文字を作成可能です。ちなみに、文字色はこれで固定です。

◆クローム

◆コミック本

コミカルな雰囲気が出るロゴ効果です。

[グラデーション]から、文字の雰囲気を変更可能です。



- 27 -

◆チョーク

これを見ている方の大半は GIMP2.6 を使用しているかと思いますが、現在この機能

はバグで使えない模様。改善を待ちましょう。

◆テクスチャ

テクノな雰囲気が出ます。こちらもパターンで変更可能。

◆ネオン



- 28 -

文字色と背景色は変更可能。

◆ブレンド

文字色は変更不可だが、背景は変更可能。文字通り、背景はブレンドを使用してい

ます。



- 29 -

◆基本Ⅰ

きれいな立体文字ができます。文字色と背景色は変更可能。

◆基本Ⅱ

基本Ⅰとほとんど同じだが、文字色と同じ色の影が加わっているのが分かる。

文字色と背景色は変更可能。



- 30 -

◆牛模様

◆光沢

光沢のある文字ができます。

◆霜

かっこいいですねコレ。お気に入りです。



- 31 -

◆白熱の輝き

背景色は変更可能です。

◆粒子の軌跡

まるで文字が画像でくりぬいたかのように表現できます。

文字色と背景は変更可能です。

が、ほとんど緑しかまともに表示されません。

◆冷たい金属

超 Cool な文字。文字色はもちろん変更可能。

ね、こんなものすごい文字を簡単に作れるでしょう？

これは使わない手はないと思います。



- 32 -

■ 背景のグラデーション

● 背景色の作成方法

ファイル→新しい画像→画像サイズと進んでいきます。

今回はヘッダーのバナーを作成します。サイズは横600ピクセル、縦200ピクセルとし

ます。

設定が終わりましたら OK をクリックします。

すると今指定したサイズのバナーが表示されます。

それではバナーの背景色を作成していきましょう。

まず、ツールボックスの下図で赤い四角で囲んである、バケツのようなアイコンをクリ

ックし、次に黒いボックスをクリックしてください。

そして、カラーを選択しOKをクリックします。



- 33 -

次に、ツールボックスの下部にある「塗りつぶし方法」で「描画色塗り」を選択します。

そしてバナーにカーソルを持ってきてクリックするとバナーに色が付きます。



- 34 -

● 背景をグラディエーションにする場合

先ほどの背景のままですと、いわゆるベタ塗の状態ですがGIMP2 ではグラデーショ

ンの背景も簡単に作成することができます。

まず、「ツールボックス」の下図の赤い四角で囲んであるアイコンをクリックし、その下

部にある「グラデーション」をクリックし、お好きなグラデーションのパターンにしてくださ

い。

次に、下図のように、マウスの左ボタンを押しながらキャンパスを移動し、グラデーシ

ョンの始点と終点を決め、左ボタンを離してください。

※間違った場合はCtrl+Zで元に戻ります。



- 35 -

するとこのようにグラディエーションの背景が出来上がりました。

今回は縦のグラデーションにしましたが、始点と終点を横にすれば、横のグラデーショ

ンも作ることができます。

また、形状を変えることもできますので、お時間があるときにでもいろいろ試してみてく

ださい。



- 36 -

■ バナーの保存方法

バナーが作成できましたら、バナー素材、画像ともに保存します。

ファイルをクリックし「名前を付けて保存」をクリックしてください。

すると、下図のような画像保存画面に移動しますので、名前を付け、フォルダの保存

先を選択し、「保存」をクリックしてください。



- 37 -

以上で、バナー素材を保存することができます。

もしバナーを編集したい場合は、今回保存した素材をクリックし、編集を行ってくださ

い。

※xcf（拡張子）

xcf（エックスシーエフ）は、GIMP専用の保存形式です。

これを読み込むことで保存した場所から編集を行うことが出来ます。

次に、バナー画像を保存します。

先ほどと同様、ファイルをクリックし「名前を付けて保存」をクリックしてください。

次に、名前を付け、フォルダの保存先を選択し、「ファイルタイプを選択」の横にある

「+」をクリックしてください。すると、ファイルの保存形式が出てきますので、JPEG画

像・GIF画像もしくはPNG画像を選択し「保存」をクリックします。

※JPEG・GIF・PNG（拡張子）



- 38 -

JPEG（ジェイペグ）は、写真など色数の多いものに適しており、文字や線など色数の

少ないものには適していません。

逆に、GIF（ジフ）は、文字や線など色数の少ないものに適しており、写真などの色数

の多いものには適していません。

最後に、PNG（ピング）は、色数の多いものにも、少ないものにも適しており、最近では

特に使用される頻度が高い拡張子です。

そのため、画像を綺麗に見せたい場合はJPEGを、文字を綺麗に見せたい場合はGIF

を、どちらも綺麗に見せたい場合はPNGを選択すれば良いでしょう。

また、テンプレートAではJPEG、テンプレートBではPNGを、初期設定のバナー拡張子

にしています。そのため、使用するテンプレートに合わせて拡張子を選択しても良い

でしょう。

保存をクリックしましたら、下図のような画面が出てきますので「エクスポート」をクリッ

クしてください。

最後に、「保存」をクリックし、終了です。



- 39 -

※品質

品質を上げることで、画像をより綺麗に見せることができます。

ですが、その分ファイルサイズが大きくなりますので、こだわりがない場合は、このま

まの品質にしておいてください。

以上で、バナー画像の保存完了です。

■最後に



- 40 -

最後まで、お付き合い頂きまして誠にありがとうございました。

GIMP は無料で使えるとは思えないほどの、凄い機能を持った画像加工ソフトです。

ぜひ GIMP を使って、あなたのショップ作成に役立ててください。

Documents

GIMP2 バナー作成図解講座netbuisiness.biz/gimp2.pdfGIMP は、操作方法だけで書籍が出るほど、多くの機能を持っています。 そのため、レポートではその中でも特に頻繁に使う「背景色の作成」

GIMP2 バナー作成図解講座netbuisiness.biz/gimp2.pdfGIMP は、操作方法だけで書籍が出るほど、多くの機能を持っています。そのため、レポートではその中でも特に頻繁に使う「背景色の作成」