≪ カツのGIFアニメ HOME   サイトマップ


 ■ カツ流 〜 GIFアニメ素材の作り方 その@


【GIFアニメ素材の作り方メニュー】

その@
■ はじめに!
■ 使用ソフト
■ 素材ネタ思案編
■ ペイントブラシ編

そのA
■ おまけ!
■ Adobe Photoshop Elements編
■ GIFアニメ作成編
■ あとがき



   ■ はじめに!

みなさん、お気に入りの素材は見つかりましたか?
なかなか気に入った素材が見つからず、ネットを時間をかけて探し回ってやっと「これだ〜っ!」と見つけて…。
見つかればまだいいのですが、見つからなければガッカリです。みなさん自分のHPに使う素材を探すのに時間を掛け苦労をしているのではないでしょうか?  私自身も、自分のHPを作ろうと思い立った時に素材探しを始めたのですが、ネット上をウロウロ探してしてもなかなかお気に入りの素材にめぐり合えませんでした。 そんな時たまたま訪れた素材屋さんに、素材の作り方が紹介してあったので、自分で作ってみたんです。

これが、素材屋「カツのGIFアニメ」の始まりです。
そうなんです!自分で素材を作ることがが出来るんです!この場所にこんなGIFアニメがあったら、 ここにワンポイントがほしい、こんな希望が自分で叶えられるんです。おまけに全部自分の思ったようにできます。
みなさんも自分のHPに、自作の素材を作製して飾ってみたらいかがですか?きっとHP作りが今より楽しくなるハズです。 ここでは、私流〜(と言っても他の素材屋さんの受け売りなのですが。) GIFアニメ素材作りの過程を紹介させてもらいますので、 興味があれば是非チャレンジしてみてください。

※ ここで紹介する各ソフトの詳しい使い方は、そのソフトのヘルプを参照して下さい。

※ 2016年8月現在、の最新OSは「ウインドウズ10」になりました。
このページで紹介している時点のOSは「ウインドウズXP」です。すべて確認はできていませんが、このページで紹介しているソフトも最新版になっていますのでより使いやすく作業しやすいよう変更が加えられています。
と言う事で、このページの情報は古いものになってしまっていますのでお役に立てるかどうか不安です。お読みいただけるのなら参考までにしておくつもりでお願いいたします。


   ■ 使用ソフト

・ Windws 付属の 「ペイントブラシ」
・ Adobe Photoshop Elements
・ ホームページ・ビルダーに付属の「ウェブ アニメータ」

私のOSは、Windws XPです。 このWindwsに標準で付属している 「ペイントブラシ」 を使って、絵を描いています。 ドット絵と呼ばれる、小さな四角い点を並べて表現する古典的なやつです。

「Adobe Photoshop Elements」は、ペイントブラシで作成した素材の色違いを作ったり、サイズの変更などをする時に 使用しています。素材を加工しない時は使いません。

ウェブ アニメータは、作成した画像をGIFアニメ化するのに使っています。以前は、Adobe Photoshop ElementsでGIFアニメ化していたのですが、 ウェブ アニメータの方が使い勝手がいいので、こっちを使う様になりました。
ちなみに、本体のホームページ・ビルダーはHPの製作には使用してません。

   ■ 素材ネタ思案編

まずは、何を作ろうか?と考えるワケなんですが…。 GIFアニメ素材集にある「ライオン」を使って説明して行きます。

     39×40 513b    49×47 614b

私の場合、「これを描こう!」と決めて描き始めるのではなく、その日の気分でダラダラと、そこら辺にある紙に思ったまま、手が動くままスケッチしていきます。
描いていくうちになんとなく絵が降りてくる?時と、降りてこない時があるのですが、絵が降りてきた時はそのまま描き続けますが、降りてこなかった時は潔くやめてしまいます。
ライオンが降りてきた時のスケッチの一枚が、これです。


400×284 29.4kb



ほとんど落書き状態です。
真ん中あたりから描き始めて時計方向に書き進めています。ライオンだけで、四枚描いてました。
紹介しているのは、三枚目だと思います。(一枚目なんかは人に見せられるシロモノじゃ〜ないデス!) だんだん顔の形が固まり始めて、たてがみで悩んでいます。
たてがみはここで決定せずに、イメージだけを抱えてペイントブラシに書込む作業に進んで行きます。

   ■ ペイントブラシ編

さて、ここからペイントブラシを使ってマウスでポチポチと描いていきます。
まずペイントブラシを起動したら、私は最初に画像サイズを決めてしまいます。
それは、後でサイズ変更する手間が省けるからです。私の場合自由に描き始めると、ほとんどの場合あとで縮小するハメになっちゃうので、 最初に画像サイズを決めてしまいます。
描いてから「もうちょっと小さい方がいいかなぁ?」なんて事もありますが、その時は素直に縮小します。    

画像サイズは、メニューの「変形」→「キャンバスの色とサイズ」→で幅と高さを指定します。
ライオンは、幅39×高さ40です。単位は「ピクセル」、色は「カラー」にしておきます。 
OKを押すと、キャンバスが指定したサイズになります。 

   268×101 5.10kb


次に、このままではキャンバスが小さくて描きにくいので、キャンバスを拡大します。 
メニューの「表示」→「拡大」→「拡大率の指定」→で拡大率800%にチェックしてOK。
これで、描きやすいサイズになりました。

   268×122 5.62kb


描きやすいサイズにはなりましたが…まっ白でなんとなく描きにくくないですか? 
そこで先ほどの「拡大率の指定」の下にあった「グリッドを表示」を使います。
グリッドを表示にすると、細かく四角い、ます目が表示されます。
キーボードのCtrl+「G」でも表示する事ができて、押すたびにON・OFF します。 私は、こっちの方をよく使います。
これで、準備は完了です。

   268×129 4.74kb


さあ、描き始めましょう! 
左側にある「ツールボックス」のえんぴつを選択して、下の「カラーパレット」で好きな色を選択します。
そのままでも、えんぴつの黒で選択されてますから、すぐに描きはじめられます。 先ほどのスケッチのイメージを、マウスを使って「ポチッ、ポチッ」と打っていきます。色は付けずに線だけで描いていきます。

   221b    244b    243b    354b

上のがライオンを描いた時の物です。左から順番に描き進めています。
最初に描いたヤツなんか、「ライオネル・リッチー」みたいで描きながら、「ブゥ〜ッ!」と噴出してしまいました。
途中で保存しながら描き進めて行った方が、気に入らなくなった時や失敗した時にやり直しがきくので作業効率がいいですよ。
だいたい絵が決まってきたら、絵に色を付けて行きます。

576b   613b   516b   499b   486b   495b   39×40 513b    39×40 501b

左から順番に描いています。
見てわかると思いますが、たてがみと配色で試行錯誤しています。ライオンは、相当悩みました。
たてがみの形が決まらず、配色もしっくり来ないし… 完成までかなり時間を要してます。 この時点でも顔などの修正をしているので、なんだかスケッチなどせず、すぐに描き始めた方がいい様な気もしますが、律儀にこの流れを 守りながら素材製作を続けています。

素材が出来上がったら、背景を適当な色で塗りつぶします。これは後で背景を透明化させるためです。 素材に使用していない色にします。同じ色にしてしまうと透明化処理した時いっしょに同じ色が透明化されてしまいますからその対策です。
ここまで終わったら、適当なフォルダに保存しておきます。私は、拡張子「.bmp」で素材作製用の作業フォルダに保存しています。

最近になって、小技を発見しました。
本来ならば、スケッチした絵をスキャナで読み込めば簡単に下絵が出来ますが、小遣いの少ない 私にはスキャナを買うお金がありません。トホホ… 
そこで考えました!携帯電話に付いているカメラです!!スケッチした絵を 携帯のカメラで「パチリ!」写した画像をPCに転送すれば、スキャナ代わりに使えます!!   

67×15 245b 







51×44 642b HP・メール素材 カツのGIFアニメ HOMEへ
KATU`S GIF ANIMATION
Copyright©2004 katu All right reserved.