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

関連記事

  1. webデザイン

    ヘッダーデザインの役割に応じた文章表現の考え方と構成方法。Photoshop編

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

  2. 3分の話

    あ、そーゆーことねっ!物事の本質を見極めるための俯瞰的視点と相互理解について。

    情報が極めて錯綜(さくそう:物事が複雑に入り組んでいること)する今日こ…

  3. フォトショップ

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

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

  4. webデザイン

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

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

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

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

最近の記事

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

思考系のおもろい記事

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

    WordPress日本語有料テーマの決定版っ!TCDシリーズのまとめ
  2. 3分の話

    柔軟な思考を大切にしたいクリエイター必読の5冊。私の頭をグニャングニャンに柔らか…
  3. コピーライティング

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

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

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