スポンサーサイト

記事タイトル枠
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
ページトップへ戻る

[Photoshop CS6]PhotoshopでGIFアニメを作る

記事タイトル枠

こんにちは!初心者のためのWEBデザイン教室、第24回目の授業です。

動画を作るといえばFlashですが、実はPhotoshopでも動画を扱うことができます。
もちろんFlashほど精巧なものはできませんが、シンプルなものなら簡単に作ることができます。

今日はPhotoshopだけを使って、GIFアニメを作ってみましょう。

【Photoshop CS6】PhotoshopでGIFアニメを作る

パラパラ漫画がイメージできれば、とっても簡単ですよ!

INDEX

  1. 完成サイズの新規ファイルを用意する
  2. アニメーションに必要な絵(パーツ)をレイヤーに分けて用意する
  3. タイムラインパネルでフレームを作成する
  4. 各フレームの表示時間を設定する
  5. Web用に保存する

1.完成サイズの新規ファイルを用意する

解像度は72ppiで設定します。

2.アニメーションに必要な絵(パーツ)をレイヤーに分けて用意する

アニメーションの途中から出現するオブジェクトや、拡大・縮小・回転など変形するオブジェクトの変形後のものなども、初めに用意しておく方がいいと思います。
フレーム操作を始めてからレイヤーを追加すると、それまでのフレームに影響が出て修正の手間が生じます。

【Photoshop CS6】PhotoshopでGIFアニメを作る

最初にアニメーションに表示しないものは、レイヤーで非表示にしておきます。

3.タイムラインパネルでフレームを作成する

パーツが用意できたら、ウィンドウ下部の「タイムライン」パネルのタブをクリックして開きます。
そして、プルダウンから「フレームアニメーションを作成」を選択し、ボタンをクリックします。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【Photoshop CS6】PhotoshopでGIFアニメを作る

タイムラインパネルにフレームが1つ表示され、現在表示されているレイヤーのサムネイルが出ています。
このフレームが、パラパラ漫画でいう紙1枚分ですね。

タイムラインパネル下の「選択したフレームを複製」アイコンをクリックします。
そうすると同じ内容のフレームが複製されます。

【Photoshop CS6】PhotoshopでGIFアニメを作る

複製したフレームを選択して、内容を編集します。

◆[パターン1]コンテンツを移動させる

タイムラインパネルで2フレーム目が選択されているのを確認し、移動ツールでオブジェクトを移動します。

【Photoshop CS6】PhotoshopでGIFアニメを作る

その後、「選択したフレームを複製」アイコンをクリックし、3フレーム目でさらに移動させます。

この繰り返しです。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【できあがり】
【Photoshop CS6】PhotoshopでGIFアニメを作る

◆[パターン2]レイヤーの不透明度を変更する

ここでは、レイヤーの移動に加えて2フレーム目から徐々に不透明度を下げています。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【できあがり】
【Photoshop CS6】PhotoshopでGIFアニメを作る

◆[パターン3]レイヤーの描画モードを変更する

【Photoshop CS6】PhotoshopでGIFアニメを作る

【できあがり】
【Photoshop CS6】PhotoshopでGIFアニメを作る

◆[パターン4]レイヤースタイルを追加する

ドロップシャドウを追加してみました。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【できあがり】
【Photoshop CS6】PhotoshopでGIFアニメを作る

◆[パターン5]レイヤーの表示・非表示を切り替える

少し凝ったものをと思うと、この方法が主になると思います。

全てのパーツを始めに用意しておいて、フレームごとに表示・非表示を切り替えます。
後からレイヤーを追加することもできますが、そうすると既に編集の終わったフレームにも表示されますので、修正が必要です。

この例では、2フレーム目と9フレーム目にのみセリフを表示しています。
その間のフレームは、ボールレイヤーを移動させています。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【Photoshop CS6】PhotoshopでGIFアニメを作る

【Photoshop CS6】PhotoshopでGIFアニメを作る

【できあがり】
【Photoshop CS6】PhotoshopでGIFアニメを作る

動くものが多くてレイヤーも多量になるのであれば、レイヤーのグループ化をすると分かりやすいです。
(グループにしたいレイヤーを複数選択しておいて、「Ctrl+G」でグループになります。)

下の例は、1フレームに使用するレイヤーごとにグループにして、グループごと表示・非表示を切り替えています。

【Photoshop CS6】PhotoshopでGIFアニメを作る

【Photoshop CS6】PhotoshopでGIFアニメを作る

絵が下手なのは許して。。

4.各フレームの表示時間を設定する

タイムライン下の「アニメーションを再生」アイコンをクリックすると、再生します。

具合を見ながら、「フレームのディレイを設定」から、各フレームの再生時間を設定します。

さらにパネル左下の「ループオプションを設定」から、アニメーションの繰り返し回数を選べます。

【Photoshop CS6】PhotoshopでGIFアニメを作る

5.Web用に保存する

保存はいつも通り、ファイルメニュー「Web用に保存」から、ダイアログで「GIF」を選択します。

【Photoshop CS6】PhotoshopでGIFアニメを作る

これで完成!!

FlashのサポートされていないiPhoneやiPadでも、これなら表示されますね!
工夫次第で、いろんな楽しいものが作れそうです。

【参考】フレームアニメーションを作成する方法 (Photoshop CC)

それでは、お疲れ様でした!

関連記事
このエントリーをはてなブックマークに追加

テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

ページトップへ戻る

コメントの投稿

非公開コメント

承認待ちコメント

このコメントは管理者の承認待ちです
ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。