スタジオまめの木 デザイン準備室

Studio Mamenoki – Design Preparatory Office

*

Cinemagraph(シネマグラフ)

      2015/02/03

題名『シャッターチャンス』

最近、気になっていたのが写真の一部だけが動く『シネマグラフ』というもの。
広告への展開など使い方によっては効果を発揮しそうな感じもするので少し調べてみました。
どうやらCS5以降の PhotoShopを使用すれば簡単に出来るらしいということが分かったので早速作ってみました。

 

作り方は


  1. 動画をPhotoShopで開く。
  2. ウインドウ(メニュー)からアニメーションを選択
  3. アニメーションが表示されたら下の赤丸で囲った部分を
    左右にスライドさせて、実際に使用する部分を選択する。
  4. アニメーションウインドウの右上にあるボタンをクリックするとメニューが表示されます。
  5. その中から『ワークエリアに合わせてディュレーションをトリミング』を選択します。
  6. 次にレイヤーウインドウを開いて、レイヤーを複製します。
  7. 複製したレイヤーを選んだ状態で、下の画像で示した赤矢印の先にあるボタンをクリック。
  8. チャンネルウィンドウを開いて『レイヤー1のコピーマスク』を選択。
  9. 動かしたい部分をペンツールで塗りつぶしていきます。
  10. 手順4で表示したメニューから『フレームをレイヤーに結合』を選択。
  11. たくさんのレイヤーが作成されたと思いますが、
    その中から静止画像として使用したい画像を選択し、他は削除します。
  12. 下の画像で示した矢印の先にある白い四角(マスク)をクリックした状態で
    選択範囲(メニュー)から『選択範囲を読み込む』をクリック。
  13. 一番上のレイヤーを選択し、手順7で示したボタンをクリック。
  14. 2番目のレイヤーを非表示にする。
  15. ファイル(メニュー)から『web用に保存』をクリック。
  16. 保存形式をGIFにして、保存ボタンをクリックすれば出来上がり!

 

 

今回、テスト的に作って分かったことですが、
動画撮るときは三脚を使うか地面に置くかして手ぶれしない状況にすることが必須です。

※作り方を調べて参考にしたサイトはコチラ
※更に調べてみるとワンタッチで作れるiPhoneアプリを発見。http://cinemagram.tumblr.com/ 

 

 

 


 - デザイン, 写真

Comment

  1. より:

    なんだこれは!
    面白いです。
    GIFアニメじゃないんですね。

  2. より:

    あ、GIF保存だ。
    というかこんな処理初めて知りました。

  3. ikemoto より:

    →斧ちゃん
    コメントありがとう!
    これ、面白いよね?
    『何が面白いの?』という人が1名いたので不安でした(笑)
    ひょっとしたら携帯で動画撮影→ファイヤーワークスで処理でも
    出来るかな?

  4. より:

    『何が面白いの?』って身も蓋もない意見ですね(笑)
    ふと思ったんですが、紙の世界でこれが出来ると
    メチャメチャのメチャ良いですよね!!革命的ですよ。
    ファイヤーワークスだと、一こま一こまを合成加工して、
    パラパラ漫画の様に作らないとできないんじゃないでしょうか。
    おそらく、かなりめんどくさそう!

    • ikemoto より:

      →斧ちゃん
      うん、それは面倒くさいの域を越してますね。
      紙の世界に革命を起こす方がラクかも(笑)

  5. たまのなお より:

    は、花だけがそよいでる~
    理屈はちんぷんかんぷんですが、おもしろ~い
    何かこう上手いこと、絵と実写の融合的映像が
    できへんやろか・・・。
    理屈はちんぷんかんぷんやけど。

    • ikemoto より:

      →たまのなおさん
      コメントありがとうございます。
      そういえば、ディズニーの映画で
      アニメ+実写みたいなのがありましたね。
      『動く!たまの劇場』とか出来ると面白いだろうな〜。

      • おしま より:

        うぁ!面白いですね!!!

        このサイトは何のソフトで作ってるのですか???
        TOPは新着記事が出ていていいですね!

        • Ikemoto より:

          →おしまさん
          おもしろいでしょう、実用できるとこがあるといいんですけどね。
          新着記事が出てるトップページはアドビのDreamweaverで作ってて、このブログはワードプレスですよ。

Message

メールアドレスが公開されることはありません。

WP-SpamFree by Pole Position Marketing

  関連記事

お客様事例のご紹介“美容室AGEN”様

美容室AGEN様の新規開店販促ツール一式 健康で美しい髪をつくる『トリートメント …

ジャケ買いしても損しない10選〜ブルーノート編〜

ジャケットが良ければ、音楽も良いに決まっている 50年代から60年代のブルーノー …

キャラクターデザイン

スタジオまめの木のウェブサイト上に登場するキャラクターについて 説明するページを …

思わず見入ってしまうペット関連サイト5選+1

看板犬ミント&パセリを飼い始めてからペット関連のwebサイトもチェックす …

シネマグラフの作り方

約3年ほど前の記事で一度取り上げた『シネマグラフ』ですが、今度は画像に文字や色味 …

空気を変えるフォントのふしぎ

デザインの影の主役“フォント” 大方のデザイナーがお世話になっているフォントメー …

デザインのちょっとした技

『トーンジャンプを馴染ませる技』 紙媒体のグラフィックデザインをされている方なら …

犬をテーマにしたグッズ11選

スタジオまめの木が運営するwith youでは犬のイラストTシャツをメインに販売 …

著作権フリーの無料素材配布サイトまとめ

『いつもお世話になっている素材屋さん』 予算が無いけれど画像は必要。 しかも、写 …

1枚の写真をweb上で簡単に3Dにできる“Smoothie-3D”の使い方

手持ちの写真を3D(立体)に変換できるWebサイトが面白かったので基本的な使い方 …