フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

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

PhotoshopでGIFアニメーション

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

Photoshop CS6使用写真素材
所要時間の目安10分 パリの女性
パリの女性素材 》
画面サイズ570×400:解像度72pixel/inch UFO
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アニメーションは画質が劣化するため、風景や人物写真などで作るよりベタ塗りのイラストのほうが相性が良いですアイコンなどの手をピクピクと動かしてみたり、バナー広告で値段などを点滅させて目立たせたりする場合に効果的です

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

アレンジ

関連記事:PRムービーなどで最初に”スコンっ”とくる動画タイトルがPhotoshopで作れるって知ってました?

関連記事:photoshopで背景を透明なままPNGで保存するのは簡単だよ!

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

関連記事

Wordpress日本語テーマのまとめ
個別ブログ相談会
photoshop日本語チュートリアル
ブログラ

スリームデザインの出版書籍情報

photoshopの本

fotoliaデザインコンテスト大賞受賞作品の解説

tenコレクションデザインコンテスト

スリームデザインおすすめの書籍

本 本本 本

スリームデザインとソーシャルで繋がろう!

 
 
 

カテゴリー