カテゴリー別アーカイブ: GIFアニメーション

IllustratorとPhotoshopを使って動くスタンプを作ってみよう!

こんにちは。
今年は天候のせいもあって、あまり桜を鑑賞できず残念に思っているスタッフ「の」です。
来年に期待します。
今回はイラレとフォトショを使って動くスタンプを作成してみます。

abatteri- kumayorosiku

まず、イラレで素材を作ってコピーをとります。
ほとんど「楕円形ツール」で作れます。
00

フォトショで新規ファイルを作成します。
今回は、Webモードの中から「256×256」を選択しました。
01

「スマートオブジェクト」で貼り付けます。
02

サイズと位置を調整し、「レイヤー」パネルを使用して、背景レイヤーと結合します。
03

1文字ずつ入力してレイヤーを分けます。
04

文字の位置を調整し、準備は完了です。
05

「ウィンドウ」メニュー→「タイムライン」パネルを出します。
(CS3~CS5までは「アニメーション」パネル)
06

CS6から映像の取り込みが出来るようになったので「タイムライン」となり、映像取り込みモードとなっております。

「ビデオタイムラインを作成」→「▼」をクリックして「フレームアニメーションを作成」を選びます。
07

その後、「フレームアニメーションを作成」部分をクリックしてアニメーションを作成モードとなります。
08

1フレーム目の設定をレイヤーの表示、非表示で行います。今回1フレーム目は、背景レイヤーのみ表示にし ておきます。
09

「タイムライン」パネルの「選択したフレームを複製」をクリックし、2フレーム目を作成します。
10

「レイヤー」パネルで2フレーム目に表示させるレイヤーを表示します。
11

同様の手順で、3フレーム~5フレーム目まで作成します。
12

フレームを画面に表示させる時間(秒数)を「フレームのディレイ」でフレーム毎に指定していきます。
13

「ループオプションを選択」から「無限」を選択するとループにします。
14

全ての準備が出来たので保存します。
「ファイル」メニュー→「書き出し」→「書き出し形式…」または、「Web用に保存(従来)…」を選択し て「GIF」で保存します。
15

GIFアニメの作成は過去にも詳しい記事があります。
http://www.vanfu-vts.jp/blog/2010/10/ps005/
http://www.vanfu-vts.jp/blog/2011/07/ps006/
保存したGIFをスマホの画像フォルダーに入れて使用する事ができます。
画像の扱いですので、タップしないと動かない所が残念です。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Photoshop]GIFアニメーション その2

前回の更新から、かなーり長い時間がたってしまい、どうやって言い訳しようか迷った挙句、何もうまい言い訳が浮かんでこなかった正直者(?)のスタッフ「ほ」です。
すみません、さぼっておりました。

もう、前回のエントリーなんぞ、お忘れかと思いますが、一応、リンクしておきます。

[Photoshop]GIFアニメーション その1

まず、前回の宿題の答えから…

こんな感じになります。

それぞれのコマで必要なレイヤーの表示状態を見極めることができれば、難しくはないと思います。

さて、今回は、もうすこしGIFアニメーションを突っ込んで作るために必要な「トゥイーン」という機能をご紹介します。

まずは完成品から。

↑こんな感じのを作ります。

以前と何が違うって?

むむぅ・・・わかりづらいですかねー。
文字がふわっと出てきて、ふわっと消えるんですけど。。
こういうの「フェードイン・フェードアウト」って言いますね。

これからご紹介する「トゥイーン」という機能を使うと、これがけっこうアッサリ作れちゃったりするわけです。

 

素材は、ご自分で好きな文字で作っていただければいいと思いますが「面倒!」って人のために、↑の元素材を用意しました。

こちらからダウンロードしてください(Zip形式/16kb)

さて、それでは作り方をご紹介。

上記ファイルをダウンロードして展開したら、Photoshopで開いてください。

アニメーションパネルを見ると、こんな感じになっています。

まず、アニメーションの1コマ目は何も表示されていない状態からスタートしたいので、レイヤーパネルを開いて、文字が含まれているレイヤーをすべて非表示にします。

アニメーションパネルで2コマ目を追加します。

レイヤーパネルで「Vanfu」のレイヤーを表示にします。

ただ、これだけだと、完成したアニメがこんな感じになっちゃいます。


※見やすくするために若干ディレイを設定してあります。

文字がパッと出て、パッと消えるだけじゃフェードインとは呼べません。

ここは、複数のアニメーションパネル内に、不透明度を少しずつ変えたコマを用意する必要が出てきます。

が、その作業が、とっても大変。
もう途中でいやになってきます。

そこで、その「だんだん変化する途中経過」を自動生成させちゃいましょう!というのが「トゥイーン」という機能です。

ま、やってみましょう。

アニメーションパネルで2コマ目をクリックで選択したら、パネルメニューをクリックし、「トゥイーン」をクリックします。


※クリックで拡大します

以下のようなダイアログが表示されます。

各項目は以下の通り設定します。

「トゥイーン」…『前のフレーム』を指定します。これにより、現在選択しているフレームと、その直前のフレームとの間に中間フレームが補間されます。

「追加するフレーム」…トゥイーンによって自動的に補間されるコマの数を指定します。数が多いほどなめらかなアニメーションになりますが、その分だけファイルサイズも大きくなってしまうので注意しましょう。ここでは『5』と指定しました。

「レイヤー」…どのレイヤーを対象にして補間を行うかを指定します。『すべてのレイヤー』を指定しました。

「パラメータ」…レイヤー内の何に対して補間を行うかを指定します。通常はすべてのチェックを入れておきましょう。

「OK」をクリックしてみます。
アニメーションパネルを確認すると、自動的に5つのコマが補間されています。

再生してみると、こんな状態です。

※見やすくするために最後のフレームだけディレイを設定しました。

フェードインしてますねーー!

ほんじゃ、続きいってみましょう。

アニメーションパネルで最後のコマを選択してコマを追加します。

追加された最後のコマを選択して、レイヤーパネルから「Training」レイヤーを表示にし、先程と同じ手順でトゥイーンを実行します。

ここまででこんな感じになるはずです。

※最後のフレームだけディレイをかけています

さぁ、では最後の「School」レイヤーも同じ手順でやってみましょう。

こんな感じになるはずです。

※最後のフレームだけディレイをかけています

そして、このすべての文字がふわっと消えるようにフェードアウトのためのトゥイーンを行います。

アニメーションパネルでコマを1つ追加し、レイヤーは背景色以外は非表示にしておきます。

この状態でトゥイーンを実行します。

このような結果になります。

※最後のフレームだけディレイをかけています

このままでもよさそうですが、ちょっと速く感じるので、ところどころでディレイを設定しました。

Vanfuが出切ったタイミングで0.5秒
Trainingが出切ったタイミングで0.5秒
Schoolが出切ったタイミングで1秒

のディレイを設定した結果がこちらです。

まぁ、このあたりはお好みですので、いろいろ試してみてください。

ちなみにトゥイーンは、不透明度だけでなく、オブジェクトの位置に対してもかけられますので、同じ素材で↓のようなバナーも作れます。

ぜひチャレンジしてみてください。

「えー!?うまくできないよー」「作り方がよくわからない…」という方は、バンフートレーニングスクールのPhotoshop講座にてお待ちしております。


バンフートレーニングスクールでは、フォトショップ講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

フォトショップ講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Photoshop]GIFアニメーション その1

みなさん、こんにちは
缶コーヒーについているおまけに目が無いスタッフ「ほ」です。

今回のテーマは「GIFアニメーション」です。

Webサイト上で動いているアニメーションバナーってありますよね?

主にWeb上で扱われるアニメーションには、2つの形式があります。
1つがFlashというアプリケーションソフトを使って制作をするSWFファイル。
そしてもう1つが今回ご紹介するGIFファイルです。

GIFファイルは、パラパラマンガの要領で手軽にアニメーションを作ることができます。
1枚のファイルでありながら、複数枚の画像を内包しているので、ファイルサイズが重くなります。
そのため、大きな画像には適しません(大きなアニメーションを作る場合はSWFファイルの方が向いています)

今回から複数回にわたり、GIFアニメーションの作成をご紹介します。

「まずはPhotoshopの基本操作を覚えたいんだけど…」という方は、バンフートレーニングスクールのPhotoshop講座でお待ちしております!

まずは、最も簡単な2コマアニメの作り方から作ってみましょう。

完成はこんな感じです。

この2枚の画像から出来ているアニメーションですね。

まずは、データをダウンロードしてください。
素材をダウンロード(Zip形式)

素材を解凍してファイルを開くと、レイヤーが4枚ある画像が開きます。

Photoshopでアニメーション作成を行う場合は、アニメーションパネルを使います。
「ウインドウ」メニューから「アニメーション」をクリックして呼び出しましょう。

アニメーションパネルでは、アニメの元になるコマを作っていきます。
パネルを開くと、そこにはすでにアニメーションの1コマ目が作られています。

1コマではアニメーションができませんので、2コマ目を作成します。(Photoshopでは、このコマのことを「フレーム」と呼びます)
アニメーションパネル下部にある「選択したフレームを複製」アイコンをクリックします。

アニメーションの2フレーム目が出来上がりました。

ただ、これだと1フレーム目と2フレーム目に変化がないので、アニメーションにはなりませんね。
そこで、アニメーションパネルから2フレーム目を選択し、レイヤーパネルから、電球以外のレイヤーを非表示にしてみます。

結果、アニメーションパネルは、こんな感じになります。

さぁ、これでアニメーションの準備が整いました。
再生テストをしてみましょう。
パネル下部にある「アニメーションを再生」アイコンをクリックします。

でも、この状態では、再生速度が速すぎて、ちょっと目が痛くなりそうな画像になってしまいます。

再生速度の調整をするには、各フレームの「ディレイ」を調整します。
「ディレイ(Delay)」は日本語で「遅延」を表す言葉で、、「そのフレームで何秒間再生に遅れを生じさせるか?」を示します。

まぁ、やってみましょう。
各フレームに書いてある秒数のところをクリックして、0.5秒を選択してみてください。

もう一度再生テストをしてみると・・・

どうでしょう?
先ほどよりもずっと緩やかなアニメーションになったのがわかると思います。
各フレームで再生時に0.5秒ずつ遅れを生じさせています。

アニメーションは、何も2フレームだけである必要はありません。
フレームを増やすことで、より複雑なアニメーションになっていきます。

上記のようなフレームにすることで、このようなアニメーションになります。

アニメーションを保存する際には、「Webおよびデバイス用に保存」を使用します。
「ファイル」メニューから「Webおよびデバイス用に保存」ダイアログを呼び出します。

ファイル形式は、必ずGIF形式で保存してください。JPEGやPNGではアニメーションになりません。

保存する前にブラウザでの挙動を確認したい場合は、ダイアログ下部にある「デフォルトブラウザでプレビュー」アイコンをクリックします。

※ブラウザには、最高再生速度の制限があるので、速度の速いアニメーションをPhotoshopで作成してもブラウザで見てみるとゆっくりになることがあります。

━━━━━━━━━━━━━━━━━━━━━━━━━

さて、今回のGIFアニメーション1回目、どうでしたか?
基本はおわかりいただけたでしょうか。

今回は、珍しく宿題を出したいと思います。

今回のアニメーションパネルを使って、以下のようなアニメーションを作ってみてください。

答えは次回のエントリーで発表します。

グラフィックソフトは手を動かして覚えましょう!


バンフートレーニングスクールでは、フォトショップ講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

フォトショップ講座の詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ