「キャンバス境界にスナップ」「新規ガイド(パーセントで)」「ブレンドツール」などを使い、メニューやボタンの背景にありがちな、グラデーション背景を簡単に描く方法。
新しい画像を作成
![gimp-tutorial-gradientBackground2-file-new](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-file-new-300x303.png)
「ファイル⇒新しい画像」で、「新しい画像を作成」ダイアログを開く。
![gimp-tutorial-gradientBackground2-file-new-dialog](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-file-new-dialog-300x205.png)
「高さ:300px」、「幅:50px」の画像を新規作成。
赤く塗りつぶす
![gimp-tutorial-gradientBackground2-edit-fill-fg-red](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-edit-fill-fg-red-300x471.png)
「描画色」を「赤」に設定し、「フィルタ⇒編集⇒描画色で塗りつぶす」で、赤く塗りつぶす。
![gimp-tutorial-gradientBackground2-ex--1](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-1.png)
右の画像のようになる。
キャンバス境界にスナップ
![gimp-tutorial-gradientBackground2-view-snap-to-canvas](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-view-snap-to-canvas-300x479.png)
「表示⇒キャンバス境界にスナップ」をクリックし、チェックを付け、「キャンバス境界にスナップ」を有効にする。
ガイド
![gimp-tutorial-gradientBackground2-image-guides](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-image-guides-300x238.jpg)
「画像⇒ガイド⇒新規ガイド(パーセントで)」をクリックし、「Script-Fu: 新規ガイド(パーセントで)」ダイアログを呼び出す。
![gimp-tutorial-gradientBackground2-image-guides-new-guide-percent-dialog](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-image-guides-new-guide-percent-dialog-300x159.png)
「方向:水平」「位置(パーセントで指定):50」で適用。
新しいレイヤーを追加
![gimp-tutorial-gradientBackground2-layer-new](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-new-300x335.png)
「レイヤー⇒新しいレイヤーの追加」で、「新しいレイヤー」ダイアログを開く。
![gimp-tutorial-gradientBackground2-layer-new-dialog](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-new-dialog-300x328.png)
「高さ:300px」、「幅:50px」、「レイヤー塗りつぶし方法:透明」の新しいレイヤーを追加。
ブレンドツール
![gimp-tutorial-gradientBackground2-tool-gradient-white](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-tool-gradient-white.png)
「描画色」を「白」に設定し、ブレンドツールを呼び出す。
![gimp-tutorial-gradientBackground2-tool-gradient-fgToTransparent-white](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-tool-gradient-fgToTransparent-white.png)
「描画色から透明」を選択し、コントロール・キー「Ctrl」を押しながら、画像の上端から中央の水平線に向かって真っ直ぐに、ドラッグ&ドロップし、グラデーションに塗る。
![gimp-tutorial-gradientBackground2-ex--2](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-2.png)
右の画像のようになる。
不透明度
![gimp-tutorial-gradientBackground2-layer-opacity-50-white](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-opacity-50-white.png)
レイヤーの不透明度を「50.0」程にする。
![gimp-tutorial-gradientBackground2-ex--3](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-3.png)
右の画像のようになる。
新しいレイヤーを追加
![gimp-tutorial-gradientBackground2-layer-new](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-new-300x335.png)
「レイヤー⇒新しいレイヤーの追加」で、「新しいレイヤー」ダイアログを開く。
![gimp-tutorial-gradientBackground2-layer-new-dialog](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-new-dialog-300x328.png)
「高さ:300px」、「幅:50px」、「レイヤー塗りつぶし方法:透明」の新しいレイヤーを追加。
ブレンドツール
![gimp-tutorial-gradientBackground2-tool-gradient-black](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-tool-gradient-black.png)
「描画色」を「黒」に設定し、ブレンドツールを呼び出す。
![gimp-tutorial-gradientBackground2-tool-gradient-fgToTransparent-black](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-tool-gradient-fgToTransparent-black.png)
「描画色から透明」を選択し、コントロール・キー「Ctrl」を押しながら、画像の上端から中央の水平線に向かって真っ直ぐに、ドラッグ&ドロップし、グラデーションに塗る。
![gimp-tutorial-gradientBackground2-ex--4](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-4.png)
右の画像のようになる。
不透明度
![gimp-tutorial-gradientBackground2-layer-opacity-50-black](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-layer-opacity-50-black.png)
レイヤーの不透明度を「50.0」程にする。
![gimp-tutorial-gradientBackground2-ex--5](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-5.png)
右の画像のようになれば完成。
使用例
![gimp-tutorial-gradientBackground2-ex--button](http://alphasis.info/wp-content/uploads/2014/11/gimp-tutorial-gradientBackground2-ex-button.png)
ボタンの背景に使用。