Photoshop Elementsでは、保存するときに動画にすることができます。
動画の保存は、gifでします。
![]() |
動画はパラパラ漫画を作るのとほぼ一緒です。 ぱらぱら漫画って、教科書の端とかに誰でも作ったことがあるんじゃないかと思うんだけど、あの1ページ分がレイヤー1枚にあたります。 動画を作るには、最低で2枚のレイヤーを作れば良いの。 レイヤーは一番下のレイヤーから上に向かって順番に1枚ずつ表示されます。 ←この場合だと、レイヤー1→レイヤー2→レイヤー3の順番になります。 |
![]() |
これをWeb用に保存します。 Web用に保存の窓で、アニメーションにチェックを入れ、繰り返したかったら、繰り返しにもチェックを入れます。 フレームディレイのところで、1枚が表示される時間を設定します。 今は一枚につき0.2秒表示される設定です。 |
![]() |
一番下にあるプレビューの e のマークをクリックすると、出来上がりが見れますが、実際よりは少し遅く表示されるみたいです。 ←実際は、動いてます。 |
![]() |
問題なければ保存。 こんなふうになりました。 簡単でしょ〜。 |
動画を作るときに注意したいのが、動画ってものすごく重いってことです。
コマが多ければ多いほど重くなるし、レイヤー1枚分に色がたくさん使ってあればそれだけ重くなります。
スクロールするように動くバナーなんか、88×31で静止なら10KBにもならない画像が、100KB超えることもあります。
いくらなんでもバナー1枚100KBで、おまけに直リンクバナーだったりしたら、かなり迷惑なことになりかねません。
スクロールとかかっこいいけど、よく考えて作りたいものですね。
![]() |
こんなのです。 人気ありますね。でも超簡単。 |
![]() |
元になる画像を用意します。 |
![]() |
レイヤーを複製して2枚にします。 |
![]() ![]() |
画質調整→明るさ・コントラストの明るさを+に動かして、1枚を明るく(白っぽく)します。 コレをアニメーションで繰り返しで保存して出来上がり。 フレームディレイは一番早いの(0.0)が、良い感じかな。 |
![]() |
こんな感じで。 フォトショやウェブアニメーターならいっぺんですけど、エレメンツはちょっと面倒。 |
![]() |
最初に、スクロールしたい範囲に画像を切り抜いておくと良いんじゃないかと。 特に、縦方向のスクロールなら、幅を出来上がりと同じにしておくと良いような気がしますが、まあ、どっちでも良いです(^^; 今は、幅150高さ200にしてみました。 |
![]() |
ビューのグリッドと定規にチェックを入れます。 画面にグリッドと定規が表示されます。 これがあると、動かす量の目安になるんじゃないかな。どっちかひとつでも良いです。 |
![]() |
長方形選択ツールで、スタイルを固定にし、作りたい大きさの幅と高さを入力します。 幅は、最初に切り取ったときと同じ幅です。 画面なるべく下の方をクリックすると、横幅と下にぴったりくっついた選択範囲の枠が出ます。 |
![]() |
最初のひとコマをコピーして保存します。 Ctrl+Cをクリックして、選択枠内をコピー。 ファイル→クリップボードから新規作成すると、コピーした画面のが新しくできました。 (下の画像ね) |
![]() |
この枠を上へ動かしていきます。 ドラッグすると、横にずれやすいので、動かすには、自動選択ツールをクリックして、キーボードの矢印の移動キー(↑)を使うと良いです。 移動距離が同じになれば良いので、グリッドや定規を目安にしても良いし、「10回クリックしたら」とか、数えていっても良いです。 今は、グリッドの2目盛りずつ動かして行こうと思います。 2目盛り上にまで動かしたら、Ctrl+Cして、さっき切り取ってクリップボードから作ったのに貼り付け(Ctrl+V)します。 これで2コマ目ができました。 |
![]() |
同じ要領で繰り返して、一番上までコマを作ってしまいます。 |
![]() |
で、アニメーションで保存して出来上がり。 移動幅がちいさいほど、コマが多いほど滑らかに動きます。でも、激重になるのでほどほどにね; 思い切ってしっかり減色してしまってもコマが多くて動いてると案外わかんないですから。 (コレはコマ数が少ないので、画質悪いのばればれだね;gif32ディザで保存しました) |