webデザイン

Photoshopを使って動画をGIFアニメーション(動く画像)に変換する方法

ブログの記事内に”動きのある画像”を貼りたい」ときがありますが、実はPhotoshopは写真の色調補正をしたり、画像を編集するだけではなく、MP4などの動画をGIFアニメーションに変換することも可能です

ただ、GIFアニメーションは、時間やサイズが大きくなるほど容量も大きくなってしまうので、基本的に10秒以上を超える動画をGIFアニメーションに変更するのはおすすめできません(不可能ではない)

そのためここでは、「ブログ記事やSNS、WEBサイト上に貼るのにおすすめ」な動画の一部分をリピートしたGIFアニメーション(5秒程度)をPhotoshopで作る方法を解説します。

Photoshopで動画をGIFアニメーションに変換する方法

GIFアニメーションに変換したい動画(ここではMP4動画を用意)をPhotoshopで開きます。

すると、ビデオグループのレイヤーが追加されます。

メニューバーのウィンドウから【タイムライン】を開きます。

再生をクリックすると、プレビューを確認することができます。

不要な部分はハサミマークでカットすることも可能です。

動画をGIFアニメーションとして保存する方法

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

出力のファイル形式は【GIF】を選びます。

動画のサイズが大き過ぎるとデータも重くなってしまうので、ブログ記事などにGIFアニメーションを貼りたい場合には、適切なサイズ(ここではブログのカラムサイズと同じ570px)に調整し、ループオプションは【無限】にして保存します

これで、無限ループするGIFアニメーションの完成です。

B-Roll by Videezy!

GIFアニメーションの応用編

ここで作成したGIFアニメーションを使って、パソコン画面にはめ込んだモックアップ画像を作成したい場合には、こちらのを参考にしてください↓

関連記事 icon-arrow-circle-right GIFアニメをパソコン画面にはめ込んだモックアップ画像の作り方 

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

ピックアップ記事

  1. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  4. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  5. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…

関連記事

  1. webデザイン

    「これって写真だったの?」人物写真をphotoshopで手書き風の水彩画ちっくに仕上げるチュートリア…

    ここでは人物写真を、鉛筆画のような加工と絵具の表現の2つの工程を混ぜ合…

  2. webデザイン

    photoshopで写真をセピア調にする一番簡単な方法!

    写真をセピア調にしたい場合photoshopを使えば超簡単!ものの30…

  3. フォトショップ

    1クリックで完了っ!Photoshopで文字を「縦書き」する方法&英字・数字の応用編

    Photoshopで"すでに横書きで入力されている文字"を「縦書き」に…

  4. webデザイン

    Photoshopでネオン管が光っているような文字の作り方を解説

    歓楽街を歩いているとBARやライブハウスなどのネオン看板が夜の街を彩っ…

  5. webデザイン

    photoshopで結露のしたたる曇りガラスに指で文字を書いたような表現をするチュートリアル

    雨上がり、車の窓から外を眺めているような表現をするために、photos…

  6. フォトショップ

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

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

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

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

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

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