Photoshopでブログ記事のサムネイル画像を自由に作れるようになりたく、独習を始めたので自分用にメモを残しておきます。
ビルと星空の画像を使って視差効果（パララックス）のあるGIF画像を作りました。
GIF画像を作るのは、今回が初体験なので、ワクワクして作業に入りました。ビルがズームアウトしながら星空が流れてゆく画像を作りたいと思います。
素材1
素材2
- 「素材1」（ビル）の写真の空の部分をクイック選択ツールで選択する。
- 選択した部分をdeleteで削除する。
- 素材の写真を二つとも「スマートオブジェクト」に変換しておく。
- ビルの写真を「command」＋「T」で拡大しておく。
- 空の写真も「command」＋「T」で拡大し、流れる元の方法にずらしておく。
- 上のメニュー「ウィンドウ」→「タイムライン」を押下し、タイムラインメニューを開く
- 「ビデオタイムラインを作成」を選択する。
- ビルの写真のレイヤー▽を押下し、ストップウォッチアイコンを押したら、スライダーを０秒から５秒まで動かす。
- ビルの写真を「command」＋「T」で縮小させる。
- ５秒にいるスライダーを０秒に戻す。
- 夜空の写真のレイヤー▽を押下し、ストップウォッチアイコンを押したら、スライダーを０秒から５秒まで動かす。
- 夜空の画像を右から左に流す。
- ファイル→書き出し→Web用に保存（従来）を選択する。
- 「カラー」「劣化」「画面サイズ」を調整し、ファイルサイズを縮小させる。
上のメニューの「選択範囲」から「選択を解除」を選んで選択を解除しておく。
完成！
画像サイズを大きく保って、カラーや劣化で画質を下げたバージョン
画像を劣化させたところ、思いもしない幻想的なエフェクトがかかったようなGIF画像になりましたが、これは意図したものではなく、仕方なく残像が残る感じになってしまった状態です。演出としてわざと劣化させるテクニックもありそうですね。
画像サイズを小さくして、カラーを256にしたバージョン
WebにアップされてるGIF画像って結構小さいサイズのものが多いなと思っていたのですが、画像サイズの都合上、しょうがなかったんですね。今回、初めてGIF画像を作ってみて理解できました。（もっと賢くGIF画像を圧縮する方法もあると思うのですが。。。）小さい画像なら滑らかに書き出すことができました。
画像サイズの調整について
そのままの状態で書き出すと、ファイルサイズが20M程度になり、WordPressのアップロード上限の5Mを大きくオーバーしてしまっていたので、画像サイズを変えたり、劣化させたり、色を少なくしたりしながら、なんとか５M以内にファイルサイズを抑えることが出来ました。
元ネタはこちら
「写真1枚で奥行きがあるアニメーションを作る方法」を参考に作りました。
https://helpx.adobe.com/jp/photoshop/how-to/animation-from-photo-parallax.html
youtubeで動画のマニュアルもありました。
タイムラインの使い方が今ひとつ理解できなかったのですが、動画のマニュアルをみてスッキリしました。
ただ、書き出しの方法などは書かれていないので両方のマニュアルを参考にすることをおすすめします。