初心者の為のPhotoshopの解説サイトです。画像の切り抜きや合成の方法などを
写真付きでわかりやすく解説しています。
これからPhotoshopを勉強したい、復習したいと思っている方に役立つサイトです。 |
TOP >gifアニメの作り方 |
gifアニメの作り方 |
gifアニメ―ションの作り方の解説です。 このページではgifアニメの機能を使用してパズルの写真が 完成するまでのgifアニメを作成します。
まずはパズルの素材を用意します。1ピースのみの画像を複数用意するか
2番目のように複数ピース繋がったものを1つ用意するかどちらでも構いません。
パズルの素材はフリー素材のサイトでダウンロードするか
⇩
このパズルを自動選択ツールで1ピースだけ選択しメニューバーの「編集」→「コピー」をします。
そしてメニューバーの「ファイル」→「開く」でパスタの写真を開き
背景のコピーレイヤーにペーストして図のようにピースの形でクリッピングマスクを作成します。
ピースは図のようにレイヤースタイルでベベルとエンボス、境界線を適用しています。 ⇩ この要領でパズルのピースを24個作成しレイヤー1以外は非表示にしておきます。 メニューバーの「ウィンドウ」→「タイムライン」の順にクリックします。 ⇩ 「ビデオタイムラインを作成」という画面が出てくるので右の逆三角マークを クリックし「フレームアニメーションを作成」を選択してボタンを 押します。 ⇩ アニメーションの最初のひとコマがサムネイルで表示されます。 これは図のレイヤー1の白い背景にパズルのピースが1個だけ 埋めている状態です。 ⇩ 図の四角の部分の「選択したフレーム(最初のフレーム)の複製」を クリックすると2つ目のフレームが作成されます。次にレイヤーパレッドでレイヤー2を 選択し予め非表示にしてあったレイヤー2を目玉アイコンをクリックして表示すると タイムラインにも反映されます。 ⇩ 同じ手順で24のフレームを作成しフレーム下の「0秒」をクリックし 一覧から1.0秒を選択します。 最後のフレームを選択しキーボードの「Shiftキー」を押しながら最初のフレームを クリックするとまとめて時間設定を変更することができます。
タイムラインに24個のサムネイルが表示
されているのでレイヤーパレッドでは24枚のレイヤーがある状態です。
⇩ タイムラインパネル下の「アニメーションを再生」ボタンを押します。 図は24枚目のレイヤーでパズルが完成しているひとコマです。 ⇩ 1番目のフレームから再生され自動で右方向にフレームが24番目まで 進んでいきます。 ⇩ 再生して確認できたらメニューバーの「ファイル」→「web用に保存」を クリックします。 ⇩
「web用に保存」の画面が出るので画像サイズは幅300px、高さ201px
に設定します。
右上でファイルの種類はgif形式を選択し右下でループオプションを
無限に設定します。
保存前に左下のプレビューボタンを押すとブラウザ(IE)でどのように
表示されるか確認することができます。
⇩
ページで表示すると以下のようになります。
これでパズルを1ピース 1ピース
はめていくアニメーションが完成しました。
クリッピングマスク以外でパズルを作成する方法は下の「その他の項目」の 写真をパズル風にするのページを閲覧して下さい。
■ その他の項目・ 写真をパズル風にする |