アニメーションGIFをご存じですか。
ホームページなどでたまに見る、こんな感じでパラパラ変わる画像の技術です。GIFアニメーションやアニメGIFとも呼ばれていますね。
さて、このようなアニメーションGIFをいつも使っているPhotoshopで作ることはできるのでしょうか?
もちろんできます(*^_^*)P
今回は上記のアニメーションGIFを作成した手順を解説します。
あ、ちなみにこの画像は電子ブック「笑顔だらけの子犬写真集 スマイルドッグ」(撮影:内山晟)の宣伝です。興味があったら、ぜひポチッってくださいね。iPhone、iPad、Android端末、Kindle Fireなどで楽しむことができます。
準備するものは、元になる各パラパラ画像です。
今回の例で言えば、ワンちゃん達の笑顔画像が13枚と、表紙と最後のロゴの画像で併せて15枚の画像を同じサイズ(450×338)で用意しました。
これを順番に表示するアニメーションを作ったわけです。
今回のPhotoshopのバージョンは「Photoshop CC」で解説します。
1.各レイヤーに画像を貼り付ける
Photoshopで15枚の画像ファイルをすべて開いて、ひとつのファイルにコピー＆ペーストします。
コピー＆ペーストすると各画像がそれぞれのレイヤーに貼り付けられ、レイヤーウィンドウ(画面右の方)では次のように表示されます。
表示する順番を変更したければレイヤーをドラッグ＆ドロップして順序を入れ替えます。下が最初の画像、上が最後の画像です。
2.「タイムライン」の操作
メニューバーから「ウィンドウ」-「タイムライン」を選択します。
標準では画面下にタイムラインのウィンドウが表示します。画像の「▼」をクリックして「フレームアニメーションを作成」を選択します。
「フレームアニメーションを作成」をクリックします。
3.「レイアーからフレームを作成」
タイムラインの設定ボタンをクリックして、ポップアップメニューから「レイアーからフレームを作成」を選択します。
レイヤーの各画像がタイムラインに横一列に並びました。賢明な読者の皆さんはだいたい理解できたと思いますが、切り替わる画像の流れができました。
各画像の下に秒数があります。これが表示する秒数で、変更することでサンプルのように各画像の切り替え(表示)時間を変更することができます。
サンプルでは最初と最後の方がゆっくり、中間は素早く画像チェンジするように作りました。
秒数はリストから選ぶが、「その他」を選択して数値で指定することもできます。
「Shift」キーを押しながらクリックして、一度に複数の画像を選択して秒数を指定することもできます。
秒数の指定ができたら「再生」ボタンをクリックして試しにアニメーションさせて確認してみましょう。
4.アニメーションGIFで保存する
アニメーションが無事に確認できたら、アニメーションGIFにて書き出しを行います。メニューバーから「ファイル」-「Web用に保存」をクリックします。
画面右上で「GIF」を選択します。
画面右下でループオプションを選択します。
アニメが一回流れて最終画像で止めたい場合は「一度」、最後まで再生したら最初に戻って繰り返しアニメを動かし続けたい場合は「無限」を選択して「保存」します。
> Photoshopでテキスト文字に縁取り枠を付ける方法
著者: 洋治 神崎
|
