「繊細さと感性」を美徳とする日本人に贈る Web世代スローエンターテイメントブログ 

カタパンタ・グラフ

HTML5(CSS3)でKinetic Typographyもどき | カタパンタ・グラフ

HTML5(CSS3)でKinetic Typographyもどき
オープンソース&フリーソフトで「っぽい」モノを手軽に作ってみました。
'GREPREP TIPS (機能デモ)'
RAWSEQ

近年でちらほら話題になっている映像技術にKinetic Typography(キネティック・タイポグラフィー/モーション・タイポグラフィー)というものがあります。
元々、動画中の文字表記は、テロップ(右から左)やスーパー(字幕)やロール等、専ら説明書きに過ぎなかったのですが、その文字自体を表現手法と捉え、文字を主体として、構成される文章に含まれる感情を動的に表したりする映像表現です。
しかし、高度に芸術的な作品は、そこいらの動画編集ソフトで作るのは難しいとされています。

▲Kinetic Typographyっぽい何かの図 (YouTube)
そんな中、芸術的にはかなり低度ですが、オープンソース&フリーソフトで「っぽい」モノを手軽に作ってみました。
◆[YouTube]こちらをご覧ください。
HTML5(CSS3)で文字の動きを作成し、それをGoogle Chromeブラウザにて実行。
画面キャプチャ(DxCapture)したものを、Aviutlの拡張編集を利用して作成してみました。 使用しているフォントもこれまた使用フリー。たぶんこの手法が一番簡単だと思われます。
冒頭のみですが、Kinetic Typograpy (キネティックタイポグラフィー)っぽい って思っていただければ大成功かと思います。
HTML5自体が3Dやムービーを扱えるので、 劣化せずにキャプチャーできれば、原始的なパイプラインフィルター的な編集が出来るかもしれませんね。個人的には3DとEase-In、ブラーさえ使えれば言うこと無しです。
◆ この記事のシェア用リンク

| とっておき | 02:21 | comments(1) | trackbacks(0) |
<< カピバラ本、できました。 | main | BLUE TICK という時計 >>
管理者の承認待ちコメントです。
| - | 2018/05/30 12:17 PM |









http://blog.ltside.com/trackback/864958
メインメニュー




Photo 携帯とコンデジをなんとか駆使して撮ってます DISCOGRAPH お気に入りの音楽を紹介します Web Tech サーバーからアプリケーションまでのウェブテクノロジーを紹介 Gadget デジタル小物のちょっと変わった使い方を紹介 Planless Walk 無計画だから面白い、無計画散策シリーズ Press Release 折角なのでRAWSEQの作品を紹介 Fiction ちょっとした未来にありそうな想像の話 Dream 寝て見た夢の話 Fine Quality ファインクオリティ 2/month Update 月2回更新 Full Graphics 全てグラフィック付き good description awards 推奨 Alternative genre オルタナティブジャンル Twitter Facebook
カテゴリ
バッグナンバー
総合演出
RSS