タグ別アーカイブ: cinemagraph

【完成】無限に注げるコップシネマグラフ

破壊的イノベーション。無限に注げるコップの開発に成功。【シネマグラフの作り方(PhotoshopCS5)】

撮影・執筆:Daily GIF89a編集部

 

画期的なハードウェアの開発に成功した。アートでクリエイティブなアプリケーションやハードウェアの開発を通して、世界に”おもしろい”を発信することがミッションである弊社が、「無限に注げるコップ – インフィニティコップ – 」を完成させた。コップをご存じ無い方のために解説をしよう。

 

コップとは

コップ(オランダ語: kop)ガラス、プラスチック、紙などでできた、取っ手のついていない小さな容器。「コップ1杯」と書かれている場合、日本においては180mlか200mlを指していることが多い。

(参考:Wikipedia 「コップ」)

水の入ったコップ
水の入ったコップ

 

 

 

 

 

 

実際の映像

無限に注げるという「コップ1杯」の180mlの定義を遥かに凌駕する破壊的イノベーションは、かくも日常に埋没しているのである。Wikipediaの内容を変更していただきたい。責任者はどこか。

 

まずは実際にインフィニティコップに水を注ぐ映像をご覧いただこう。

 

 

 

 

 

 

 

 

 

 

【完成】無限に注げるコップシネマグラフ

いかがだろうか、注いでも注いでもこぼれない。こぼれさせたくてもこぼれない。

 

 

 

 

 

 

謝罪

ここで一つ辞書を出版されている出版社各社様にお詫びを申し上げたい。

 

平成26年5月4日  出版社各社さま   謹啓 平素は格別のご高配を賜り厚く御礼申し上げます。   このたびは、弊社がインフィニティコップを開発したことにより、 「 コップ (か行) 」 項目に変更が余儀なくされた件で、ご迷惑をおかけし、 誠に申し訳ございませんでした。略儀ではございますが、取り急ぎ書面 にてお詫び申し上げます。  どうか今後とも変わらぬ ご指導のほどよろしくお願い申し上げます。 敬具

 

 

 

 

 

 

 

引きの強さを追求するあまり、悪ふざけがすぎた。

今回はPhotoshopを用いてシネマグラフを作成する。

 

 

 

 

シネマグラフとは

動画のある一部分だけを動かし、その他の部分を動かさないことで非常に芸術的な作品を創ることができる手法である。シネマグラフ(Cinemagraph)とは Jamie Beck と Kevin Burgらが公開したモーショングラフィックスやアートなGIF作成手法である。

作成事例)

via gifmagazine.net

 

【今回作成したシネマグラフGIF】

【完成】無限に注げるコップシネマグラフPhotoshopのレイヤーマスクを用いて水の部分のみを動かすことで芸術的なシネマグラフGIFが作成できる。

 

【準備】

・コップ

・水

・Photoshop (今回の作業環境はCS5.1)

準備:水とコップ

【作業手順】

1.Photoshopを起動する。今回の作業環境はCS5.1

1.Photoshopを起動する。今回の作業環境はCS5.1

 

2.「ファイル」「読込」「ビデオフレームからレイヤー」をクリックする

2.「ファイル」「読込」「ビデオフレームからレイヤー」をクリックする

64ビットモードで開けない場合は32ビットモードに変更をすると開くことが出来る。

2.64ビットモードで開けない場合

 

3.必要な後半のフレームのみを選択して「OK」をクリック

3.必要な後半のフレームのみを選択して「OK」をクリック

 

4.タイムラインの余分なフレームを削除していく

4.タイムラインの余分なフレームを削除していく

 

5.最終的に4フレームを残した。

5.最終的に4フレームを残した。

 

6.残した4つのフレームを表示するための4つのレイヤー以外は作業の邪魔になるため削除する。

6.残した4つのフレームを表示するための4つのレイヤー以外は作業の邪魔になるため削除する。

7.残したレイヤーを再生順序になるように上から並べ、レイヤー名を1,2,3,4と変更する。

7.残したレイヤーを再生順序になるように上から並べ、レイヤー名を1,2,3,4と変更する。

8.レイヤー「1」を選択し、選択ツールで水の部分のみを選択する。

8.レイヤー「1」を選択し、選択ツールで水の部分のみを選択する。

9.「レイヤー」「レイヤーマスク」「選択範囲外をマスク」をクリックする。

9.「レイヤー」「レイヤーマスク」「選択範囲外をマスク」をクリックする。

10.レイヤー「1」の水の部分のみを表示できるようにした。

10.レイヤー「1」の水の部分のみを表示できるようにした。

11.キーボード「option」を押したまま「1」のレイヤーマスクを「2」「3」にドラッグすると一気にレイヤーマスクをかけることができる。

11.キーボード「option」を押したまま「1」のレイヤーマスクを「2」「3」にドラッグすると一気にレイヤーマスクをかけることができる。

12.うまくレイヤーマスクをかけることができるとアニメーションウィンドウがこのようになる。

12.うまくレイヤーマスクをかけることができるとアニメーションウィンドウがこのようになる。

13.フレーム1でレイヤー「4」が表示されるようにする。

13.フレーム1でレイヤー「4」が表示されるようにする。

フレーム1の様子。

13.フレーム1の様子。

14.フレーム2でレイヤー「4」が表示されるようにする。

14.フレーム2でレイヤー「4」が表示されるようにする。

フレーム2の様子。

14.フレーム2の様子。

15.フレーム3でレイヤー「4」が表示されるようにする。

15.フレーム3でレイヤー「4」が表示されるようにする。

フレーム3の様子。

15.フレーム3の様子。

16.「ファイル」「Webおよびデバイス用に保存」をクリック

16.「ファイル」「Webおよびデバイス用に保存」をクリック

17.保存形式を「GIF」にして保存

17.保存形式を「GIF」にして保存

【完成】永遠に水が注げるインフィニティコップ。シネマグラフ

【完成】無限に注げるコップシネマグラフ

 

いかがだったであろうか、Photoshopを用いて芸術的なシネマグラフ作品を制作してみてはいかがだろうか。インフィニティコップのイノベーションを皆様のご自宅で再現していただけると幸いだ。

撮影・執筆:Daily GIF89a編集部

街角で浮遊する男性のシネマグラフ

【芸術的GIF特集】写真が動く!シネマグラフ作成事例20選。 作る前に発想を広げよう。


シネマグラフとは動画のある一部分だけを動かし、その他の部分を動かさないことで非常に芸術的な作品を創ることができる手法である。シネマグラフ(Cinemagraph)とは Jamie Beck と Kevin Burgらが公開したモーショングラフィックスやアートなGIF作成手法である。作り方が気になった方のために以下に作成方法をご紹介しているのでご覧いただきたい。少しでもGIFアニメを作ってみたいという方が増えたら幸いである。

無料フォトレタッチソフト”GIMP”で10分、シネマグラフの簡単な作り方【GIFアニメ作成方法】http://gif89a.net/all/cinemagraph-gimp/

 

 

【GIFMAGAZINE:cinemagraphタグ検索結果】http://gifmagazine.net/gifs/search_results?search[word]=cinemagraph

 

1.無限に出る。

via GIFMAGAZINE

 

 

2.極めた人。

via GIFMAGAZINE

3.注ぎすぎ。

via GIFMAGAZINE

4.よくある状況。

via GIFMAGAZINE

5.努力の結果。

via GIFMAGAZINE

6.8:30の校門前。

via GIFMAGAZINE

7.俺はやってない。

via GIFMAGAZINE

8.緊張

via GIFMAGAZINE

9.耳。

via GIFMAGAZINE

10.芸術的。

via GIFMAGAZINE

11.瞬間。

via GIFMAGAZINE

12.回りすぎ。

via GIFMAGAZINE

13.押し寄せてくる波。

via GIFMAGAZINE

14.溢れない。

via GIFMAGAZINE

15.息継ぎとかしない。

via GIFMAGAZINE

16.長すぎる列車。

via GIFMAGAZINE

17.揺れる。

via GIFMAGAZINE

18.町並み

via GIFMAGAZINE

19.お洒落。

via GIFMAGAZINE

20.新聞。

via GIFMAGAZINE

【GIFMAGAZINE:cinemagraphタグ検索結果】
http://gifmagazine.net/gifs/search_results?search[word]=cinemagraph

 

無料フォトレタッチソフト”GIMP”で10分、シネマグラフの簡単な作り方【GIFアニメ作成方法】http://gif89a.net/all/cinemagraph-gimp/

 

 

 

回りすぎである。

無料フォトレタッチソフト”GIMP”で10分、シネマグラフの簡単な作り方【GIFアニメ作成方法】

 今回は無料のphotoshopと名高い、高度な編集機能を備えた無料で使える本格フォトレタッチソフト「GIMP」を用いたGIFの作り方をご紹介する。特にシネマグラフの手法に挑戦をする。非常に簡単にアーティスティックでクールなGIFアニメが作成できる方法なので、ぜひお時間がある際に挑戦していただきたい。また時間がある際にPhotoshopでの作成方法も解説することとしよう。

【GIMPダウンロード】

http://www.gimp.org/downloads/

 

 

 過去にはAdobe Photoshop を用いて10分でできる「位置&透明度」を操作した簡単なアニメーションGIFの作成方法についての説明もしている。Photoshopで作るGIF作成方法に関しては以下の記事をご参考にして欲しい。

1.Photoshopで10分、ハイクオリティGIFアニメの作り方【不透明度テクニック】

2.進捗どうですか?Photoshopで10分、GIFアニメの作り方【位置テクニック】

ご一読頂ければ幸いである。

 

今回のテーマは「シネマグラフ-cinemagraph-」である。

 

シネマグラフの作品例

注ぎすぎである。

 

 

息を吐きすぎである。

 

 

水だしすぎである。

 

このように、動画のある一部分だけを動かし、その他の部分を動かさないことで非常に芸術的な作品を創ることができる手法である。シネマグラフ(Cinemagraph)とは Jamie Beck と Kevin Burgらが公開したモーショングラフィックスやアートなGIF作成手法である。 

 

 

 

今回作成したGIFはこちら。

回りすぎである。
回りすぎである。

 

【使用した素材】

1.動画の好きな場面のフレームをjpegに切り出した画像ファイル × 約15枚

サンプルファイルはこちらからダウンロード

(100ms)(replace)_0011_レイヤー-1(100ms)(replace)_0003_レイヤー-25(100ms)(replace)_0008_レイヤー-10

 

 

 

 

 

 

 

サンプルファイルはこちらからダウンロード

 

【作成手順】

 

 

1.GIMPを起動する。

111

 

2.ワークスペースが開かれます。

111

 

3.「ファイル」、「レイヤーとして開く」をクリックします。

3.ファイルをレイヤーとして開く

 

4.サンプルファイルの画像を全て選択し、「開く」をクリックする

サンプルファイルはこちら。

4.サンプルファイルを全て選択して開く

 

※5.動画をjpegに切り出す方法はこちらなどを参照。こちらでお好きな動画をjpegに切り出すことができる。

http://gif89a.net/wp-content/uploads/cinemagraph_sample

 

6.右下に画像がレイヤーとなって表示される。

6

 

7.「投げ輪ツール」を選択する。

7投げ輪ツールを選択する

 

8.動かしたい場所を投げ輪ツールでクリックしながら囲む。88

 

9.現在のレイヤーを右クリックし「レイヤーマスクの追加」をクリック。

88

 

 

10.「選択範囲」にチェックをし、「追加」をクリック

10選択範囲をクリック

 

11.現在のレイヤーの右に白黒のサムネイルが表示される。11現在のレイヤーに白黒のサムネイルがつく

 

12.現在のレイヤーを右クリックし「レイヤーマスクの適用」をクリック。

12レイヤーマスクの追加

 

13.右下の現在のレイヤーが切り取られる。

13現在のレイヤーが切り抜かれる

 

 

14.下のレイヤーを選択する。14下のレイヤーを選択する

 

15.手順9から手順14を最後のレイヤー1枚が残るまで繰り返す。

15手順9から14を繰り返す

 

 

16.最後のレイヤーを残して作業を繰り返す。16最後のレイヤーを残すまで作業をする

 

17.「フィルター」、「アニメーション」、「再生」をクリック。17フィルターアニメーション再生をクリック

 

18.「再生」を押すとプレビューを見ることができる。1818

 

 

19.プレビューを閉じます。18再生を押すとプレビューができる

 

 

20.「フィルター」「アニメーション」「GIF用最適化」を選択。19プレビューを閉じる

 

 

21.新たにウィンドウが立ち上がる。
21新たにウィンドウが立ち上がる

 

 

22.「ファイル」「Export As」を選択します。22ファイル、export asをクリック

 

 

23.最適な名前を付けて「エクスポート」をクリック
23名前を付けてエクスポートをクリック

 

 

24.完成

回りすぎである。
回りすぎである。

 

いかがだったろうか?Photoshopをお持ちでない読者も多いだろう。フォトレタッチアプリケーションの最高峰といえばphotoshopであるが、Photoshopを使う前にGIMPのような高度な編集機能を備えた無料で使える本格フォトレタッチソフトをぜひ使っていただきたい。皆様もあいた10分でGIFアニメ作りに挑戦してみてはいかがだろうか?