アニメーション GIF や Cinemagraph について8

アニメーション GIF や Cinemagraph について7
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-7.html の続き。

先月中に投稿すべきものを一ヶ月も放置してしまった。
単刀直入に GIF の発音は　ジフ　ですよ、と云う事。

The New York Times Bits の記事

“The Oxford English Dictionary accepts both pronunciations,” Mr. Wilhite said. “They are wrong. It is a soft ‘G,’ pronounced ‘jif.’ End of story.”
http://bits.blogs.nytimes.com/2013/05/21/an-honor-for-the-creator-of-the-gif/

tumblr CEO（最高経営責任者）のカープが贈るアワードにて

David Karp presents Steve Wilhite with the 2013 Webby Lifetime Achievement Award

IT'S PRONOUNCED "JIF" NOT GIF

まぁ、それでも私は GIFU と言いますよｗ Graph...だし

続き
アニメーション GIF や Cinemagraph について9
http://redo-chan.blogspot.jp/2013/07/gif-cinemagraphy-9.html

戻る
アニメーション GIF や Cinemagraph について7
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-7.html

アニメーション GIF や Cinemagraph について7

アニメーション GIF や Cinemagraph について6
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-6.html の続き。

前回 javascript/スクリプトを使った アニメーション表示を参考実践しました。今回も GIFとは違う手法でアニメーションを表示したいと思います。

今回は HTML5　<video> を使った表示です。

「えっ それはもうGIFじゃなくって動画表示ですよね？」

その通りです。
GIF の最大欠点は容量です。サイズ縮小したって最適化したって容量抑えられない場合は、元から低容量の動画を使うに決まってるじゃないですか！

「そ、そんな・・・」

動画でもいーんです！
延々リピート再生するプレイヤーが無かったので動画は動画だったんですよ。<video> はリピート再生出来るんです。スクリプトじゃなくてタグの属性でリピートしろポン！なんです。だったら是はもう "一時停止/再生/リピート解除可能な超低容量データのGIF" なんです!!

「いやそのあの、GIFじゃないでしょ？」

GIF っぽい動画表示ですから、GIF でもいーんですーーぅ。
勝手に再生・繰り返し表示するものは、GIFと認めていーんです。閲覧者さんには何だっていーんですから！

そんな訳で <video> タグを使った表示についてコード記述します。

アニメーション GIF や Cinemagraph について6

アニメーション GIF や Cinemagraph について5
http://redo-chan.blogspot.jp/2013/05/gif-cinemagraph-5.html の続き。

前回 GIFの低容量化について思う事を書きました。兎も角GIFは容量食います、何度も書きます言います。なので GIFアーティストの作品を見ては、コマ数とデータサイズを確認し、彼らの努力と工夫をパクリ！しようと常々画策していますニンニン。

そうして、ひょんな事で アニメーションJPG があると知りました。以前から手法として存在していたようです。コチラが例です。見覚えある方も多いと思います。
Martha Graham's 117th Birthday｜Google doodle 
http://www.google.com/doodles/martha-grahams-117th-birthday

Ryan Jeremy Woodward
Martha Graham's 117th Birthday｜Google doodle 

グーグルトップページの色々な記念ロゴ。　

gifに変換されたものです。

元画はPNG、一枚画です。
横並びのコマ画像を数段に亘って段組みし、スクリプトで次々表示位置を変えながら、結果アニメーション効果を出しているそうです。例えるなら、CSSスプライン表示だそうです。詳しくは下記のブログさんでご覧になって下さい。これは話題になりましたね、作者の youtube投稿動画や HPへ訪問した事も思い出します。
ライアン・ウッドワード/ Ryan Jeremy Woodward - 
Ryan Woodward Art and Animation　http://ryanwoodwardart.com/
（アニメーションアーティストさんですね、ボードのイラスト等も描いたりしてた筈です）

で、このアニメーションの解説と詳細、そして再現を記載してくれているブログさんがコチラ↓
blog.rettuce.com｜アニメーションgifならぬアニメーションjpg/png
http://blog.rettuce.com/animation/animation-jpg/

今回コチラ↑で解説ご提供されている方法を、Blogger（blogspot）でやってみました。
一枚画なのでデータサイズが低くなる・・・低くなる？・・・　そうですポイントはココです

↓これは アニメーションGIF では無く、縦に長い JPG 一枚画(480x19080px, 96dpi, 804KB)をスライド表示させています。

原作：高橋留美子 / うる星やつら OP "Dancing Star" 
アニメーション制作：スタジオぴえろ→ディーン
製作：キティ・フィルム・フジテレビ

53コマ分です。これをGIFで行うと3.12MB になりました。
フレーム全体に亘って動く画なので透過のしようが無いのです（最適化しても容量が減り難い）。

続きは参考にさせて頂いたブログさんとコードを記載。
苦労話も書いてますｗ

アニメーション GIF や Cinemagraph について5

アニメーション GIF や Cinemagraph について4（と、その3）
http://redo-chan.blogspot.jp/2013/03/gif-cinemagraph-3.html
http://redo-chan.blogspot.jp/2013/03/gif-cinemagraph-4.html の続き。

最適化について。
GIF を低サイズに抑える工夫とか手段が知りたくて、よく検索しています。続きはノウハウでも何でもありません。色々やってこう思った、こう考えた件です。

アニメーション GIF や Cinemagraph について4

アニメーション GIF や Cinemagraph について3
http://redo-chan.blogspot.jp/2013/03/gif-cinemagraph-3.html の続き。

前回と前々回に渡って、著名と思われる２者の Cinemagraph/シネマグラフ、またはCinemaGIF/シネマGIF を紹介しつつ、どういうものか説明させてもらいました（誰も頼んでませんけど？）。既にご存知でしょうけれど、今回は様々なGIFを纏めてみます。

GIFを用いた ミニアニメーションや、アーティスチックな表現、そして新しい試みは到る所で確認/閲覧できますので、良い仕事のモノを見つけたら、ちょいとDLしてコマ毎に観察を。たった３＾４コマでも動きのある魅力的なアニメーションになるのです。人間の眼って素晴らしい！

---

He says, "What the fuck are you doing"

元ネタ： ごはんて言ってる？ - GO HA N (Food), He says that?
DekoniM さんちのアール君。超絶可愛いﾇｺですね

続きは、すっかり有名な独創的 GIFアーティストを紹介。シネマグラフだけじゃないんですね、GIFって。

アニメーション GIF や Cinemagraph について3

アニメーション GIF や Cinemagraph について2 http://redo-chan.blogspot.jp/2013/03/gif-cinemagraphy-2.html の続き。

本当の意味で Cinemagraph/シネマグラフ を発案したアーティストコンビに、これまた引けを取らないほど有名になってしまったCinemaGIF/シネマGIF の制作者を前回再び紹介しました。

去年辺りにシネマグラフを取り上げたエンタメウェブニュースサイトで両者を一緒くたにして"シネマグラフ"と紹介してましたが、結構別モンです。その時に紹介された 映画を題材にしたシネマグラフ は、、、

http://iwdrm.tumblr.com/post/3235786548

他にも、、、

アニメーション GIF や Cinemagraph について2

アニメーション GIF や Cinemagraph について1 http://redo-chan.blogspot.com/2013/03/gif-cinemagraphy.html の続き。

各所で散々語られたCinemagraph/シネマグラフについて概要説明をします。
前回、「ハードルが高いから気軽に始められないんじゃね？」と云う意見を書き並べましたが、"まずやってみることが大事"だと思うので、「ね？ほらカンタンでしょ？」という具合に説明、、、、しません！

では早速おさらい！
Cinemagraph/シネマグラフという手法と名称は以下の２人が広め考案したものです。

Jamie Beck, Photographer & Kevin Burg, Motion graphics artist

あまりにも有名になった彼らは、tumblr.から飛び出して本格的なサイトを構築しております。

Ann Street Studio - Cinemagraphs
http://annstreetstudio.com/category/cinemagraphs/
Cinemagraph/シネマグラフの聖地、世界最高峰が↑↓ココです

All content created by & © Jamie Beck & Kevin Burg

「写真のような画像、その一部が動いている！」
こう云った具合にCinemagraph/シネマグラフの効果は単純明快！以下に纏めてみました。

アニメーション GIF や Cinemagraph について1

現在でもアニメーションGIF は未だ健在だ。
久し振りに GIF遊び をしていた。一年前の記事 " GIF の再確認 http://redo-chan.blogspot.jp/2012/03/gif.html " 通り、今後もアニメーションGIFは一般的に利用される手軽なファイル形式だと思う。
一部のSNSや端末では使えない点や、企業間の都合で利用可否が制限される点などは疎ましい限りだが。

さて、一年経って Cinemagraph/シネマグラフ はどうなったか？

ファッション系撮影コンビが始めた洒落た加工なので、世界中に愛好家がいるしコミュニティサイトもある。しかし、大体の指南サイトは「Photoshop CS* Extended を用意しろ」としか書いていない。だから始めようにも/やってみようにも「無理だ、じゃぁやめよう」となる。（スマホのアプリもありまするが）残念ながら全然広まってない。まぁ所詮は単なるGIF遊びだし、どうでもいいのだけれど。

Photoshop を用意するのは良いとして、アレコレ処理する前提で起動しているPhotoshopで、更に動画やアニメーション処理するってんだからパソコンの性能に関する注意書きも欲しい処だ。デジタル一眼カメラやムービーカメラで撮影した短時間動画を、只でさえ処理領域＆能力を求める Photoshopで加工し、web最適化でリサイズや色数を指定してアニメーションGIFとして吐き出す処理は結構パソコンの性能を問う。
シネマグラフ系の GIFは、30以上のレイヤーを連続表示させるアニメーションだから、大して高画質でもないコマ送りレイヤでも、アニメーション処理すると「メモリ不足で処理できません」って場合も発生する。撮影好きな方々の趣味加工だから、各々スペックを考慮したパソコンを所有されているだろうけれど、レンジでチン！みたくは仕上がらない。
一方、格段向上した一般普及PC性能の余裕/余力を、時の状況と事情、つまり進歩とやらが食い潰す形になっているのも疎ましいが。

付け加えると、「Photoshopがあれば出来る」と指南している所は、簡易動画編集を備えた Photoshop CS6（通常版）を推奨していないし、更にはAfterEffects に一切触れていない。

ファッション系写真家と組む Motion graphics artistなんて肩書きを使うテクニカルアーティストがフォトショしか使っていない、と考えるのは甘過ぎで、ハイレゾハイエンドとか画質に拘る人からすれば絶対間違いなく画像＆動画処理ソフトを導入して切り貼り編集しているだろう。

Cinemagraph/シネマグラフを作成する上でソフトウェアに関して明言できる事柄はある。
決して Photoshopは高画質のアニメーションGIFを作成する為に必須ではないし、決して必要最低限のソフトでもない。これは決して貧乏人や乞食の僻みでは無いレベルの話です。まず「やってみよう、やってみませんか」に繋がる部分と助言が海外愛好家らと比べてまるで成っていない点は少し残念だ。

あまり長く記述すると、よく解らない内容になるのですが、反って煩雑になる事も踏まえながら、僕なりに記事にしていこうと思います。


続き
アニメーション GIF や Cinemagraph について2
http://redo-chan.blogspot.jp/2013/03/gif-cinemagraphy-2.html

GIF の再確認

tumblr.のダッシュボードや Google+ のストリームには、よくGIF動画が並ぶ。

ひと頃、特許問題で使用敬遠が起こった GIF は、その後 SWF に取って変わられた。容量と画質から汚く重たい GIFは直ぐ見捨てられた2000年代後期。変換形式の選択から GIF は除外され、更に動画コンテンツの充実で価値は下がったように思える。先日、youtube にアクセスした時、右カラムに妙なサムネを見つけたので視聴してみた処、




"アニメーションGIF" とある。
何気に見ていくと、近年のサイトロゴを挙げ、依然使われ活用される GIF の素晴らしさを綴っているらしい。その中にあったシネマグラフに興味を持って早速検索した。どこかで見たことあるが気を惹かなかった。いや、その時は「へ～こんなものがあるんだ」と見過ごしたのだろう。で、早速作った奴のサイトを探す。以下の２名が挙がってきた。

A photography blog From Me To You | Photographer Jamie Beck, Motion graphics artist Kevin Burg.
http://fromme-toyou.tumblr.com/tagged/gif

URL はブログ内のGIFまたはCINEMAGRAPHSカテゴリ

**2013年現在、上記tumblrブログは　Ann Street Studio.tumblr へ リダイレクトされます。
同スタジオ制作のシネマグラフは以下のサイトURLで継続掲載されています
Cinemagraphs | Ann Street Studio
http://annstreetstudio.com/category/cinemagraphs/
**

IWDRM ~ IF WE DON'T,REMEMBER ME.
http://iwdrm.tumblr.com/

こちらは往年の名画から作成。
キューブリック映画GIFの出所はこの人

続きは、出来るかどうかの取り組みについてグダグダ書き置く。

追記 ：
Cliplets現行バージョンで、GIFのエクスポートが可能になりましたので、本記事の続きは不要となります。

2013年時点の意見感想を追記しました
アニメーション GIF や Cinemagraphy について1
http://redo-chan.blogspot.jp/2013/03/gif-cinemagraphy.html