このページでは、このサイトで配布しているような素材の作り方を、私なりの作り方で紹介します^^


1.絵を描く。

 まずは絵を描きましょう。
パソコンには初めから、「ペイント」などのお絵かきソフトがインストールされています(たぶん)。
Windowsの場合、スタート→全てのプログラム→アクセサリ→ペイント、とたどっていけば起動できると思います。
そのまま描き始めてしまっても良いのですが、素材はサイズがあまり大きくないですので細かいところは 描きにくいと思います。
そこで「表示」の中から「拡大」を選んで拡大率を上げて大きくしましょう。800%くらいがいいかと思います。
同時にグリッドを表示(「表示」の中にあります)させましょう。
下の絵のようになったでしょうか。



 この1マスの幅を1ドットといいます。
パソコンの画面は沢山の小さなマスが集まって絵を映し出していますが、その一番小さい1マスの幅が1ドットです。
このマスを1こづつ塗りつぶして描く絵をドット絵といいます。
ドット絵では、1マスずつ描いていくものなので、とても細かく描くことができます。 逆に大きな絵を描くにはとても大変です^^;

 ドット絵を描くためのソフトは、インターネットでいくつか無料で配布されています。
私は「EDGE」という、たかぼーさんが開発されたソフトを使っています。いろいろな機能がありとても使いやすいのでお勧めです^^

  EDGEのダウンロードはこちらへ→たかぼーソフトネットワーク 2003

 それぞれのソフトの基本的な使い方は、各ソフトのHELPなどを見ていただければわかっていただけると思います。
拡大して書くと斜めのラインなどはカクカクが気になると思いますが、普通のサイズにしてみると案外そうでもないです。
時々普通のサイズに戻して見た目を確認しながら、手直しをしていくとうまく描けると思います^^
↓はEDGEで絵を描いているところです。




2.絵を保存する。

 描いた絵を保存します。
「当たり前だろ〜」という声も聞こえてきそうですが、ちょっと待ってください。保存するファイルの形式に注意です。
 画像ファイルの形式にはいくつかの種類があり、主なものに JPEG(ジェイペグ) PING(ピング) GIF(ギフ/ジフ) BMP(ビットマップ)という形式があります。
 ほとんどの場合「透過処理」(次の項で説明します)を行いますので、GIF形式(またはPNG形式)を選択して保存して下さい。
 ただしGIF形式やJPG形式はライセンスの問題で、無料で配布されているソフトでは扱えない(GIF形式で保存できないし開けない)と思いますので、 EDGEなどのソフトで書いた場合はいったんPNGやBMP形式で保存します。
 同様に、WindowsXP以外のOSのペイントではBMP形式しか扱えない場合があります。この場合MicrosoftのOffice(WordとかExcelなどが入っているのです)に入っているPhotoEditorをインストールすれば、ペイントでもGIF形式やJPG形式を扱えるようになります。

 MicrosoftのOfficeはあらかじめパソコンにセットになっていることが多いので、もっている方は多いのではないかと思います。

PhotoEditorは、スタート→プログラムの中(またはスタート→プログラム→Officeツールの中)にあります。



 WordとかExcelは入っているけどPhotoEditorなんてついてなかったよ、 という方はインストールされていないだけでOfficeのディスクにちゃんとはいっています^^
 その場合はいったんOfficeをアンインストール(*1)してから、もう一度Officeをインストール(*2)し直して、途中の選択肢で「完全インストール」を選ぶか、「カスタムインストール」を選んでPhotoEditorを追加インストールするように設定してください。
 「標準インストール」ではPhotoEditorはインストールされませんので注意して下さいね。
 また、Officeのバージョンが新しいと、わざわざアンインストールしなくても機能の追加インストールをできたりしますが、わかりにくければ上のようにして下さい^^

(*1)スタート→コントロールパネル→プログラムの追加と削除、ここでMicrosoftOfficeを選んで削除します。
(*2)MicrosoftOfficeのディスクをパソコンに入れると自動的に始まります。

3.透過処理をする。

 さて、絵を描いてGIF形式で保存したものを、そのままあなたのホームページのどこかに貼り付けたとしましょう。
例として私が書いた飛行機の絵を下にはりつけます。



 どうでしょう。どうもおかしいですねよねぇ?絵の外枠の部分まで表示されていてしまっていますね。
このページの背景が白なので、わざと黒い背景のところに載せてありますが、これでは真っ白な背景のところにしか使えませんし 、黒で塗ったら黒い背景でしか使えません。
絵柄のある背景にはどんな色にしてもおかしくなってしまいますね。
それでは困るので、この余計な部分は表示されないように(透き通るように)しましょう。
これを「透過処理」といいます。

 透過処理では、絵の中のある1色を指定して透き通る(見えない)ようにします。
この場合、「白」の部分を透き通るようにすればいいですよね。
このとき注意しなくてはいけないのは、絵の中の必要な部分にも白が使われているとその部分まで透き通ってしまうということです。
なので、透き通らせたい箇所は、絵の中に使われていない色で塗っておくようにしましょう。

 EDGE等のソフトで素材を作った方も、MicrosoftPhotoEditorを使って透過処理をすることができます。
 PhotoEditorを起動したら、先ほどPNGなどの形式でいったん保存しておいた画像を開き、↓のように透過処理のボタンを押して、絵の中の透過したい色をクリックするだけです。



 透過される部分がチェック柄で表示されます(素材が小さすぎるとチェックに見えないですが)。できたらGIF形式で保存してできあがりです。もとからGIF形式なら上書き保存でかまいません。
最後に透過処理をしたものを下に貼り付けておきます^^



4.発展

 もっと大きな絵を書きたい場合は、ドット絵ソフトではなく他のソフトを使ってみましょう。使い方はちょっと難しくなりますが、グラデーションなどの効果などは簡単に表現できるようになります^^
 私はPixiaというソフトを使わせていただいています。このソフトを使った素材の作り方のアップは未定です。そのうち書かせていただくかも・・?



△Libraryへもどる
▲サイトTopへ