Home > スポンサー広告 > movなどの動画データをphotoshopでアニメーションgifにする方法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

2017-07-30 Sun 21:23:35

このコメントは管理者の承認待ちです

2017-08-06 Sun 18:36:03

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/151-46505ee1
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > movなどの動画データをphotoshopでアニメーションgifにする方法

Home > デザイン > movなどの動画データをphotoshopでアニメーションgifにする方法

movなどの動画データをphotoshopでアニメーションgifにする方法

movtogif.jpg

アニメーションgifが復権してきているようなので、方法のメモ。写真をコマ撮りしてレイヤーに時系列で並べていくことでもできますが、今はmovとかスクリーンキャストとかをアニメgifにするのが新しいのかな。とおもいます。

photoshopでmov→gifに変換
movなどの動画を用意

まずは、動画ファイルを用意します。カメラから取り込んだものや、スクリーンキャストならQuickTimeなどで録画して保存したものを利用できますね。
Premireや、iMovieなどで、アニメーションgifにしたい部分だけ抽出して書き出ししておくとベストです。
(Photoshop側の取り込み時にも読み込み範囲を設定できるみたいなのですが、Photoshopって読み込みの部分、若干弱いイメージがあるので。)

photoshopで読み込み

「ファイル>読み込み>ビデオフレームからレイヤー...」
を選択し、読み込む.movファイルを選択します。

「ウェブ用に保存」で書き出し

レイヤーにずらーっと.mov内の画像がインポートされたら、「ウェブ用に保存」で保存します。

movtogif3.jpg

プリセットをgif系に、さらにカラーテーブルの下あたりにあるアニメーション設定を適宜調節して書き出します。
出来上がったサンプル

fc2用に圧縮してるのでザラザラになっちゃいましたが、こんな感じです。
movファイルのコマを一枚一枚jpeg圧縮してから繋げたら、もうちょっと綺麗な絵になるのかな。
圧縮はCompressor.ioを利用しました。
他にOnline GIF optimizerなどもよさげです。
スクリーンキャストをアニメーションgifにしてくれるサービス「recordit」

スクリーンキャストのみの動画なら、
スクリーンキャストをそのままアニメーションgif化してシェアまでできる「recordit 」が便利そうです。
長さと重さがキーになってきますね
あんまり長いのはNGなのかなと(5〜6秒くらいまでが最適?)おもいます。あとは、データの重さですね。ハイビジョン動画(iphoneで撮ってもハイビジョンだけど)だとすぐに10Mとか行きますので。
どうやって圧縮するか、どの部分を切り取るか、というあたりを気をつければいいのかなーと思いました。

jpgをつなげてjqueryでパラパラアニメにしたほうが絵は綺麗。
アニメーションgifは、ひとつのファイルにまとまっているのが素晴らしい。
けどHDな画像の場合は、youtubeにあげちゃったほうが良い場合もある。
いろんな方法があるので、そのときに一番必要な方法を選ぶことが大事なのかなっておもいます。

ご参考にどうぞ。
関連記事

Comments: 2

2017-07-30 Sun 21:23:35

このコメントは管理者の承認待ちです

2017-08-06 Sun 18:36:03

このコメントは管理者の承認待ちです

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/151-46505ee1
Listed below are links to weblogs that reference
movなどの動画データをphotoshopでアニメーションgifにする方法 from バニデザノート

Home > デザイン > movなどの動画データをphotoshopでアニメーションgifにする方法

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。