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. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. 3分の話

    「なんの関係があるの?」ボーリングでスコア246叩き出し、ブログで314万PVを達成するための…

    「今月の数字、ペース割ってるけど大丈夫か?見込み客はあと何人?ちゃんと…

  2. webデザイン

    123RFの格安素材を活用して素人っぽいWEBサイトから卒業しよう!

    ここでは123RFの格安素材を活用して素人っぽいWEBサイトから卒業す…

  3. ブログ

    人気ブログはやっぱり読みやすかった!今すぐ改善すべき9つのポイント

    人気ブログは内容がオリジナリティに溢れ個性的だっ!役に立つ情報を提供し…

  4. webデザイン

    フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

    金色(ゴールド)ってどーやって描けばいいんだろう?そう思うひとは少なく…

  5. 【PR】

    史上最高レベルのスマホ表示を実現したwordpressテーマ【IZM】のデザイン性について

    iphoneを筆頭に、わすか数年で爆発的にスマートフォンが普及したこと…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. SNS

    思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  2. webデザイン

    「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  3. 3分の話

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

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

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
PAGE TOP