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の使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  2. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    photoshopで縁取りを応用し素人っぽさから一歩抜け出すスゴ技を伝授。

    photoshopで文字などをデザインする際、レイヤースタイルの境界線…

  2. キュレーション

    インスピレーションを掻き乱されるほどのPhotoshop超絶テクニック!Youtube動画12選。

    デザイナーやクリエイターなら誰しも、自分の想像を超えるような作品を生み…

  3. 3分の話

    理論派 vs 感情派 の8つのブログ運用談義。

    ブログの文章を書く際に意識していることは?読み手の感情に刺さる…

  4. フォトショップ

    「あれっ?色味が違う・・」フォトショップで印刷データを作る際に絶対に覚えておくべき3つのこと。

    フォトショップ初心者の方や趣味でデザインをやっている方の中には、印刷し…

  5. webデザイン

    細部(ディティール)へのこだわりがWEBデザインに差をつける。Photoshop編

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

  6. フォトショップ

    photoshopで顔や肌のテカリをうまい具合に抑える方法。

    顔や肌のテカリを抑えるためにphotoshopのブラシなどで塗ったりし…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. コピーライティング

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

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

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

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. キュレーション

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
PAGE TOP