読者です 読者をやめる 読者になる 読者になる

クリアメモリ

プログラミングやモーショングラフィックス、便利なアプリケーションなど雑多に記録するブログ

GIMPでレーザーのようなイラストを描く

f:id:clrmemory:20170422163728p:plain 

先日、「Unityで点滅するオブジェクトの作り方」という記事を紹介しましたが、その中でレーザーのような画像を使いました。 今回紹介する方法を使えば、簡単に同じような画像を作ることができるのでぜひ試してみてください。

まずは「GIMP」という無料のイラストツールをインストールしましょう。

 

 

はじめに

 

今回作成する「レーザー」のような画像は以下のようなものです。

 

スクリーンショット 2015-12-14 4.49.47

 

 

実際の画像だと細すぎて見にくいので、拡大してあります。

この画像をレーザーの光線部分として使います。

 

ではこちらからGIMPをインストールしましょう。完了したら起動しておいてください。

続いて、レーザーの元となるような画像を作成します。

 

今回は640*300の画像サイズで作ってみました。

 

スクリーンショット 2015-12-14 4.28.11

 

レーザーの色を選ぶ

 

 

まずレーザーの色になる2色を選びましょう。

今回は「緑」と「黒」の2色で作ってみます。色を変更しても工程は変わらないので自由に選択してください。

 

 

スクリーンショット 2015-12-14 4.28.30

 

グラデーションをかける

 

次は「グラデーション」ツールを使います。

 

スクリーンショット 2015-12-14 4.28.35

 

このツールは2色の画像をブレンドして描くことができるもので、様々な場面で使えるので覚えておきましょう。

 

 

今回グラデーションの設定は以下のようにしてみてください。

 

スクリーンショット 2015-12-14 4.28.57

 

 

設定が完了したら、実際にグラデーションをかけてみましょう。 (横線がたくさんできるようにしてください。)

 

 

スクリーンショット 2015-12-14 4.49.03

 

このような色のレーザーが出来上がると思ってください。

続いて、この線を歪めていきます。以下の画像を参考にして「対話的歪め」を適用させましょう。

 

線を歪める

 

スクリーンショット 2015-12-14 4.49.24

 

フィルター > 変形 > 対話的歪めを選択すると、以下のようなウィンドウが開きます。

 

 

スクリーンショット 2015-12-14 4.49.36

 

画像プレビューが表示されているので、適当に動かしてみましょう。

上から下に動かしたり、丸く動かしたりして全体的に変形させます。

 

 

スクリーンショット 2015-12-14 5.16.05

 

2本の線がぐちゃぐちゃになったら「OK」を押します。

以下のようになったら完了です。

 

スクリーンショット 2015-12-14 4.49.03

 

続いて画像サイズの変更をしていきましょう。

 

画像サイズの変更

 

スクリーンショット 2015-12-14 5.18.38

 

「拡大・縮小」ツールの「補間アルゴリズム」を変更しておいてください。「補間しない」にしておくと、サイズを変更した時に画像が乱れてしまいます

 

 

先ほどの画像の縦幅を小さな値にしてください。

実際にレーザーとして使うようなサイズにしておくと良いと思います。

 

スクリーンショット 2015-12-14 4.52.50

 

サイズを変更したら「レイヤーサイズの変更」をしながら、レーザーを中央に置いておきましょう。

 

スクリーンショット 2015-12-14 4.52.35

 

 

最後に画像変更した際に、ぼやけてしまったので「シャープ」をかけます。

 

画像の明瞭化

 

スクリーンショット 2015-12-14 4.50.40 フィルター > 強調 > シャープ を選択します。

 

スクリーンショット 2015-12-14 4.51.03

 

 

プレビューを見ながら線が強調されるように調整してください。

OKを押したら以下のようになりました。

 

 

スクリーンショット 2015-12-14 5.28.19

 

完成

 

後はレーザーの発射装置などをくっつけて完了です。

 

スクリーンショット 2015-12-14 5.30.50

 

今回発射装置に使った画像を拡大するとこうなっています。

 

スクリーンショット 2015-12-14 5.59.13

 

 

自由に作ってみてください。 ゲーム内での動作や、この画像の使い方などはオブジェクトを点滅させる方法からご確認ください。

まとめ

 

今回は、緑と黒で作成しましたが、ほかの色を使ってもレーザーを作成できます。

画像を使うタイミングにあわせて、色を変更するのが良いと思います。

 

スクリーンショット 2015-12-13 6.48.171

スクリーンショット 2015-12-13 6.48.1712

 

 

黄色とオレンジの2色や、赤単色などでも作成してみましたが、やはり色が変わるとそれだけでかなり雰囲気が変わりますね。

 

レーザーに使う以外にも様々な場面で使える画像だと思うので、いろいろ試してみてください。

 

ではまた。