GIFアニメーションの作り方(フォトショップ)

前回のgifアニメーションの作り方を記事にしておきます。

使用ソフトはフォトショップエレメンツ6.0。
エレメンツ2.0でも同様にできることを確認しておりますので(1.0は不明)、2.0以降は同じように作ることができます。

で、高いフォトショップ(CS)とかは……ちょっとやり方が違うようですので、参考になるかどうか…。
たぶん行程は一緒で、最後の保存の方法が違うのかな…と思いますが、不明です…。

私が持っている高い方のフォトショップはバージョンが5.0で、これはgifアニメの保存ができませんでした。

調べてみると、5.5以降にImage Readyというソフトが同梱されているようで、そちらでできるようです。


それでは例の如く、グダグダと書いておりますので、興味のある方はご覧下さい。

08013001.jpg前回のgifアニメーションはこのような連続する3枚の写真を使いました。


08013002.jpgフォトショップでアニメーションにしたい画像を開きます。


08013003.jpg全部の画像を一つに重ねます。

動かす画像を左クリックしたまま移動先の画像の上までドラッグすると、レイヤーとして重なりますので、全部の画像を1つにまとめましょう(重ねましょう)。


08013004.jpg元々の画像は「背景」という名前になっていますので、「レイヤー」に変更しておきます。

「背景」のレイヤーを右クリックして、「背景からレイヤーへ」を選択すると「レイヤー0」という名前に変わります。

これで自由にレイヤーを動かせるわけです。


08013005.jpgアニメーションが再生される場合、レイヤーの下の画像から再生されますので、もし順番がおかしければ、レイヤーを移動させておきます。

また、「目」のマークは消えていると画像も表示されず、「目」のマークが出ているとその画像も表示されています。
重ね合わせたりするときにこの「目」のマークで表示させなくしたり、表示したりすると便利です。

表示・非表示の切り替えはこの「目」のマークをクリックするだけです。


08013006.jpgでは3枚の画像を上手く重ねてみます。

まず一番下のレイヤーだけが表示されるように、他のレイヤーのは非表示にしておきます。

一番下のレイヤーの位置をきちんと決めておいて下さい。


08013007.jpg続いて真ん中のレイヤーを処理します。

一番下のレイヤーは表示したまま、真ん中のレイヤーも表示されるように「目」のマークをクリックします。

真ん中のレイヤー(処理したいレイヤー)が選択されていることを確認しておいて下さい。
(選択されていないと他のレイヤーが動いてしまいます…。)

真ん中のレイヤーの透明度を上げ、重ね合わせやすいように下のレイヤーがうっすらと見えるようにしておいて下さい。

重ね合わせるのにポイントとなるような場所を目当てに重ね合わせます。
なるべくピッタリと重ね合わせるのがきれいに見せるコツです。
すこしでもずれていれば、できあがりになめらかさがなくなります。
縮小、拡大、移動…いろいろとやってみて下さい。

重なったら「不透明度」のスライドバーを100%に戻しておきます。

3枚目のレイヤーも同様に重ねておきます。



08013008.jpg全く同じ位置で撮影したものなら、けっこうそのまま使えますが、手持ちで撮った場合など、重ね合わせると微妙に大きさや場所が違ってくると思うので(大きさにバラツキができる)、全部が重なっていない部分はカットして切り捨てるようにします。


08013009.jpgレイヤーウィンドウを見るとどのレイヤーが一番小さいか(余白が多いか)が分かりますので、それに合わせてカットします。

カットするレイヤーだけが表示されるようにしておいて、切り抜きツールで切り抜きます。

もし、他のレイヤーも白紙の部分が残っていれば、今度はそのレイヤーに合わせてカットします。


08013010.jpgあとは保存するだけです。

「Web用に保存」を選びます。

余談ですが、この「Web用に保存」を使うと、JPEGの画質、大きさなども簡単に変えられ、ブログにアップする写真の大きさも簡単に縮小することができますよ。


08013011.jpgGIFアニメで保存する場合は「GIF」を選びます。

「アニメーション」というところにチェックを入れて下さい。

サイズも適当な大きさにしましょう。

アニメーションの設定をして、確認後、それで良ければ「OK」ボタンをクリックしてできあっがりぃ~\(^O^)/




高い方のフォトショップの場合はImage Readyで作成後、「ファイルメニューの「最適化ファイルを保存」または、「最適化ファイルを別名で保存」で同様に保存できるようです。

ぜひおためし下さい(#^.^#)


ハイ、お疲れ様でした♪
関連記事

コメントの投稿

私が持っているのは、V5.0j と アップグレード版の V5.5 です。

>5.5以降にImage Readyというソフトが同梱されているようで、そちらでできるようです。

確かに、Image Ready 2.0 は同梱されています。
フォトショップは解説本なしに、感覚的に使っているので、
Image Ready のソフトは、何に使うんだろう?
と思っていました。爆!

れんさんの説明、すっごく分かりやすーい。
上から5段目までは、ソフトを開かなくても、どうしていいか、手順など言ってあること分かります。
その次の段階も実際に作業をするときにも分かりやすい説明だと思います!
れんさんの、丁寧な解説に驚きです。

いつか、仕事が暇なときに、やってみたい!でも・・・・
連続した写真・・・・・もっていない。爆!
私は、携帯しか、カメラを持っていないので、どうしよう。爆×5
アニメ作成の細かい作業の手間を省く、連写は携帯では、ムリだね。汗

うぉっと・・うち 2.0 だよ・・・・・(--;)

ポスターできるか不安。
明日持って行かないといけないんだけど。

ま、なんとかなるか、な・・ (汗)

またまた見に来ました
また来ます m(_ぷ_)m

ゆき様

私、ちゃんとゆきさんのお役に立てたかしら??
もしそうだったらうれしいんですけど(#^.^#)

>れんさんの説明、すっごく分かりやすーい。
ありがとうございます♪
ホッとしました…。
なにしろ……普段の記事でもそうなのですが、手短に上手く要約して伝えることが苦手で、ついつい一部始終(?)書かないと理解してもらえないのではないか…と思ってしまう方なんです。
で、つらつらと長文を書いたはいいけど、今度は長すぎて何を書いているのか分からないのではないか…と。

今の携帯って連写もできるのでは?
(携帯は使いこなしてないのでよく知りませんけど……( ̄▽ ̄;)アハハ…)
と言うわけで、ぜひぜひお仕事が一段落つきましたらぜひぜひ挑戦してくださいませ\(^O^)/
連写でなくても、2種類の写真……手を合わせているのと手を離している写真があれば、拍手しているようなのができますし、正面を向いたのと下を向いたのがあれば礼をしている写真みたいに見えます。
あっちとこっちを見ている写真なら、イヤイヤしてると言ったところでしょうか。

いろんな動画もどきができますから、試してみて下さい。
おもしろいですよ♪




ぷぅちゃん☆様

エレメンツの2.0ですか?
エレメンツならできますよ♪

高いフォトショップの2.0ならフォトショップだけでは無理かも…。
でもフォトショップで画像を用意して、GIFアニメができるフリーソフトとかもあるし、どうにでもなりますよ(#^.^#)

そうそう!
なんとかなります!
ぷぅちゃん☆なら何とかしてしまうでしょう!
(・・)(。。)うんうん

いつでも見に来て下さいね(#^.^#)
応援してま~す!
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
カレンダー
04 | 2016/05 | 06
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
全記事表示リンク

全ての記事を表示する

ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ