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

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

  関連記事

発注前にデザインを確認できるサービス始めました

依頼する前にデザインを見を見せていただけますか? 会社案内やカタログなどのデザイ …

美山ふるさと
美山町自然文化村 河鹿荘様【制作実績】

美山町自然文化村 河鹿荘様は、茅葺き屋根の集落で有名な京都の美山町から車で5分程 …

株式会社ルノータス様【制作実績】

株式会社ルノータス様はカスタムオーダーメイドの腕時計を製造・販売されているメーカ …

キャラクターデザイン

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

Adobeモバイルアプリ“Adobe Brush”は仕事で使えるのか?

前回はアドビのモバイルアプリ“Adobe Shape”をピックアップしましたが、 …

photoshopのブラシの作り方【フォトショップ】

以前の記事『簡単にコピースペースを作る方法【フォトショップ】』で雲のブラシを利用 …

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

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

Tシャツ作りました

『釣りをテーマにしたTシャツデザイン』 スタジオまめの木でTシャツを作ることにな …

シネマグラフの作り方

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

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

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