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