Photoshop でこれらのチュートリアルをお試しください
写真を編集して新しい画像やグラフィックを作成
写真1枚で奥行きがあるアニメーションを作る方法
パララックスとは、視差効果のこと。ビジュアルデザインにおいては、複数のレイヤー画像に対して異なる動きとスピードを加えることで視差を生み出し、立体感や奥行き感を演出するアニメーション手法を指します。ここでは、Photoshopを使って1枚の写真からパララックス効果を作り出す方法を解説します。まずは、下の1分動画で制作工程を確認しましょう。
必要なもの
アプリ内で使ってみる
必要な情報
サンプルファイルをダウンロード
本チュートリアル内で使用する主な機能
クイック選択ツール、なげなわツール、コンテンツに応じた塗りつぶし、変形、スマートオブジェクト、タイムラインパネル、Web用に保存
手順
ファイルを開き、レイヤーを複製する
Photoshopを起動し、「ファイル」→「開く」から練習用サンプルファイル「parallax_effect_skycar.psd」を選択して「開く」をクリックします。ファイルが開いたら、「ウィンドウ」→「レイヤー」から「レイヤーパネル」を表示します。
「レイヤーパネル」で「レイヤー0」を選択し、ダブルクリックします。レイヤー名を「Sky」と入力します。この「Sky」レイヤーを選択している状態で、マウスを右クリック（Windows）またはControlキーを押しながらクリック（Mac）し、表示されるメニューから「レイヤーを複製」を選択します。ダイアログが表示されるので、レイヤー名を「Buildings」と入力して「OK」をクリックします。レイヤーパネルに新しいレイヤーが追加されます。
「クイック選択ツール」で空を選択して削除する
レイヤーパネルで「Sky」レイヤーの左横にある目のアイコンをクリックし、レイヤーを非表示にします。
次に「Buildings」レイヤーを選択して、ツールパネルから「クイック選択ツール」を選択します。画面上部のオプションバーから「ブラシオプション」を開き、設定を「直径：10px、硬さ：100%、間隔：1%」にします。
空のエリアをドラッグしながら選択範囲を広げていきます。空のエリアがすべて選択されたら、「Delete」キーを押して削除します。選択範囲を解除するには、「選択範囲」→「選択を解除」をクリックします。
ヒント ：選択している途中で作業をやり直したい場合は、「Control」 + 「D」キー（Windows）または「Command」+ 「D」キー（Mac）を押して選択を解除し、再度選択を開始してください。
「コンテンツに応じた塗りつぶし」で空だけのレイヤーを作成する
レイヤーパネルで「Sky」レイヤーの左横にある四角をクリックし、レイヤーを表示します。続いて「Buildings」レイヤーの目のアイコンをクリックして、レイヤーを非表示にします。画面には元の画像が表示されています。
「Sky」レイヤーを選択した状態で、ツールパネルから「なげなわツール」を選択し、ビルを大まかに囲みます。多少、空のエリアが選択されてもかまいません。
次に「編集」→「塗りつぶし」を選択すると、「塗りつぶし」ダイヤログが表示されるので、「内容」のドロップダウンメニューから「コンテンツに応じる」を選択し、オプションの「カラー適用」にチェックを入れて「OK」を押します。
画像全体が空で覆われました。
レイヤーをスマートオブジェクトに変換して変形する
レイヤーパネルの「Sky」レイヤーを選択した状態で、マウスを右クリック（Windows）またはControlキーを押しながらクリック（Mac）し、メニューから「スマートオブジェクトに変換」をクリックします。続けて「Buildings」レイヤーの目のアイコンをクリックし、レイヤーを表示して同様にスマートオブジェクトに変換します。
ヒント ：レイヤーを「スマートオブジェクト」に変換すると、元の画像は別の場所に保存されるため、作業画面上で画像を拡大・縮小しても画質が劣化することはなく、いつでも元の画像に戻ることができます。スマートオブジェクトについて詳しくはこちら をご覧ください。
次に「Buildings」レイヤーを選択した状態で、「編集」→「変形」→「拡大・縮小」をクリックします。画像の周囲にバウンディングボックスが表示されるので、「Alt」+「Shift」キー（Windows）または「Option」+「Shift」キー（Mac）を押しながらハンドルを外側にドラッグし、ビルの画像を一回り大きく拡大します。「Enter」キーを押して変形を確定します。
キーフレームによるアニメーション
ここからは、アニメーションを作成していきます。作業に入る前に、キーフレームによるアニメーションのしくみについて説明します。アニメーションは、静止画像が連続して何枚もつながった状態でできており、その1枚1枚をフレームと言います。キーフレームは、アニメーションの起点と終点になるもので、特定のフレームに対して大きさや位置、不透明度などを指定します。例えばA地点のフレームにキーフレームを設定し、画像を拡大します。B地点のフレームには別のキーフレームを設定し、画像を縮小します。すると、A地点からB地点までのフレーム間で、画像の大きさが徐々に変化するアニメーションが自動的に生成されます。
ビルが縮小表示されるアニメーションを作成する
ここからは、「タイムライン」パネルを使用してそれぞれのレイヤーにアニメーションを設定していきます。まずは、ビルが徐々に縮小表示されていくアニメーションを作成してみます。
「ウィンドウ」→「タイムライン」をクリックし、「タイムライン」パネルを表示します。次に、「タイムライン」パネルの中央に表示されている「ビデオタイムラインを作成」をクリックします。タイムラインに「Sky」と「Buildings」の2つのレイヤー（ビデオレイヤー）が表示されます。
「Buildings」の左横の「>」をクリックします。「変形」「不透明度」「スタイル」の3つの項目が表示されます。この項目を設定することで、静止画像にアニメーションをつけることができます。まず、現在の時間が「0:00:00:00」になっていることを確認し、「変形」の左横のストップウォッチのアイコンをクリックします。タイムラインに黄色い菱形が表示され、これがキーフレームとなります。
「時間インジケーター」を右方向にドラッグして「［05:00f］まで移動させます。この位置で「変形」の左横の菱形をクリックし、キーフレームを追加します。
続いて、「Buildings」レイヤーを選択した状態で、「編集」→「変形」→「拡大・縮小」をクリックします。「Alt」+「Shift」キー（Windows）または「Option」+「Shift」キー（Mac）を押しながら、バウンディングボックスのハンドルを内側にドラッグし、ビルの画像を元の大きさまで戻します。「Enter」キーを押して変形を確定します。
空が流れるアニメーションを作成をする
今度は、空が下から上へ流れていくアニメーションを作成してみましょう。
タイムラインパネルの「Sky」の左横の「>」をクリックします。「時間インジケータ」を「00」まで戻し、「変形」の左横のストップウォッチをクリックして、キーフレームを設定します。次に「時間インジケータ」を［00］から［05:00f］までドラッグして移動させます。この位置で「変形」の左横の菱形をクリックし、キーフレームを追加します。
続いて、「Sky」レイヤーを選択した状態で、「移動」ツールを使って画像を上にドラッグして移動させます。
再生ボタンを押して確認してみましょう。ビルが縮小表示され、空が下から上へ流れていくアニメーションが完成しました。
アニメーションGIFに書き出す
完成したアニメーションをWebで表示させるために書き出してみましょう。「ファイル」→「書き出し」→「Web用に保存（従来）」をクリックします。「Web用に保存」ウインドウが表示されたら、ファイル形式を「GIF」に設定し、サイズや画質、アニメーションのループ回数などを指定して、「保存」をクリックします。
Photoshopで作成したアニメーションが、GIFファイルとして書き出されました。完成した作品を見てみましょう。
いかがでしたか。Photoshopと1枚の写真だけで、パララックス効果のアニメーションを作成することができました。
アニメーションGIFは、今や多くのSNSやブログサイトで見かけます。あなたもぜひ、アイデアを活かした楽しい作品を投稿してみましょう。
