webデザイン

「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編】

JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合には、MockDropなどのサービスを使うことで簡単に作れますが ⇒ わずか10秒でパソコン画面のはめ込み画像が作れるMockDropの使い方

しかし、GIFアニメーション(動く画像)のモックアップ画像が作れるサービスは今のところ無さそうだし(私が知らないだけかも)、作り方を教えてくれる記事もぜんぜん見つからない。。

でも「コレができると記事コンテンツの表現の幅が俄然広がる」ので・・

B-Roll by Videezy!

ここではPhotoshopを使ってGIFアニメをパソコン画面にはめ込んだモックアップ画像の作り方を解説します。ちょっと技術が必要になりますが、ロジックさえ分かれば結構簡単に作れるようになるので参考にしてみてください。

GIFアニメのモックアップを作る際に用意しておく画像

ここでは【5秒程度でリピートしているGIFアニメの画像】と、【背景となるデスクトップパソコンの画像】を使ってモックアップ画像を作ります。

動画からGIFアニメを作る方法はこちらの記事を参考にしてください ⇒ Photoshopを使って動画をGIFアニメーション(動く画像)に変換する方法

PhotoshopでGIFアニメのモックアップ画像を作る方法

GIFアニメの画像をPhotoshopで開くと、タイムラインのウィンドウが開き、1カットずつのコマがズラっと並んでいるのが確認できます

もしタイムラインが開いてない場合には、メニューバーのウィンドウからタイムラインを開きます。

まずは、GIFアニメのカンバスサイズを大きくしておきます。

ここでは、元々のGIFアニメサイズの2倍ほどの大きさに広げました。

背景にしたいデスクトップパソコンの画像をPhotoshopで開き、先ほどカンバスサイズを広げたGIFアニメのほうへドラッグ&ドロップします

デスクトップパソコンの画像レイヤーは最後部に表示されるように、レイヤーの一番下へ移動します。

続いて、タイムラインに表示されているコマをShiftを押しながら”すべてを選択”し、背景のデスクトップパソコンのレイヤー”以外”のすべてのレイヤーもShiftを押しながら選択します

メニューバーの編集から自由変形を選びます。

デスクトップパソコンの画面にはまるように、サイズを調整。

先ほどカンバスサイズを広げたため、このまま保存すると容量も大きくなってしまうので、ブログやWEBサイトで使いたいサイズに縮めておきます

メニューバーのイメージから画像解像度を選択。

ここでは、ブログのカラムサイズに合わせて横幅570pxに調整(高さは比率に合わせて自動で調整されます)します。

GIFアニメのモックアップ画像を保存する方法

メニューバーのファイルから【Web用に保存】を選択。

出力するファイル形式は【GIF】を選択し、ループオプションは【無限】を選択して保存します。

すると、このようなGIFアニメのモックアップ画像が完成しました

B-Roll by Videezy!

その他、Photoshopを使うといろいろな表現のGIFアニメーションを作ることができるので、こちらの記事も参考にしてみてください↓

解説記事 icon-arrow-circle-right PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法 

解説記事 icon-arrow-circle-right 妙に不思議なシネマグラフをPhotoshopで作ってみよう 

スリームデザインの無料メールマガジン

ピックアップ記事

  1. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…

関連記事

  1. フォトショップ

    photoshopで人物写真を肖像画風に仕上げる方法。

    人物写真を絵画や油絵の肖像画のように加工したい場合にはphotosho…

  2. フォトショップ

    photoshopで違和感なくほくろやシミを消す方法。

    photoshopで人物写真のほくろやシミを消したい場合にはコピースタ…

  3. webデザイン

    フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

    フォトショップのフィルターを活用すると、画像を印象をガラっと変えること…

  4. 3分の話

    PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

    Photoshopではタイムラインを使うことで動的なGIFアニメーショ…

  5. webデザイン

    ヘッダーデザインの配色がチグハグになってしまうなら色彩を統一しよう。Photoshop編

    魅せる伝えるヘッダーデザインを作成する5つの工程の3番目、ここでは③ …

Wordpress日本語テーマのまとめ
photoshop日本語チュートリアル

よく読まれている人気の記事

最近の記事

  1. 「特訓Photoshopプロのテクニック教えます!」という本…
  2. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  3. Photoshop CCのメニュー文字やツールバーが異常に小…

思考系のおもろい記事

ブログラ
  1. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  2. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  3. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. コピーライティング

    「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. 3分の話

    フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
PAGE TOP