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

Studio Mamenoki – Design Preparatory Office

*

シネマグラフの作り方

   

wmp

約3年ほど前の記事で一度取り上げた『シネマグラフ』ですが、今度は画像に文字や色味を付け加えて広告的なデザインに仕上げてみました。

シネマグラフとは?

シネマグラフとは写真の一部分のみが動くように作られた画像のことです。静止画のようであり動画ともとれる不思議な雰囲気を出せる技法です。

シネマグラフの作り方

waitminpa

上記のものが今回制作したシネマグラフです。看板犬ミント(左側)の顔の毛が風に揺れているのがわかりますでしょうか?本当は身体の毛も風になびくようにしたかったんですが、風が吹かなかった。というわけで、初夏の控えめなそよ風の中でお利口さんにマテをし続ける犬をテーマに作成してみました。では、早速作り方を説明します。

動画を用意する

撮影するときに気をつけていただきたいのが、カメラをしっかりと固定することです。カメラ自体が動いていると静止画の部分と動画になる部分が綺麗に繋がらなくなるというのが理由です。また、シネマグラフの大部分は静止画になるので動画機能のある一眼レフカメラで撮影するとより綺麗な仕上がりが期待できます。
※ちなみに今回はiPhoneで撮影しました。

動画をPhotoshopで開く

wmp1

メニューの『ファイル』→『読み込み』→『ビデオフレームからレイヤー…』を選択します。
選択すると動画の中で必要な部分だけを選択できる画面がでてくるので、シフトキーを押しながら必要な部分を選択し、OKをクリックしてください。

不要なフレームを削除する

wmp2

『アニメーション(フレーム)』に表示されているフレーム(コマ)から不要な部分を選択して削除します。削除は『アニメーション(フレーム)』の下部にゴミ箱アイコンがあるので、そこをクリックすればできます。
今回はiPhoneのスローモーション設定で動画を撮影した結果、無駄なフレームが多量に出来ていたので前後の不要なフレームを削除した後に使用するフレームを3フレームごと間引いていきました。

フレームをレイヤーに統合→不要なレイヤーを削除

wmp3

『アニメーション(フレーム)』の右隅にあるボタンをクリックすると上の画像のようにメニューが表示されますので、その中から『フレームをレイヤーに統合』をクリックします。
『フレームをレイヤーに統合』をする前は、すべてのフレームがレイヤーパネル上にズラっと並んでいましたが、『フレームをレイヤーに統合』をすることで実際に使用するレイヤーが最上部にまとまって表示されるのでレイヤーパネル上の不要なレイヤーは削除します。

動かしたい部分にマスク処理をする

wmp4

レイヤーパネルの下にある四角い中に丸が描かれているボタンをクリックすると『ベクトルマスクを追加』が実行されます。
レイヤーパネルに新たに白い枠が表示されるので、そこをクリックしてバケツツールなどで全面黒く塗ります。
次に動かしたい部分を白く塗ると動かしたい部分のみが表示されるようになります。

マスクをコピー&ペーストする

wmp5

レイヤーパネルの一番上と一番下のレイヤーを表示状態にさせます。次にレイヤーパネル上のマスクをoptionキーを押しながら下にドラッグするとマスクが簡単にコピー&ペーストできます。一番下のレイヤー以外をこの方法でマスクしていきます。

フレームを調整する

『アニメーション(フレーム)』下にある再生ボタンを使って再生してみて不自然な箇所をチェックします。今回作成したものは最初と最後のフレームの繋がりがよくなかったので中間のフレーム数個をコピーして最後のフレームの後にペーストして調整しました。また、フレームそれぞれの表示時間も設定できるので必要がある場合は設定してみてください。

ひとまず完成

シネマグラフの処理は以上で完了です。画像の色補正や文字を追加したい場合は、レイヤーの最上部に調整レイヤーや新規レイヤーを追加すればできます。

gif形式で書き出す

waitminpa

画像補正などの作業が完了すればメニューの『ファイル』→『webおよびデバイス用に保存…』を選択し、gif形式で保存すれば完成です。

まとめ

シネマグラフは数年前から注目していますが、広告やwebサイトで実際に使用されている場面を目にすることがそんなに多くありません。イマイチ普及した感がないシネマグラフですが、他で見かけない今のうちにシネマグラフを使った広告で注目を集めるのも手かもしれません。

 - デザイン, 写真

Message

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

WP-SpamFree by Pole Position Marketing

  関連記事

簡単にコピースペースを作る方法【フォトショップ】

写真の上に文字を配置するデザインをする場合、写真に適度な余白が必要になります。し …

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

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

Negative Space Logo Design

余白を上手に取り入れたロゴデザイン ロゴ作成時に参考になる余白(ネガティブ スペ …

ウッドバーニングでデザイン性アップ

スタジオまめの木の看板犬のミント&パセリは2階のリビングで暮らしています。3階に …

ペットの保護活動支援Tシャツのデザイン&販売

この度、スタジオまめの木運営のネットショップ「犬との暮らしを彩るデザインショップ …

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

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

株式会社NSI様の会社案内【制作実績】

株式会社NSI様は大阪と東京に拠点を置き、主に情報システムの設計・開発を行ってい …

アイロンプリントでワンコTシャツを自作してみた

スタジオまめの木の看板犬ミント&パセリは、ジャックラッセルという非常に抜け毛が激 …

おでんと天婦羅『さゆさゆ』様スタッフユニフォーム制作【実績】

今回ユニフォームのデザインを依頼頂いたさゆさゆ様は、京阪本線の香里園駅前の香里中 …

webデザイン初心者にもおススメの参考書

今さら聞けない基礎を学ぶ 一度、基礎を学べばその後は実務経験の中で仕事の質を上げ …