ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopとImagereadyで素早く動く文字のGIFアニメを作る方法

PhotoshopとImagereadyで素早く動く文字のGIFアニメを作る方法

投稿日:2010年03月09日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、素早く動く文字のGIFアニメを作る方法を紹介します。

Step1:はじめに

このチュートリアルは、一般的なアニメーションの作成方法ではありません。
Adobe Photoshop / Imagereadyは、今回のチュートリアルのような小規模アニメーションのために使われます。
通常のテキストレイヤーとモーションブラー(移動してブレて見える)テキストレイヤーを加えて、アニメを作る方法を紹介します。
下の画像は私が作った例です。

はじめに



Step2:テキストレイヤーを作成

複数のテキストレイヤーが必要です。
モーションブラーテキストレイヤーを複製します。
アニメーションに加えたい3〜5個のフレーズを選択してください。
それらが正確に中央に寄って、一直線になっているか確認してください。

モーションブラーテキストレイヤーを複製





Step3:モーションブラーレイヤーを作成

3〜5枚のテキストレイヤーを用意し、3〜5枚のモーションブラーレイヤーを作っていきます。
それぞれのテキストレイヤーを複製してください。
(レイヤーパレットで)それぞれの複製したレイヤーが、複製元のテキストレイヤーのすぐ上にくるように配置してください。
決して、すべてのモーションブラーレイヤーを上にして、すべてのテキストレイヤーを下にしないようにしてください。

複製したレイヤーごとに、「フィルタ」-「ぼかし」-「ぼかし(移動)」を下の設定で適用してください。

モーションブラーレイヤーを作成

モーションブラーレイヤーを作成



Step4:ImagereadyでGIFアニメを作成

Imagereadyで、「ファイル」-「編集」に行ってください。
「ウィンドウ」-「アニメーション」に行き、使用可能であることを確認してください。
アニメーションボックスに新しいレイヤーを作成してください。(ごみ箱アイコンの左側)

最初のレイヤーに対して、それを最初のモーションブラーテキストにしてください。
時間を0.1秒に設定してください。
次に、レイヤーボックスの下に行き、その時間をクリックしてください。
その後、2番目のレイヤーの時間を1.0秒に設定してください。
人が読めるように、テキストレイヤーがより長く目立つようにするためです。

ImagereadyでGIFアニメを作成

クリックして拡大

あなたが前のステップで行ったことを繰り返してください。
しかし、そこにもう一段階加えてください。
アニメーションボックスは、モーションブラーとテキストが繰り返されているはずです。
最後のテキストのあと、最初に戻って繰り返します。

ImagereadyでGIFアニメを作成

クリックして拡大



Step5:完成

アニメーションボックスの左下がForeverになっていることを確認してください。
再生をクリックして、どのように表示されるか確認してください。
テキストレイヤーがあなたが望んだようになっていなかったら、それぞれのアニメーションに対して、テキストレイヤーまたは モーションブラーレイヤーが非表示になっていないかどうか確認してください。
このチュートリアルは、放射状のぼかしを使って上下に動くようにするなど、様々な異なった方法で使うことができます。

psdファイルを置いておきます。

完成



引用:Web Design Library 著者:Muxla.com 翻訳:日下部



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング