スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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月の人気記事ランキング