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. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…
  3. 「特訓Photoshopプロのテクニック教えます!」という本のWEB版を『無料』…
  4. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  5. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…

関連記事

  1. webデザイン

    社長っ!御社のホームページはタコサイトですよっ、、ウェブ制作者・担当者が知っておくべき重要事項

    ちょっと過激なタイトルですが、タコとは悪口で使われるような意味を含んだ…

  2. webデザイン

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

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

  3. webデザイン

    コンバージョン率を2倍に上げるデザインとは?という考え方が間違っているその理由について。

    「ウェブサイトにおけるデザインの役割はとても重要だ!」と今更声をあげて…

  4. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. webデザイン

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

    WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. コピーライティング

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

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

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