動くバナー（２）

『動くバナー（２）』

まず、前回作ったバナーの元画像を準備します。

画像編集ソフトでバナーなり、ボタンなりを作った時は、必ず元画像を保存したほうがいいです。元画像があれば、後で修正をするときに一から作り直す必要が無くなります♪　私は「元画像」というフォルダを作ってその中に保存しています。この楽天HPに関しては、「マイドキュメント」の中に「楽天HP」というフォルダ、「楽天HP」のなかに「images（アップした画像を保存）」と「元画像」というフォルダを作って管理しています。

バナーの元画像を「Photoshop」で開くと、前回作ったときの「レイヤー」が保持されたまま残っているので、このレイヤーを活用します。アニメーションのデザインは、文字の色がチカチカ変わるというシンプルなものを作ります。すごく簡単に作れるのでビックリですよ♪

元画像の文字レイヤーを複製します。

左は「Photoshop」のレイヤーパレットです。一番上が、今複製した文字レイヤーです。この文字レイヤーの色だけを変えます。
元画像はゴールドだったので、赤にしてみま～す♪
赤にするやり方は簡単で、複製した文字レイヤーのほうを選択し、ツールパレットの「Ｔ（文字ツールのこと）」を選んで、「amagurino house」という文字を選びます。それでカラーパレットから赤をクリックすると、瞬時に赤い「amagurino house」というロゴが出来上がります♪　ゴールドと赤の２種類のロゴのバージョンが出来上がるわけです。

同じレイヤーの中に　

　と　

　の２種類ができました。
確認するには、上のレイヤーパレットの「目」をオンしたりオフにしたりします。この「目」で、そのレイヤーの表示・非表示を表しているのですね。

次に、この画像を「ImageReady」で開きます。
「Photoshop」は画像編集担当、「ImageReady」はその加工といった感じかな。お互い連携しあっていますが、やれることが少しだけ違っているのです。

「ImageReady」で画像を開いたら、「アニメーションパレット」を開きます。もし画面上に出ていなければ、「ウインドウ」→「アニメーションを表示」で出てきます。

①のところに、ゴールドバージョンを表示（赤文字のほうは非表示にする）
②のところに、赤バージョンを表示（金文字のほうは非表示にする）
③で、表示される時間を決める。今回はあんまりチカチカさせたくないので、両方とも１秒ずつに設定。
④で、繰り返し方を決定。無限に設定すると、ずーっとチカチカしていてくれる。

すべて設定したら、「最適化ファイルを保存」。通常と同じようにただ保存してください♪　
これでもう完成！