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


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


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

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

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



   ■ おまけ!

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

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枚目に戻る時に動きが不自然になってしまいます。
2枚目の素材を複製したのは、この不都合を解消するためです。複製は、複製したい素材の上で「右クリック」出てきたメニューから「複製」を選択で、できます。後は、ドラッグアンドドロップで順番を4枚目に変えればOKです。

   257×82 3.72kb

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

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

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


   ■ あとがき

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

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

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


67×15 245b 

こちらのページも参考にしてくださいね!
 カツ流〜 素材の貼り付け方!@
 カツ流〜 素材の貼り付け方!A





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