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


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


    【カツ流 〜 素材の作り方 メニュー】

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

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


























































67×15 245b

















































67×15 245b
















































67×15 245b





























































67×15 245b

   ■ はじめに!

みなさん、お気に入りの素材は見つかりましたか?
なかなか見つからず、ネット上を探し回って 「これだ〜っ!」 と見つけて…   ほとんどの方がこの様にして、自分のHPに使う素材を探しているのではないでしょうか? 私も、自分のHPを作ろうと 素材探しを始めて、ネット上をウロウロ探してしていたのですが、たまたま訪れたHPに、素材の作り方が紹介してあったので、 自分で作ってみたんです。

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

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


   ■ 使っているソフト

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

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

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

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

   ■ 素材ネタ思案編

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

     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に転送すれば、スキャナ代わりに使えます!!   









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