Photoshopで簡単!5分以内で出来ちゃうシネマグラフの作り方

下のアクセサリーのように画像の一部にだけ動きを取り入れたGIFアニメーション、シネマグラフの作り方をご紹介します!

cinemagraphs

今回はPhotoshop(フォトショップ)で作ってみましょう!

下準備

元となる動画をPhotoshopにドロップし、タイムラインで再生します。
001

上手くドロップ出来ない場合はタイムラインにある【ムービー?】マークをクリックして”メディアを追加”から読み込めます

ループ出来そうな部分をタイムラインから探します。
002

使用する部分が決まりましたら、その箇所を【ハサミ】マークを使用し分割します。
003

余った不要な部分を選択し、キーボードの【Del】キーで削除します。
004

ここまでで下準備は完了です!
既に使用部分が決まっていれば1〜2分で出来ると思います

シネマグラフ作成

さてここからいよいよ本番!

対象の動画レイヤーを右クリックして『レイヤーを複製』します。
005

複製したレイヤーは最前面に置きます。また複製したレイヤーと元のレイヤーのスタート位置を揃えます。

複製したレイヤーを右クリック『レイヤーをラスタライズ』します。
006

ラスタライズしたレイヤーにレイヤーマスクを追加します。対象レイヤーを選択した後【マスク】マークをクリックでマスクが追加されます。
007

マスクを選択し、変化をつけたい部分を黒いブラシで塗っていきます。
008

塗るツールはペンツールや長方形ツール等を使用しても大丈夫です。

マスクの黒く塗った部分が透明化され、下の動画レイヤーが見えるようになります。
009

タイムラインを移動して確認してみて下さい。
010

これだけでほぼ完成です!
慣れれば1〜2分もあれば出来ちゃいます

仕上げ

最後に保存までの仕上げをサクッとやっちゃいましょう!

不要な部分を切り抜き
011

調整レイヤーを追加して、色相・コントラストを調整
012

サイズが大きければ【イメージ】→【解像度】から調整
013

【ファイル】→【web用に保存】でGIFを選択。
014

アニメーションのループオプションを『無限』にして【保存】で完成!
015

トータル5分もかからずこのような不思議な画像が出来ちゃいます!
Photoshopをお持ちの方は是非チャレンジしてみて下さい

関連商品

はじめてPhotoshopを触る人を対象とした、超入門書です。Photoshopの各ツールの基本機能から、実務で使える鉄板の応用技まで、この1冊でPhotoshopの基本は必ず習得できます! 【対応バージョン】 CC | CS6 | CS5【対応OS】 Mac & Windows 対応
by amazon
あらゆる発想(アイデア)に対応できる
「実践力」と「応用力」を手に入れよう! 多くの読者のみなさまから高評価をいただいているPhotoshopの解説書が遂に最新バージョン、Photoshop CCに完全対応しました。
by amazon

動画投稿者様

threemdesign
いくら注ぎ続けても減ることも増えることもないワイン・・老人はいつになったらこのワインを味わうことができるのだろうか? ブログ⇒ http://threem-design.com/web-design/cinemagraph/

icon-quote-left 出典:Photoshopで無限ループのシネマグラフを作成してみよう! – youtube  icon-quote-right

スポンサードリンク

この情報をシェアする!!

作品で繋がるコミュニティサイトCLEN!!

テスト公開しました!!
CLEN(クレン)は様々なクリエイターが作品を通じて交流やアドバイス、コミッションが出来るサービスです !

只今テストユーザー様大募集中!!
皆様のご参加お待ちしています!

コメントを残す

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