GIMP2.8で追加されたレイヤーのグループを使ってボタンをたくさん作った

iPadアプリのiPhone版を作っていて、ボタンの数が多くなりすぎて、かといって表示領域は最大限にとりたいので小さいボタンが必要になりボタンを自作しています。GIMPを使って作っているのですが、バージョン2.8から追加されたグループレイヤーがとても便利です。

今回作ったボタン

将棋の駒がなるべく大きくなサイズで描画できるように、画面の両端にボタンを押し込めました。横幅は20ピクセルで、ボタンの幅は18ピクセルになりました。ステータスバーも20ピクセルなので、これがぎりぎりでしょう。

そして、あまりにもボタンが小さいので、大きいサイズにして操作できるようにもしました。

まず、共通の背景となるボタン画像を作成しました。

レイヤーは次のように分けます。

■線の描画

線は次のような手順で描きます。

丸めるサイズや線の太さは微妙に変えます。影部分は選択領域をボタンより大きめにして、丸めるサイズも大きめにするといい感じになります。

■グラデーション

内部のグラデーション部分は、線形で薄めの黒から濃い黒に上から下に塗ります。

ボタンの上部のアイコンは、(1)大きいサイズ用のアイコン、(2)境界線でレイヤーグループにします。

まず、大きいサイズのアイコンを作ります。

中心線とマージンのガイドを置いておくとなにかと便利です。

大きいサイズのアイコンができたら、レイヤーグループを複製して小さいサイズのアイコンのレイヤーグループにします。

次に、複製したレイヤーグループのサイズを縮小し、時計回りに90°回転させます。

その後、次の順でグループ全体を移動させます。

レイヤをグループにしておくと、このように、サイズ変更や回転などの変形、移動が簡単にできてとても便利です。個別のレイヤは残っているので、後からグループ内のレイヤの一部だけ変更したりできます。

グループにしておくと、ファジー選択もグループ全体が統合されたような状態で選択できます。