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番目に簡単なブログのアイキャッチ…
  2. WordPressの使い方に迷ったらまずこの記事をチェック!すごく参考になる秀逸…
  3. 柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  4. 見ているだけで「Photoshopの実践的な使い方が学べる」日本語解説付き動画の…
  5. フリーランスや起業家になる前にこれだけは理解しておきたい5つのマトリックス&チャ…

関連記事

  1. 3分の話

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

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

  2. webデザイン

    デザインのレイアウトが苦手なひとが今日から得意になってしまう、たった3つの方程式!

    ポスターやホームページのバナー、アイキャッチ画像など人目を引き付けるデ…

  3. webデザイン

    photoshopでまるで本物の油絵タッチに仕上げるためのフィルター&塗り方講座。

    photoshopで油絵タッチに仕上げるために、まず ↓ のように風景…

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

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

最近の記事

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

思考系のおもろい記事

ブログラ
  1. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  2. キュレーション

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

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

    photoshopで仕事をしたい人が身につけておきたい技術や使い方のまとめ。日本…
  5. webデザイン

    「特訓Photoshopプロのテクニック教えます!」のWEB版を『無料』で一般公…
PAGE TOP