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. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  4. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. フォトショップ

    「Photoshopのカラーピッカーがおかしい、、」いつもと色が違う時の対処法

    Photoshopで色を変更しようと思ってカラーピッカーを開くと、知ら…

  2. フォトショップ

    色彩のセオリーを理解してphotoshopでポスターを配色するためのコツ

    ベース・メイン・アクセントの配色を身につける背後にいる男性の彩…

  3. フォトショップ

    印刷用データを入稿する際に「インキ総使用量を300%以下にしてください」ってマジかっ!?Photos…

    デザインが完成したぁっ~!!ってことで印刷業者さんへデータを送ったら「…

  4. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

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

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

最近の記事

  1. 「いつも締め切りに追われてしまう」そんな人がミッションを成し…
  2. Photoshop CCのメニュー文字やツールバーが異常に小…
  3. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…

思考系のおもろい記事

ブログラ
  1. フォトショップ

    見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  2. キュレーション

    必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. webデザイン

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. SEO

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  5. 3分の話

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