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


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

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


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

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

























































67×15 245b

















































67×15 245b
















































67×15 245b





























































67×15 245b

   ■ おまけ!

ここでは、私がよく使うペイントブラシのツールを紹介します。


19×15 104b  選択ツール
選択ツールは、かなりの頻度で使います。マウスでドラッグしながら範囲を指定して、各パーツを動かして微調整したり、選択された点線の各辺の中央 にある「ポッチ」をマウスでつまんで動かすと、選択内の変形ができます。 動かし過ぎると、ヘンテコな形になってしまうので 注意してください。 コピーと貼り付けも、選択ツールでできます。 範囲指定した後キー操作で、Ctrl+「C」でコピー、Ctrl+「V」で貼り付けされます。 同じパーツを作る時とか、ほかの素材と色合わせしたい時などは、色合わせしたい素材を別にペイントブラシで開いて、 その色の一部をコピーして持って来る事もできます。

18×16 155b 塗りつぶしツール    18×17 139b 色の選択(スポイト)ツール
塗りつぶしツールは、みなさんもう解りますますよね。線で囲まれた内側を塗りつぶしたり、その外側を塗りつぶしたり、広い 範囲を塗る時に使います。
スポイトツールも使用頻度は高いです、使いたい色の上でポチッとやれば、その色が選択されます。 先ほどの選択ツールで説明した 色合わせの時にも活躍します。

18×16 104b テキストツール    17×15 127b 楕円ツール
テキストツールは、作成した素材に文字を加える時に使ってます。 バナーなど作る時や、私の素材で言えばフライトスコアや サイン(とり、カラス)を作成する時に使用しました。
楕円ツールも、使用頻度が高いです。キャラの目や、輪郭などを描く時に使用してます。Shiftキーを押しながら描くと、まんマル が描けます。

以上、私がよく使うペイントブラシのツールです。 もっとツールはあるのですが、私は上で紹介したツールだけで仕上げてしまいます。 ほかのツールを使えば作業効率が上がるとは思うのですが、なぜか使う事はありません。みなさんが挑戦する時は、色々使ってみてくださいね。

「おっと!」書き忘れるところでした! 編集メニューの「元に戻す」もよく使います。 3回前まで戻ってくれますので、気に入らなく なったら、ポチッ!で元どおりです! Ctrl+「Z」のキー操作でもOKです! せっかく描いた素材を間違えて消してしまって、「ギャ〜ッ!!!」の時も、Ctrl+「Z」で「フゥ〜…」です。


   ■ Adobe Photoshop Elements編

みなさんご存知の、「Adobe Photoshop Elements」。 パソコンに付属されていた方も多いのでは? ソフトの紹介で書いた通り、必ず使うわけではありませんが、色違いの素材を製作する時に大活躍します。

素材屋を始めた当初は、時間を掛けてコツコツ塗り替えていたのですが、これを使えばバンバン!色違いが作れます。 ここでは、その方法を紹介します。 ちなみに、ライオンでは使用しませんでした。
Photoshop Elementsを起動したら、保存しておいた素材を呼び出します。次に、「画質調整」→「カラー」→「色相・彩度」の順にクリック。   

   297×119 6.67kb


そうすると、色相・彩度の調整画面が出てきます。一番上にある色相のスライドバーを左右に動かすと、表示されている画像の色が 次々に変わっていきます。 適当な色で「OK」して保存。 この繰り返しで、大量生産デス! ここでの保存も、私は「bmp」で保存します。

   219×138 3.11kb

   39×40 448b    39×40 448b    39×40 448b    39×40 448b    39×40 448b    39×40 448b    39×40 448b

以上、色違いの作り方です。 このソフトは、画像処理が色々できますので、まだまだ使える機能は数多あると思います。 使ってみた時に、いたずらしながら試してみてください。 タイトルロゴ、トップページに使っているライン、壁紙、などはこのソフトで作りました。サイズ変更するのにも使います。 GIFアニメだって作れます。


   ■ GIFアニメ作成編

さあいよいよGIFアニメ素材(動く素材)を作ります。
小学生の頃、教科書のすみに絵を描いて、パラパラめくって動かした憶えはありませんか? GIFアニメは、あの原理と同じです。 私は教科書のほとんどすべてのページにパラパラ漫画を描いていました。授業中の内職デス!

どうやって動かそうか決めたら、連続した動きの画像を作ります。 ライオンは、のんびり寝ている状態で「んっ?」と片目を開けるのですが、興味がないらしく、また寝てしまう、という動作ですので、 両目を閉じている物、片目を少し開けた物、片目をもう少し開けた物、計3枚を用意します。

   39×40 380b    39×40 386b    39×40 393b
   @       A       B

この三枚を順番に表示させると、片目が動いて見えるのです。
準備が出来たら、ウェブ アニメータを起動します。 スタートアップの中の「アニメーション ウイザード」→ 「複数の画像ファイルを使用してアニメーションを作成」→「画像の追加」で先ほどの3枚を選択 → 中央に配置します、を確認して → 繰り返しの回数を、「無限」に選択、あとはそのまま → 「プレビュー」で確認して、「完了」。

   273×78 2.90kb

実際はもっと大きい画面ですが、ここで色々調整していきます。 気がつきましたか? 3枚選択したはずなのに、4枚表示されてます。 これは2枚目の画像を複製して、3枚目の後に付け足したのです。4枚目の画像です。 上にある再生ボタンを押すと、プレビュー画面で動きの確認が出来ます。左から順番に画像が表示され、右はじに来ると元にもどる。 これを繰り返すのです。 動きがおかしい時は、ドラッグアンドドロップで順番を変えて調整します。

3枚で再生すると、3枚目から1枚目に戻る時に動きが不自然になります。画像を複製したのは、この不都合を解消するためなのです。 複製は、複製したい画像の上で「右クリック」出てきたメニューから「複製」を選択で、できます。  後は、ドラッグアンドドロップで順番を変えてOK。

   257×82 3.72kb

ここまで来たら、あと一息です。 最後に、各画像の表示時間の調整と、背景の透明化をします。
適当な画像の上で、「右クリック」→出てきたメニューの一番上「フレームのプロパティー」を選択すると、上の画面が出てきます。

まず、各画像の表示時間の調整です。 再生しながら増やしたり、減らしたり、1枚づつ時間を指定して、思っている動きにしていきます。 動きが決まったら、背景の透明化です。 右側の上にある、「透明化する」をチェックすると、カラーパレットが選択できる様になります。 カラーボタンをクリックすると、画像で使用されているカラーパレットが現れます。背景に塗った色と同じ色をクリックすると、 その色が、透明化されます。 先にも書きましたが背景に使う色は、必ず素材に使用した色以外にしてください。 同じ色だと一緒に透明化されてしまいますよ。、目が透明になったライオンが出来たりして「ホラー」な素材になります…。 最後に保存です。保存する前にツールバーの18×18 181bを使うと、ファイルサイズを小さくする事が出来ますので、この作業をしてから 保存して、完成です。

   39×40 600b  出来上がり〜 (^o^)/~


   ■ あとがき

いかがでしたか、うまく説明できてたでしょうか? 
こんな風に、私は日夜素材作りをしています。 まだまだ未熟な素材屋ですので、ソフトなどは使いきれてません。 あくまで、私流の作り方なので、参考にする程度にしておいてください。 減色したり、ファイルサイズを小さくしたり、といった作業など もっと詳しく、解りやすく説明している素材屋さんもありますから、色々な所を見て回り、自分流を見つけるのもいいですね。

長々とお付き合い、ありがとうございました!

※ 2016年8月現在、の最新OSは「ウインドウズ10」になりました。このページで紹介している時点のOSは「ウインドウズXP」です。このページの情報は古いものになってしまっています。

こちらのページも参考にしてくださいね!

 カツ流〜 素材の貼り付け方!@
 カツ流〜 素材の貼り付け方!A





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