PhotoshopマスターTOPページへ

初心者の為のPhotoshopの解説サイトです。画像の切り抜きや合成の方法などを 写真付きでわかりやすく解説しています。
これからPhotoshopを勉強したい、復習したいと思っている方に役立つサイトです。
TOP >gifアニメの作り方

gifアニメの作り方

gifアニメ―ションの作り方の解説です。 このページではgifアニメの機能を使用してパズルの写真が 完成するまでのgifアニメを作成します。

まずはパズルの素材を用意します。1ピースのみの画像を複数用意するか 2番目のように複数ピース繋がったものを1つ用意するかどちらでも構いません。 パズルの素材はフリー素材のサイトでダウンロードするか
変形させたパスでパズルのピースを作成する のページを参照してAdobe Illustratorで作成するといった方法も可能です。
下のパズルのイラストは上記サイトの方法で作っています。

パズル パズル2

このパズルを自動選択ツールで1ピースだけ選択しメニューバーの「編集」→「コピー」をします。 そしてメニューバーの「ファイル」→「開く」でパスタの写真を開き 背景のコピーレイヤーにペーストして図のようにピースの形でクリッピングマスクを作成します。
クリッピングマスクについては クリッピングマスクで切り抜く のページを参照して下さい。

ピースは図のようにレイヤースタイルでベベルとエンボス、境界線を適用しています。

レイヤースタイルでベベルとエンボスを設定

レイヤースタイルで境界線を適用

ピースができる

この要領でパズルのピースを24個作成しレイヤー1以外は非表示にしておきます。 メニューバーの「ウィンドウ」→「タイムライン」の順にクリックします。

タイムライン

「ビデオタイムラインを作成」という画面が出てくるので右の逆三角マークを クリックし「フレームアニメーションを作成」を選択してボタンを 押します。

フレームアニメーションを作成

アニメーションの最初のひとコマがサムネイルで表示されます。 これは図のレイヤー1の白い背景にパズルのピースが1個だけ 埋めている状態です。

最初のひとコマがサムネイルで表示される

図の四角の部分の「選択したフレーム(最初のフレーム)の複製」を クリックすると2つ目のフレームが作成されます。次にレイヤーパレッドでレイヤー2を 選択し予め非表示にしてあったレイヤー2を目玉アイコンをクリックして表示すると タイムラインにも反映されます。

2つ目のフレームも作成

同じ手順で24のフレームを作成しフレーム下の「0秒」をクリックし 一覧から1.0秒を選択します。

最後のフレームを選択しキーボードの「Shiftキー」を押しながら最初のフレームを クリックするとまとめて時間設定を変更することができます。

タイムラインに24個のサムネイルが表示 されているのでレイヤーパレッドでは24枚のレイヤーがある状態です。
図の青矢印の先のバーを動かすと前に作成したフレームに戻ることが でき24枚のうち飛ばしてしまったレイヤーが無いかなどチェックできます。

各フレームを1秒にする

タイムラインパネル下の「アニメーションを再生」ボタンを押します。 図は24枚目のレイヤーでパズルが完成しているひとコマです。

アニメーションを再生ボタンを押す

1番目のフレームから再生され自動で右方向にフレームが24番目まで 進んでいきます。

最後のフレームまで進む

再生して確認できたらメニューバーの「ファイル」→「web用に保存」を クリックします。

web用に保存

「web用に保存」の画面が出るので画像サイズは幅300px、高さ201px に設定します。 右上でファイルの種類はgif形式を選択し右下でループオプションを 無限に設定します。 保存前に左下のプレビューボタンを押すとブラウザ(IE)でどのように 表示されるか確認することができます。
設定が完了したら保存ボタンを押し任意の場所に保存します。

無限ループでweb用保存

ページで表示すると以下のようになります。 これでパズルを1ピース 1ピース はめていくアニメーションが完成しました。
インターネット上でよく見るgifアニメーションは このようにPhotoshopを使用すると簡単に作成することができます。

アニメーションが完成

クリッピングマスク以外でパズルを作成する方法は下の「その他の項目」の 写真をパズル風にするのページを閲覧して下さい。

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

写真をパズル風にする