3分の話

PhotoshopでGIFアニメーションをトゥイーンで作って保存する方法。

Photoshopではタイムラインを使うことで動的なGIFアニメーションをつくることができます。ここでは中間のフレームを自動で生成してくれるトゥイーン機能を使用して保存するまでの工程を簡単に解説します。

Photoshop CS6使用写真素材
所要時間の目安10分パリの女性
パリの女性素材 》
画面サイズ570×400:解像度72pixel/inchUFO
UFOの素材 》

PhotoshopでGIFアニメーションを作るためのチュートリアル

パリの女性画像を開く。

パリの女性

UFO画像も開く。

UFO画像

UFOの背景を切り抜く。切り抜き方法はこちらを参考にしてね ⇒ これで完璧っ!5種類のphotoshop切り抜き方法を使い分けて輪郭線を背景になじませるクオリティの高い合成をマスターしよう。(今回はケース③を使用)

UFO切り抜き

パリの女性画像へ切り抜いたUFOレイヤーをドラッグして放り込む。(UFOウィンドウは閉じてOK)

ドラッグ

UFOレイヤーを複製し任意のサイズに調整。複製元のUFOは非表示にしておく(後で必要になるかもしれないので)

サイズ調整

タイムラインのウィンドウを表示する。

タイムライン

[フレームアニメーションを作成]をクリック。

フレームアニメーション

フレームアニメーションのタイムラインが表示されました。

0.1秒

1コマ目の秒数が0秒になっているので▼のところにカーソルを合わせ0.1秒に変更する。

PNG

フレームを複製。

フレームを複製

UFOレイヤーを任意の場所まで移動する。

UFOレイヤーを移動

トゥイーン機能で間のフレーム(今回は10フレーム)を生成する。

トゥイーン機能

①フレームが追加されたのを確認したら ②ループ数(今回は無限)を変更し ③再生して確認してみる。

ループ数

再生していい感じだったら、ファイル 》Web用に保存

GIF保存

拡張子をGIFにして保存

GIFで保存

このように完成しました。

完成

PhotoshopでGIFアニメーションをアレンジしてみました。

通常GIFアニメーションは画質が劣化するため、風景や人物写真などで作るよりベタ塗りのイラストのほうが相性が良いですアイコンなどの手をピクピクと動かしてみたり、バナー広告で値段などを点滅させて目立たせたりする場合に効果的です

今回はあえて風景&人物を使用することで劣化した画質がレトロ感をかもし出してくれるよう工夫してみました。

アレンジ

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

ピックアップ記事

  1. 「ブロガーがこんなの読んだら反則レベルでしょっ、、」と思うくらい文章力が上がりそ…
  2. 必読!安易に起業ブームに乗っかる前に…絶対に読んでおきたい【おすすめのビジネス書…
  3. photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  4. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単なブログのアイキャッチ…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. 3分の話

    「やりたいことがわからない人」が読んでおきたい3冊。

    自分は器用だし、たいがいのことは人よりも優れた結果を残してきた。でも、…

  2. webデザイン

    ちょっとした裏技!?Photoshopで文字を切り抜いて影を付けるレイヤーマスクの活用方法

    前面に紙や壁があることを想定し、文字の形に切り抜いて影を付けたい場合に…

  3. webデザイン

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

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

  4. webデザイン

    「コレがやりたかった!」GIFアニメ(動く画像)のPCモックアップ画像の作り方【Photoshop編…

    JPGなどの画像をパソコン画面にはめ込んだモックアップを作りたい場合に…

  5. webデザイン

    最近、123RFとゆー画像素材のストックフォトがめちゃめちゃ安くてハンパない件。

    つい最近までは画像素材を使用する際にはもっぱらiStockとFotol…

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

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

最近の記事

  1. Photoshop CCのメニュー文字やツールバーが異常に小…
  2. 思わずクリックしてしまう画像でアクセスアップ!2番目に簡単な…
  3. 「コレがやりたかった!」GIFアニメ(動く画像)のPCモック…

思考系のおもろい記事

ブログラ
  1. 3分の話

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

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

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

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

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