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

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

  関連記事

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

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

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

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

関西のデザイン&手作り系イベント5選

スタジオまめの木で昨年から“with you”というwebショップを運営している …

岡本甲状腺クリニック様【制作実績】

岡本甲状腺クリニック様は、日本甲状腺学会認定専門医施設に認定されている大阪市旭区 …

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

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

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

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

キャラクターデザイン

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

手書き風文字に10秒で変換【イラストレーター】

イラストレーターで普通に使用しているフォントを簡単に手書き風に変換できて、その状 …

フォトショップで暗い写真を写真を明るくする手順

フォトショップは、仕事でも使わない日はないくらい使用頻度の高いソフトですが、いま …

with youのパンフレットが出来ました

昨年11月11日にオープンした「with you」ですが、あと2ヶ月で1周年にな …