Gimpでイメージボタンを作ってみる。

ボタン素材作れ!って言われて途方にくれているプログラマーのために、角丸でちょっと立体っぽく見えるイメージボタンの作り方をまとめてみる。

とりあえず、幅100px x 高さ100pxのイメージボタンを作ってみる。

1. 背景色を #ffffff にしておく。
2. 新しい画像を作る
   1. メニュー > ファイル(F) > 新しい画像...
   2. 幅100px 、高さ100px に設定
3. 境界線を引く。
   1. 新しいレイヤーを準備する
      1. レイヤーダイアログを表示する
      2. 新規レイヤーを追加
      3. 名称を"border"に変更する
      4. 新規レイヤーを選択
   2. 前景色、背景色を作成
      1. 前景色 グレー Value 80程度
      2. 背景色 グレー Value 70程度
   3. 境界線を引く範囲を選択
      1. 画像を右クリック > 選択 > 角を丸める...
      2. 半径 20% 程度に設定
   4. "border"レイヤーをグラデーションで塗りつぶす
      1. グラデーションツールを選択
      2. グラデーションタイプ 「前景色から背景色」を選択
      3. 選択範囲の上から下までドラッグ。
4. ハイライトを作成
   1. 新しいレイヤーを準備する
      1. レイヤーダイアログを表示する
      2. 新規レイヤーを追加
      3. 新規レイヤーを選択
      4. 名称を"hilight"に変更する
   2. 前景色、背景色を作成
      1. 前景色 グレー Value 100 (#ffffff)
      2. 背景色 グレー Value 85程度
   3. 表面の範囲を選択
      1. 画像を右クリック > 選択 > 選択範囲を縮小...
         1. 縮小量 1ピクセルに設定
   4. "hilight"レイヤーをグラデーションで塗りつぶす
      1. グラデーションツールを選択
      2. グラデーションタイプ 「前景色から背景色」を選択
      3. 選択範囲の上から下までドラッグ。
5. 表面を作成
   1. 新しいレイヤーを準備する
      1. レイヤーダイアログを表示する
      2. 新規レイヤーを追加
      3. 新規レイヤーを選択
      4. 名称を"surface"に変更する
   2. 前景色、背景色を作成
      1. 前景色 グレー Value 95程度 (#e5e5e5)
      2. 背景色 グレー Value 85程度 (#cccccc)
   3. 表面の範囲を選択
      1. 画像を右クリック > 選択 > 選択範囲を縮小...
      2. 縮小量 1ピクセルに設定(一番外側から2px)
   4. "surface"レイヤーをグラデーションで塗りつぶす
      1. グラデーションツールを選択
      2. グラデーションタイプ 「前景色から背景色」を選択
      3. 選択範囲の上から下までドラッグ。
6. これで完成。
   1. ファイルを保存する。

角丸の量、前景色、境界線の色などは試行錯誤の必要あり。
コツとしては

• あまり過度な角丸にしない
• 前景色、境界線の色の輝度の差をあまりつけない

ってところ。
ちなみに、このボタンの凹んだ感じを作りたければ

• ハイライトの前景色を境界線の背景色に
• 表面を上下逆に

したらなんとなくそれっぽい。

参考画像