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. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ

関連記事

  1. webデザイン

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

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

  2. フォトショップ

    photoshopで肌をなめらかでキレイに仕上げるとっておきの方法。

    photoshopで肌をなめらかに仕上げたいと思った場合にはぼかしを使…

  3. フォトショップ

    photoshopで肌の赤みをとる方法ならこれだっ!

    顔や肌の赤みを修正したい場合、1ヶ所1ヶ所修正していくと非常に時間がか…

  4. 3分の話

    クリエイターとは何ぞや!?ということを真剣に考えてみた結果、ちょっとした独り言で終わった話し。

    響がなんかカッコ良いっ!でも「自称クリエイターです。」と、自称を付けて…

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

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

最近の記事

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

思考系のおもろい記事

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

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

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

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

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

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