GIMP 2.8.18導入

フリーソフトのペイントツール「GIMP」が2016年7月14日に、2.8.18にアップデートしていました。
どうやら独自保存形式XCFで脆弱性が発見され、修正のための更新とのことです。
なので、特に理由がない限りは早めの更新が良いでしょう。

関連記事
画像編集ソフト「GIMP」に脆弱性。XCFファイルを開くと任意コードを実行される恐れ

GIMPで動画ブラシを作る方法

GIMPをインストールすると簡単なブラシが付いてきますが、あまり種類も多くなく、ちょっと凝った絵を描くには物足りません。
しかし、GIMPではブラシを自作できますので、このページではその方法を解説したいと思います。
また、通常のブラシでは面白くないので、ストロークが伸びるごとにブラシの形が変わる動画ブラシに挑戦します。
なお、この解説で使用したGIMPのバージョンは2.6.3です。
通常のGIMPブラシについては、別の機会に解説します。

ブラシの基礎知識

GIMPのブラシは、GIMPで読み書きできる通常のファイルです。
通常のブラシファイルは拡張子が「gbr」もしくは「gpb」です。
拡張子が2つある理由は調べていないのでわかりません。
今回扱う動画ブラシは「gih」の1種類です。

動画ブラシのファイル構成

動画ブラシはストロークが伸びるにつれて、ブラシの形状が変化します。
変化のパターンはブラシファイルのレイヤー数に準じます。
カラーモードはRGBであればそのレイヤーの画像自体がブラシになりますが、グレースケールの場合は、黒がブラシになります。
アンチエイリアスを適用した場合には、白以外がブラシになります。

動画ブラシの1コマ目を作る

何はともあれ、実際に作っていきましょう。
まずは、「新しい画像を作成」します。

GIMP-動画ブラシ01

キャンバスの大きさは64×64でカラーモードはグレースケール、そしてここでは塗りつぶしを透明にします。
ブラシとしては背景が白でも抜きになりますが、加工するには少し邪魔になるので、透明で作成します。
ブラシの模様には、文字のハートを利用しました。
通常では入力できないので、IMEツールから選択しました。
フォントはメイリオ、ポイントサイズで72を指定しました。
入力した文字を、キャンバスの中央に配置するには次の方法が確実です。

  1. メニュー > レイヤー > レイヤーの自動切抜き
  2. メニュー > ツールボックス > 整列
  3. (以下、パネル操作)キャンバスを選択 > 中央揃え(中央の) > 中央揃え(垂直の)

GIMP-動画ブラシ02
予断ですが、表示倍率のセレクトメニューが文字化けしているのと、文字レイヤー1枚なのにタイトルバーでは2枚になっています。
また、名称未設定の通し番号がバラバラになりますが、気にしないでください。

動画ブラシの2コマ目を作る

ここで作る動画ブラシは、ハートマークがくるくると回るもにします。
まずは1コマ目のレイヤーを複製して、60度回転します。
そして、1コマ目と同じように、中心に配置しましょう。
特に難しいところはありませんが、レイヤーウィンドウは次のようになっています。

GIMP-動画ブラシ03

動画ブラシのコマを全て作る

ハートが60度ずつ回転するので、6コマで一周します。
2コマ目を作ったのと同じ要領で、残りの4コマを作ります。
レイヤーウィンドウでは、次のようになっています。

GIMP-動画ブラシ04

動画ブラシの最終調整

6コマ全て作り終わったら、xcf形式で保存しておきましょう。
そして、動画ファイル形式で保存・・・の前にもう1段階あります。
このファイルはカラーモードがグレーケールなので、ブラシでは透明度が機能しません。
透明度は黒と同じ扱いになってしまうので、白で塗りつぶす必要があるのです。
それなら最初から背景を白にすればいいのかもしれませんが、背景があると中央に配置するときに邪魔になるので、透明なレイヤーを使っていたのです。
多少面倒かもしれませんが、背景が白のレイヤーを1枚ずつ合成していきましょう。
レイヤーウィンドウでは次のようになっています。

GIMP-動画ブラシ05

ブラシを保存する

いよいよ動画ブラシとして保存しましょう。
「名前をつけて保存」を選び、ファイル名は「hearts.gih」とします。
パラメータを設定するダイアログが開きますので、感覚を50、セル数と並びをコマと同じ6、そして、コマを表示する順番はincremental(順次)にします。
説明はブラシの選択画面で表示されるもので、ここでは「original hearts(movie)」としておきます。
設定が終われば保存します。
ブラシファイルとして読み込める場所にコピーして、GIMPを再起動または、ブラシダイアログよりブラシの再読み込みで、作ったばかりの動画ブラシが表示されていれば成功です。
これでハートが回り続ける動画ブラシの完成です。
最後に、このブラシを使ったテクスチャの例をご覧ください。

(間隔は50のまま、グラデーション描画でなぞった場合)
GIMP-動画ブラシ07
(不透明度を50、間隔を30に、揺らぎを揺らぎ1.00にしてグラデーション描画で塗りつぶした場合)
GIMP-動画ブラシ08
実際に作成したxcfとgihの書庫ファイル
GIMP-動画ブラシ書庫ファイル

おつかれさまでした。

GIMPでWeb素材を作ろう

完成画像

背景やボタンとしても使えそうで、今風(?)なWeb素材を作ってみましょう。
このような画像が作れるようになります。
文字を重ねると、ボタンらしくなりますね。
この解説で使用したバージョンは、2.2.4です。

実際に作ってみる

それでは、手順を追って作ってみましょう。

  1. 新規画像を作成します。
    手順1-1
    とりあえず、200×40というサイズで作ることにします。
    細かなサイズ指定は、慣れれば各自が判断できるでしょう。
    手順1-2
    問題なく作成されれば、こういうウィンドウが出現します。
  2. 基本とする色を塗ります。
    手順2
    ここでは、お気に入りの色である緑色を使いましたが、どのような色でもかまわないでしょう。
    ただし、濃い目のほうがいいかもしれません。
  3. グラデーションを塗るための準備をします。
    画像を全選択してください。
    手順3-1
    そして、選択領域の縮小で2px縮めます。
    手順3-2
    次に、角を丸めます。
    ここでは、半径を「50%」という設定で丸めます。
    好みで変更してもかまわないでしょう。
    手順3-3
    ここまで問題がなければ、このような状態になります。
  4. シャドウとなるグラデーションを塗ります。
    2枚目のレイヤーを作成します。
    手順4-1
    最上部になるように配置してください。
    手順4-2
    新規レイヤーへグラデーションで塗ります。
    「前景から透明に」を選択します。
    形状は「Linear」反復は「なし」です。
    手順4-3
    下から中間までを選択し、グラデーションで塗ります。
    ここまで問題がなければ、このような状態になります。
  5. ハイライトとなるグラデーションを塗ります。
    手順5-1
    減算選択で半分にします。
    手順5-2
    再び角を丸めます。
    半径を「100%」という設定で丸めます。
    もし、膨らむようなら設定値を「90%」などに減らします。
    手順5-3
    ここまで問題がなければ、このような状態になります。
  6. グラデーションの調整を行います。
    手順6-1
    グラデーションを塗ったレイヤーの透明度を「50%」に変更します。
    手順6-2
    うまくいけば、こういう状態になります。
    なんとなく、雰囲気が出てきたでしょうか。
    しかし、もうちょっと手を加えていきましょう。
  7. ボーダーを塗るための準備を行います。
    手順7
    画像全体を選択して、それから2px縮小します。
    選択領域を反転しておきます。
    今回、角は丸めません。
  8. ボーダーを塗ります。
    この手順は、一気に進めてしまいます。
    3枚目のレイヤーを作成します。
    手順8-1
    最上部になるように配置してください。
    手順8-2
    白色で描画色塗りします。
    画像の端2pxをすべて塗ってしまいます。
    作業しやすいように、表示倍率を800%に変更してあります。
    手順8-3
    画像全体を選択して、それから1px縮小します。
    選択領域を反転して、角もそのままです。
    黒色で描画色塗りします。
    画像の端1pxをすべて塗ってしまいます。
    手順8-4
    アクセントに、角の1pxを白色で塗っておきました。
  9. ボーダーの調整を行います。
    手順9-1
    3枚目のレイヤーをオーバーレイモードに変更します。
    手順9-2
    白色はハイライトっぽく、黒色はシャドウっぽくみえるようになります。
    手順9-3
    等倍で表示すると、こういう状態になります。

Web素材の完成

画像として書き出して完成です。
完成画像
透明度のある、それっぽい画像が出来上がりました。
パターン追加
背景とグラデーションの間にパターン塗りを加えてみました。
雰囲気が変わって、いい感じになります。
こういうWeb素材が使われているのを、よく見かけると思います。

自分で作るのが面倒な方へ

ここで使用したデータファイルをお使いください。
背景画像の色を変えるだけで、いろんなパターンの素材が作れることと思います。
ダウンロードで内容を表示してしまうブラウザの場合には、右クリックメニューから対象を保存してください。
Photoshopでは、こういった作業をマクロにしてしまえば、いろんなサイズでも自動的に作れます。
しかし、GIMPではマウス操作の記録という機能がなく、スクリプトをコーディングしなければなりません。
自動化できるようになるのは、いつになることでしょう…。

更新履歴

2008/04/14
サイト移動に伴うHTMLの修正(旧URI:[廃止])
2007/11/16
公開