ブロック画像の作り方（爆裂健編）
2002.09.08.（仮公開）
最近、「ブロック崩しのブロックの輪郭は、どうやったら綺麗に作れるのか？」という質問を何通か頂いたので、
この場を借りて私流の作成方法を紹介します。
なお、私の使っているグラフィックツールは、Adobe社の
Photoshop 5.5J です。
最新バージョンは使ったとこないのでよくわかりませんが、 多分同じ操作は出来ると思います。
ここでは、ツールの使い方や、ＣＧの描き方は紹介しません。
Webには素晴らしい「ＣＧの描き方」を紹介されている人が多数いらっしゃいます。
私みたいなヘタレではなく、そういう神のページを参考にしてください（笑）
あと、最近は「ＣＧを描こう！」系の本も多数出版されています。
まず、ＣＧが完成したところからはじめます。
今回のサンプルは、「ちょっと大人のビスケたん」です！（爆）
各レイアーに「背景」「体」「服１」「服２」を分けてＣＧを作りました。
で、いよいよブロックファイルを作るわけですが、まず
「別名で保存」か「複製を保存」で、現在のＰＳＤファイルを違う名前で保存してださい！！！
これから、レイアーを合成して作業を進めるので、レイアーの分かれている現在の状態を保存しておく必要があります。
ブロック１
レイアーを合成します。
「背景」レイアー１枚になりました。
レイアーの複製で「背景のコピー」レイアーを作ります。
「背景」レイアーを非表示にします。
背景の方のレイアーは消してしまったり、塗りつぶししてしまってかまいません。
で、「背景のコピーレイアー」から「ブロックファイル」を作ります。
投げ縄ツールを使って「服」以外の部分を削っていきます。
 |
← これ |
← もしくはこれ
ツールオプションで、「アンチエイリアス」を切ります。
画像の背景部分を囲って「Deleteキー」で削っていきます。
服のほんの少し外枠を残すのがベストです。
「アンチエイリアス」を切ってあるので、ドット単位で綺麗に消えます。（半透明が存在しません）
で、出来たのがこれ。
これを「データ書き出し」＞「GIF89a書き出し」で ＧＩＦ出力します。
ちなみに GIF89a というのは、「透明GIF」のことです。
あと、「Web用に保存」でも透明GIFを出力できるはずです。
出力時のオプションで「インターレス」はＯＦＦにしてください。
これで、「服１」のブロックが出来ました。
ブロック２
最初に「保存しておいたＰＳＤ画像」を開きます。
で、またもレイアーを統合するので、現在のデータを「別名で保存」か 「複製を保存」で、
現在のＰＳＤファイルを違う名前で保存します。
「服1」のレイアーを削除します。
レイアーを合成します。
「背景」レイアー１枚になりました。
レイアーの複製で「背景のコピー」レイアーを作ります。
「背景」レイアーを非表示にします。
あとは、ブロック1と同様です。
これで、ブロック作成は完了です。
見てのとおり、背景画像と統合した後、周りを消していったので、ブロック画像の淵は背景画像の色になっています。
そのため、ブロックゲームになったときにブロック画像が背景画像の上に違和感なく表示されます。
他のグラフィックソフトを使っている場合も、要領はは一緒です。
「ブロック画像の淵に半透明のピクセルを作らない」と「ブロック画像の淵は背景画像の色にする」を行えばいいのです。
ちなみに最初から半透明がなくドット単位のペイントツールの場合は、ブロック画像の淵のことは考える必要が無いかもしれません。
今回作ったデータはこれです。 ダウンロードできます。 約１.５Ｍほどあります。
（サイズがサイズなので、ブロードバンドでないとダウンロードがきついかもしれません・・・）
Adobe Photoshop PSD ファイルです。
ブロックファイルの作り方（爆裂健編） 2002.09.08
block_make.lzh（1.5M）