• GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie
  • GIZMODO
  • DIGIDAY
  • gene
  • cafeglobe
  • MYLOHAS
  • Glitty
  • machi-ya
  • roomie

itouitou  - ,,,,,,  10:30 PM

Photoshopを使った独特なテイストのアニメーション「シネマグラフ」を作ってみよう

Photoshopを使った独特なテイストのアニメーション「シネマグラフ」を作ってみよう


シネマグラフを知っていますか? 写真の一部だけを動かして、そこに注目を集める手法です。不思議で効果的なアニメーションが作れますよ。


コーヒーを混ぜる


シネマグラフはJamie Beck氏とKevin Burg氏がブログ「From Me to You」の中で初めて紹介した手法です。こちらで他の作品もチェックしてみてください。


鼻をほじる


早速、米Lifehackerでもサンプルを作ってみました。鼻をグリグリほじるちょっとふざけたアニメーションがご覧いただけたはずです。今回は、このシネマグラフをどうやって作ったかを紹介します。あなたも自分の作品を作ってみてください。動画で見るのが一番わかりやすいので、まずは冒頭の動画をチェックしてください。以下に、詳しい手順を書いておきます。


ステップ 1:アイデアを考え、短い動画を撮る


アイデアを考え、短い動画を撮る


まず、動画クリップを作成します。何か特徴的な動きが入っているといいでしょう。例えば、前出のコーヒーをスプーンでかき混ぜたり、鼻をほじったりする動画です。注意点は、動きのある部分と動きのない背景部分の両方をフレームに収めなくてはいけないことです。

アイデアが固まったら短い動画を撮影します。なるべくシンプルにしてください。尺が長くなるほど編集作業が大変です。初めは20〜30フレームくらいの動画が適当でしょう。

動画を撮影したら、PCに取りこみます。


ステップ 2:Photoshopでフレームを作成する


Photoshopでフレームを作成する


Photoshopに動画クリップをドラッグすれば取りこみ完了です。最初のフレームが静止画のように表示されるはず。もし、Photoshopで扱えない形式の動画は、MP4に変換してから取りこんでみましょう。

続いて、フレームをレイヤーにコピーしていきます。ウィンドウメニューからアニメーションパネルを開きます。使いたい最初のフレームまでスクロールして、すべてを選択(Command/Control+A)、コピーします。新しいファイルを作成し、レイヤーにコピーしたフレームを貼り付けます。これを各フレームで繰り返してください(1レイヤーに1フレームを割り当てる)。作業が完了したら、動画クリップは閉じておきましょう。


ステップ 3:動きのある部分を抜き出す


動きのある部分を抜き出す


このステップに一番時間がかかります。すべてのフレームから、動かしたくない背景部分を削除する作業です。多角形選択ツールでフレームの中の動きのある部分を囲んで、選択範囲を反転(Command/Control+Shift+I)、「境界線を調整」パネルを開き(Command/Control+Option/Alt+R)、境界線を少しぼかします。これで輪郭がソフトになります。調整が終わったら、Deleteキーを押して、フレームから背景部分をカットします。この手順をすべてのフレームで繰り返します。ただし、一番下のフレームは背景も残しておきましょう。


ステップ4:アニメーションの作成


アニメーションの作成


ここまで来ればあとは簡単です。アニメーションパネルに戻り、右下のフレームモードボタンを押してください。すると、フレームが1つだけ表示されるはずです。表示されているのが、一番目のフレームであることを確認してください。つまり、レイヤーパネルで一番目のレイヤーだけが「表示」になっていて、ほかのレイヤーは「非表示」になっていればOKです。

次に、アニメーションパネルの「選択したフレームを複製」ボタンをクリックします。フレームが1枚複製されたはず。2枚目のフレームを選択して、レイヤーパネルで2番目のレイヤーを「表示」にします。この作業を繰り返して、フレーム1つにレイヤー1つを割り当てていきます。

アニメーションパネルで「選択したフレームを複製」ボタンをクリック、レイヤーパネルで次のレイヤーを「表示」、を繰り返すわけです。

続いて、フレームのディレイを設定します。スムーズに再生するために「ディレイなし」に設定します。フレームをすべて選択してから、どれか1つのフレームのディレイを変更すれば、フレームすべてに適用されます。


ステップ 5:Web用に保存


Web用に保存


最後に画像を保存します。ファイルメニューから「webおよびデバイス用に保存」を選択。プリセットで「GIF 128 ディザ」を選び、画面の右下にあるアニメーションボックスにチェックを入れて保存します。これでシネマグラフの完成です!


Adam Dachis(原文/訳:伊藤貴之)

  • ,, - By ライフハッカー編集部LIKE

    なぜスマホのバッテリーは1日ともたないのか?

    Sponsored

    なぜスマホのバッテリーは1日ともたないのか?

    なぜスマホのバッテリーは1日ともたないのか?

    お財布は忘れてもスマートフォンだけは忘れない。そんな気持ちになるほどスマホは肌身離さず持ち歩くアイテム、かつ、もっとも手近なコンピューターです。メールの確認はもちろん、ウェブで調べもの、SNSのチェックや投稿と、ひんぱんに使うことから、1日のどこかでバッテリーを充電しているのではないでしょうか? 常に手元にあって、いつでもどこでもすぐ使えることがスマホの魅力ですから、最低でも1日はバッテリーが持  11:00 AM

MORE FROM LIFEHACKER

powered by

Kotaku

Recommended

© mediagene Inc.